A black and white photo of me looking quite serious

Jordan Moore UX & Interaction Designer

SVG’s missing killer feature

April 1, 2014 in SVG

SVG has all the attributes for becoming the responsive web’s image format of choice. Built for scalability SVG is inherently resolution independent. You’d think it would be omnipresent in websites existing after the introduction of responsive web design in 2010. It isn’t.

So why don’t we use SVG? Why sidestep it in favour of a raster image inflated to double its intended display size? SVG lacks a killer feature that is present in JPG, PNG and GIF: convenience.

Graphics editing packages such as Photoshop treat SVG as an edge case. You can export SVGs from such applications but in an inconvenient, hacky way known only to some in the darkest corners of StackOverflow. Some of these “solutions” involve stripping the scalability out of the format to ensure it plays nicely in Photoshop’s restrictive parameters. In addition to that, my experience of patching that behaviour into applications has produced SVGs with varied results.

The recommended route would be to close Photoshop and open an alternative package that allows you to easily import and export SVGs like Inkscape or Adobe Illustrator, but it would be foolish to think that these applications have been ingrained into web design culture at this stage.

Making an SVG shouldn’t feel like going beyond the call of duty, nor should it require patching functionality into our current software. Perhaps when the big decision makers in hardware roll out even higher density displays beyond double density then it might expose the pixelated shortcomings of icons and other web assets built using oversized raster images. Maybe then we’ll see that the benefits of SVG outweigh the cost and convenience makes way for necessity.

Biography

I make cool things for the web for Eyekiller most days, the rest of the time is spent with my family and cycling Ireland's hills and coasts.

My interests lie in the areas of responsive web design and helping create good typography for the web.

Ambassadors

Become an ambassador