SVG Graphics

Posted by on Mar 15, 2011 in Code, Web Design | No Comments

One of the most interesting parts of HTML5 from a graphics standpoint is improved support for Scalable Vector Graphics. SVGs can automatically scale to any size because they are a vector format. Compare the SVG graphic of my logo below to the logo in the upper right hand corner of this site:
<p>If you’re reading this you’re probably using Internet Explorer. Time to upgrade?</p>
You can see it’s much sharper than the JPG and if you zoom in, it stays sharp. Safari, Firefox and Chrome support SVGs added inline to HTML5 documents. Safari allows SVGs to be specified as background images using CSS. The best way to embed them into WordPress seems to be to use an iframe. Because SVGs can support animation, they could one day replace Flash on the web and on the iPhone.

I wanted to see if I could build a version of my site using SVGs for the logo and background. Here’s what I learned:

If you check out the test page in Chrome or Safari it looks just like it should, but with crisp vector details. Firefox won’t display the shoe as an SVG background image, and Internet Explorer support is nonexistent. There’s an interesting project called SVGWeb that is supposed to provide SVG support for Internet Explorer, but I couldn’t get it to work.

The hardest part actually had very little to do with SVGs. Apache servers don’t serve SVG files
by default. Instead of displaying an SVG file, the browser delivers a box full of source code. Luckily I found the solution.

Here are some links to the sites I found most helpful:

Leave a Reply