Using SVG Icons

With high-PPI devices such as the iPhone 4 and the new iPad, great resolution is changing how we think of the pixel. Increased resolution means that traditional pixel-based icons won’t be able to take advantage of this, so people are looking for vector-based solutions.

Because of this, more people are talking about SVG, or Scalable Vector Graphics. These XML-based images can store vector data, and so can be upscaled. Other options include creating special icon fonts, such as Pictos. I prefer the idea of using SVG over font solutions because the font method is just like using Wingdings; plus it adds non semantic letters to your code, even if you can hide them.

I was aware of SVG back in around 2006 during my college course. I naively thought at the time that was little point in learning about them, as I couldn’t see the advantages. If you want to see my first creation 6 years ago – this was it (if you view the image separately the text should zoom in):

So this weekend I decided to go back to my college work and create some SVG by hand. Luckily, for more complex designs, you can use something like Inkscape but I thought it would be interesting to hand code the icons I wanted to create.

First I started by drawing some very simple shapes on an 8×8 grid:

I then created a very simple XML file, and started adding the paths:

Note: The M stands for move, the L stands for line and the Z closed the point. That is as far as I got, but suffice to say that more complex icons won’t be created in this way. You can see the final version here: http://prandall.com/experimental/svg/img/pr-icons.svg

For the next part, I used this post as a tutorial: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/ and the traditional process of displaying a background image. I ended up using an empty span because I found it easier to play around with, but as you can see from David’s tutorial this doesn’t have to be the case.

Conclusion

Seeing the browser support for SVGs, support is varied, but for progressive designs it is worth considering in your next designs. Do have a play, experiment and look into the new ways of constructing sites, because it is an interesting time to create websites.

See the finished article: http://prandall.com/experimental/svg/ (and make sure you upscale/downsize it to see the full effect)

 

3 thoughts on “Using SVG Icons

  1. David Bushell

    Great work Paul, awesome to see you coded ‘em by hand!

    I just posted a little follow-up to my Smashing Mag article on my blog to introduce a few issues/bugs in certain browsers: http://dbushell.com/2012/03/11/svg-all-fun-and-games/

    I tend to export from Adobe Illustrator as a starting point but I have a feeling it likes to generate excess data. I wonder how many bytes could be saved through automated or manual optimisation? Either way, understanding the actual XML inside goes a long to appreciating the potential of SVG. Look forward to seeing more!

  2. Paul Post author

    Thanks for the comment David. I found it to be an exciting technology to look into (6 years on) and look forward to the results people find when they experiment with it.

  3. Pingback: How to make icons for the Web | We Are Cube.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>