SVG & Fireworks for retina-ready sites / Amsul

Developing and designing responsive sites requires a lot of forethought about the UI variations for all viewport sizes. This calls for many considerations and unique challenges at each media-query break point.

On top of varying UI requirements based on screen size, high-density pixel displays have introduced a new challenge: serving images for retina display devices. All sites developed without consideration for high-pixel density displays lose all crispness in images and logos. Now with the new Macbooks going retina, the web is about to get a whole lot fuzzier.

One way about it..

Github, as well as many others, go about this with icon fonts. This method works really well. If you are able to serve custom fonts without FOUT, and only require basic icon styling, then this is the best solution. However, there are some alignment issues to tackle, and handling and creating custom fonts is not the easiest task.

SVG to the rescue!

Here’s where the .svg format becomes incredibly useful. Scalable Vector Graphics contain the mathematical data of the images rather than the pixel data – which allows them to be infinitely scalable.

Demo

For a quick demonstration, here are two Facebook icon images shown at their original sizes of 25px × 25px:

SVG - `1 kB`

And here are the same images scaled up 800%:

SVG - `1 kB`

The main thing to notice here, other than the obvious infinite scalability, is the difference in file sizes. Since .svg files hold no pixel data, the file sizes are incredibly small: 1 kB vs 13 kB. Using .svg removes the need for serving different images based on pixel density and saves a lot of bandwidth.

SVG, take the wheel

Support for .svg images on mobile and desktop browsers is surprisingly good and so I feel it’s quite safe to use on all my projects from now on.

Let’s make some Fireworks

Unfortunately, there’s no way to export files as .svg in Photoshop and I don’t feel comfortable with Illustrator’s rulers and grid system for pixel-specific design.

Adobe Fireworks plus the Export to SVG plugin is the perfect solution. Yeah it’s kinda dumb that Adobe hasn’t developed built-in support for this in Fireworks, but this plugin is extremely simple to install. Once you’ve installed the plugin, you will have an option under Commands > Export > Export SVG… and you’re good to go.