SVG embedded in HTML

While SVG is finally becoming a more common format, most still don’t really understand how important and powerful it can be for the web. To me, nothing illustrates this more than in-lining SVG images directly into HTML. Since SVG graphics are actually just xml and therefore text, they can be inserted into web pages like any other element. For example:

Is the following written directly into the HTML.

<svg width="100" height="100" viewBox="0 0 744.09448819 1052.3622047">
  <path d="m 433.06109,54.587209 -94.2813,72.000001 0,8.875
 94.2813,72 0,223.09375 -192.4063,-111.09375 -15.46875,-119.625 -5.59375,-3.21875 
-111.34375,46.40625 -42.999997,74.5 15.21875,117.625 7.6875,4.4375 109.499997,-45.625 
191.5938,110.625 -191.2188,110.40625 -109.499997,-45.65625 -7.6875,4.4375 
-15.21875,117.65625 -0.375,0.21875 42.999997,74.46875 0.375,-0.21875 111.34375,46.40625 
5.59375,-3.21875 15.46875,-119.625 192.0313,-110.875 0,222.65625 -94.2813,72 0,8.875 
94.2813,72 0,0.4375 86,0 0,-0.4375 95.875,-73.21875 0,-6.4375 -95.875,-73.21875 0,-47.125 
-0.1563,0 0,-499.5625 0.1563,0 0,-47.09375 95.875,-73.21875 0,-6.4375 -95.875,-73.218751 
-86,0 z"/>
</svg>

That’s a pretty neat trick and almost any vector graphics can be specified right in the HTML. Also since it’s in the documents, the xml elements are accessible in the DOM. So if you included some styles for the paths in the svg:

<style type="text/css">
#example_flakkon {
fill:#0000af;
fill-opacity:1;
}
</style>

You get:

So you have the ability to style images, without dynamically rendering or pre-rendering them. Neat.

Unfortunately, like mostly good things, this isn’t supported well by IE 7 or less. On the other hand, if all the security vulnerabilities couldn’t get you to update your browser, maybe SVG support will.

To see inlined and CCS‘ed SVG in action, check out our HTML 5 site (html5.coldfrontlabs.ca).

To see about the specifics of SVG, check out the spec.