Start using SVG on your new web projects
High resolution retina displays are only going to increase in popularity, but right now most current sites look pretty bad/blurry on them. While a perfect solution to photos hasn’t been discovered yet, we can now handle our other image needs fairly well.
Thomas Fuchs created a great flowchart for figuring out how to rentinafy your website: http://mir.aculo.us/2012/06/26/flowchart-how-to-retinafy-your-website/
I would recommend a small modification to that flow. Instead of starting with the assumption that the image is already in a image format (canvas, jpeg, png etc), I would first ask, can this be done in text? If not, do you have a vector file that can be used to generate a SVG? If not, then continue through the rest of the flowchart.
For a recent project my goal was to have an SVG image wrapped in a link that works on browsers that support SVG with a PNG version fallback for those that don’t. It’s your typical top left logo placement situation.
After a bit of researching, using an object tag seemed like the best option:
<a href="/">
<object data="/img/logo.svg" type="image/svg+xml">
<img src="/img/logo.png" alt="logo" />
</object>
</a>
This worked rather well. Almost all browsers showed the SVG, with the exception of IE <= v8 and android < v3 that showed the PNG instead. There was a minor issue with iOS4 devices that didn’t use transparency in the SVG background, and instead used white, but most people will have already upgraded to iOS5 which fixes the bug.
Unfortunately, the link surrounding the object was never accessible, even with adjusting the z-index. Javascript onclick methods on both the anchor, object and img tag never fired when clicked either.
It was probably possible to absolutely position the anchor above the object, but I’m not a fan of that method.
Next I tried simply using the SVG as a background image to the anchor. All modern browsers once again showed the SVG perfectly, with the exception of older IE and android which displayed nothing. I was already using Modernizr to enable HTML5 element support, so adding a check for SVG support and overriding the png background was simple enough. Additionally the iOS4 transparency bug disappeared too.
html.svg #logo {
background:transparent url(../img/logo.svg) no-repeat 0 0;
}
#logo {
display:block;
width:275px;
height:57px;
background:transparent url(../img/logo.png) no-repeat 0 0;
}
Now this is only really useful if you want to improve the look (“retinafy”) of your current png/gif images that were designed as vector graphics on your site, and you don’t need for the text to be selectable or the SVG to be interactive.
It looks like all browsers that support SVG, support gzipped SVGZ as well, so we might as well use that. Compressing the svg files proved to be a small hurdle though. First make sure you’re setting the correct encoding and type in your apache config or htaccess. If you’re using html5boilerplate (why are you not?) you’ll be all set. Second, skip using adobe illustrators built-in save as svgz option (at least with CS4), and just gzip the .svg yourself. For some unknown reason that’s the only way it would work for me.