Web Design Trends for 2015 - Scalable Vector Graphics (SVG)

16th January 2015

So it's now mid-January and amazingly the diet is still going and optimism is still high for the year. It seems like a perfect time to roll out the third in my five-part series of web design trends to look out for in 2015.

This is one I've been having a lot of fun with recently: SVGs. Scalable Vector Graphics are what I like to refer to as “programmable images”. You can give them a series or path and text coordinates via XML and they will kick out neat little images. But why would people go to the effort of programming an image you say? Well there are a few nice advantages to be gained from doing so.

The first answer to the question of why would you choose SVG images is in the title: scalability. With SVGs you can stretch them out until your heart's content and they don't lose quality. Today's web designs need to cater to various sizes of devices so SVGs are the perfect solution to scale your image to meet the browsers needs. This is also invaluable if you ever need to send any of your images off to the printers. With SVGs you won't have to worry about blurry images showing up across your t-shirts and mugs.

The other main - and even nicer in my opinion - advantage of SVGs is animation. No no no - not just animating the whole thing, but being able to animate the individual paths of an SVG... individually! The opportunities here are remarkable. If you'd like to see some examples of what SVGs are capable of then I found a very neat guide you can check out here:

http://svgpocketguide.com/book/

And if you're looking for some cherries on your SVG sundae then you'll be delighted to know that SVGs are a W3C recommendation. Huzzah!

Admittedly it's not all roses though. SVGs aren't supported on legacy versions of browsers so folks using old versions of IE will have to go without. However I would say that IE users are probably used to the suffering at this point so they won't mind. It's also tricky to get the font's right and there aren't really any widespread tools for creating these beauties swiftly.

That said it looks like 2015 will see a rapid rise in this web design trend and as a result we should really see the web come to life. Although it's not as powerful I'm fine with people calling it “the new flash” because you can do some really cool stuff with it. In terms of the animations I'm sure it will be a case of “all good things in moderation” but to me animated SVGs seem like a perfect complement to flat design. Web designers everyone will no doubt be using SVGs to make their designs pop and use of animation will definitely be drawing the eyes of viewers. I look forward to witnessing the rise!