Getting Started with Scalable Vector Graphics (SVG) - Aaron Lumsden | Aaronlumsden.com Aaron Lumsden

Getting Started with Scalable Vector Graphics (SVG) Written by Aaron Lumsden on 27 Jun 2012

In June’s article for webdesigntuts+ I look at SVG and how easy it is tom import vector graphics such as icons or logos into your web design workflow using Adobe Illustrator.

Sample from my SVG article

Recently at WWDC 2012 Apple announced the release of the new retina display MacBook Pro. Retina displays have a higher pixel density (220.5ppi) than that of normal screens or monitors and Apple claim that their retina technology pixel density is so high that the eye is unable to notice pixelation at a typical viewing distance. If you’ve witnessed a retina display firsthand then I’m sure you’ll agree they do look stunning. However, these retina displays can start to cause problems for us web designers.

The problem occurs when images that were previously saved as 72ppi now start to look distorted on retina displays. The solution to this problem is still not 100% solved and designers are looking at new ways to try and get around this problem.

One possible solution (in some cases) is to use SVG. Why would you want to use SVG? SVG’s are rendered as vectors and are therefore able to scale to whatever screen resolution we are viewing them on, whilst maintaining the sharpness and crystal quality that we intended when we first designed them.

This won’t solve all problems; we aren’t able to use SVG to render pixel based images such as .jpg’s or png’s (however, for that we can always use the canvas tag). When it comes to things like illustrated icons or logos then SVG proves extremely useful. Today I’m going to be showing you the basics of using SVG, as well as demonstrating how you can take your vectors that you have designed in Adobe Illustrator and implement them in your websites with ease.