What is an SVG image?
An SVG is a Scalable Vector Graphic: a vector image created through text-based XML commands that is scalable to the size of the window in which it is being viewed.
OK, but why is SVG imagery so special?
Today many of the images used online are JPEGs, PNGs or GIFs. While all perfectly capable of upholding their primary purpose of being pretty to look at, quick to load and easy to use, they are bitmapped (displayed in pixels) and always remain a specific size. If you increase the size of your window (say, because your screen is bigger), the picture might grow in size, but it will lose its quality.
SVGs, on the other hand, are made up of many individual, scalable objects, which are defined by code, not pixels. This means that they can be scaled up or down without losing their quality – they are resolution independent. Considering our growing use of mobiles and tablets to go online and the rise of responsive web design, the importance of optimising your website for all devices, sizes and formats, is now more pertinent than ever. SVGs are the image equivalent of responsive web design: they change to suit you, not the other way round.
So, I should be using SVGs for my website?
In short, yes. The benefits are clear:
- They work across all browsers (apart from IE8, at the moment, at least)
- They are retina ready, so they will work on all retina display devices such as iPhones, iPads and any number of upcoming devices.
- They’re easy to make and edit. Even though in the back-end it appears as multitude of code, and mapping each point in code seems like an unsurmountable task at the best of times, SVGs are in fact easy to edit and create with visual tools such as Illustrator and Inkscape
- They are smaller than other formats, which means that your website will be both quicker to load and cheaper to host.
I’m sold, but can I use SVG for all images on my website?
It depends on your website, but no, probably not all of them. SVG is a vector-based format, so you aren’t going to be able to use it to display photos, or anything especially detailed, but beyond that, the only limitation is your imagination. Paths, shapes, fonts, colours, gradients, filters, scripting and animation are all easily created.
Their simplicity is not only great for scalability, though. SVGs are also great for UX and for taking advantage of the current trend for flat design. Gone are the days of multi-graphic, densely-shaded homepages that are full of bangs, whizzes and designer tricks. Instead, flat design gives websites clean, coherent simplicity, which makes them easier to navigate, quicker to load and better to look at (although you might want to carefully consider which designers you admit that to).
For a more tangible example of what SVGs can do, have a look at some of these SVG beauties:
- Here is an example from Brad Neuberg and SVG Web, which allows you to compare images rendered through flash and through SVG: http://codinginparadise.org/projects/svgweb/samples/demo.html
- This interactive SVG example lets you explore a graphic of Trajan’s Column, a Roman column in Italy: http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg
- Click and drag your mouse to make one big blob several smaller ones. Simple, but very fun: http://www.themaninblue.com/experiment/Blobular/
- This handy animated SVG demo shows you how they can liven up your website: http://tympanus.net/Development/SVGDrawingAnimation/
Using SVG is one fantastic method of optimising your website content, and is quickly becoming an essential component of your content marketing strategy.