Sneaking In SVG

Several of us in the office have an iPhone 4 or 4S. I own an iPad 3. Our first retina display Macbook Pro has arrived in the office. So unsurprisingly, a number of us are really noticing the lack of higher resolution graphics on the internet. Any 72 DPI image at its normal dimensions looks fuzzy and blurry next to the browser's crisply rendered text.

One solution I've been exploring lately is using scalable vector graphic (SVG) for some image elements. The advantage of using SVG is that it is an XML markup that gets rendered as vector graphics, so it looks sharp no matter what resolution you are at, no matter how much you zoom in. Most major web browsers have some support for handling SVG markup natively, with only Internet Explorer lagging behind... and even then, IE9 is doing a good job of it. So as long as we're not doing anything terribly complicated with it (such as animations, manipulations with javascript, etc.), it should be an option, right?

As an experiment, we decided to update our branded site lockout page. It is a simple HTML document that gets put onto a live production domain while we build the project out on our development servers. There's nothing too complicated about it, being mostly a polite text message and a link for more information. Our lizard logo, however, looked disappointedly blurry on retina display screens. We wanted to replace it with an SVG image instead.

I first installed Inkscape, a vector graphics editor with full support for the SVG 1.1 standard. It is released under the GNU General Public License, so its free for anyone to use. It is also cross-platform, so I could run it on my Mac under X11. If you've updated to OS X 10.8 Mountain Lion or higher, you'll discover that you don't have X11 available. No worries, you can instead download XQuartz, a free open-source project instead.

Inkscape can import Adobe Illustrator (AI) and Encapsulated Postscript (EPS), so I was able to pull in a vector graphic of our lizard logo. Since it's a vector graphics program, anyone experienced with Illustrator or CorelDRAW or the like will be able to work their way around the toolset fairly quickly. I changed the document size to the pixel width and height of the lockout page's graphic, adjusted the colours (200px tall and 200px wide, in this example), and saved it as a plain SVG document.

I knew using the SVG file as an image would work in most browsers, but I wanted a fallback for older browsers that did not support the vector format. A quick google search turned up a blog article by Peter Gasston, in which he describes a way to do exactly what I wanted using multiple background images in CSS.

div.class {
background-image: url('image.png');
background-image: none,url('image.svg'), url('image.png');
background-size: 100% 100%;
}

The long and the short of it is that the browser will use the normal image file (a PNG in the example above) in all browsers, including our older Internet Explorers. Then, in more modern browsers that support multiple backgrounds in CSS, it will try to override that, using our new SVG graphic, then falling back to the PNG file again.

Multiple backgrounds in CSS are supported in Firefox 3.6 and up, Safari 1.3 and up, Chrome 10 and up, and Internet Explorer 9 and up. So in essence, if the browser supports multiple backgrounds in CSS, it'll support rendering SVG natively as well.

As Peter notes, there are a couple of issues to keep in mind. If the SVG graphic has a transparent background, you'll be able to see the PNG background behind it. For our lockout page, this wasn't a big deal, though. I just set the background of the SVG graphic to the same hexadecimal colour code as the HTML body element. Since the browser renders the SVG natively, it will render both colours exactly the same, blending the two seamlessly and covering up the PNG completely.

Best of all, the final result looks perfectly crisp on retina displays. Check it out, either on your high resolution screen or just use the browser's zoom-in feature. Fantastic :)

This example worked best because the graphic we made as an SVG file was not complicated. A couple of easy paths and solid colours. No gradients, no animations, nothing complicated. Over the next couple of weeks, we will be converting portions of our Visual Lizard site with the same technique, providing SVG files for as many of the background-image graphics as we can manage.

Doing our part to make the internet pretty for all you retina display users ;)

to blog