This time we got a break from Countdown for a bit and explored the exciting world of SVG.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with the support for interactivity and animation. (Wikipedia)

SVG  is the future for icons, info graphics and other more complex graphics. For icons, there are still a lot of use of “font icons”, which are fonts containing the icons, such as  http://www.google.com/design/icons/ and other great libraries.

Some basic SVG tests (link)

 

In this demo we animate fill values, strokes, some basic CSS attributes. We added some more advanced animations below the logo, but those will be tested and explained more in next tutorials.

svg-article

Why SVG graphics, not PNG, JPG ?

SVG are vector based, so no matter the width/height you resize your graphic, or how many PPI (pixels per inch – retina displays) your device has, they will always look sharp. In one word, SVG are future-proof (unlikely to become obsolete).

SVG have very good browser support starting IE9+ – http://caniuse.com/#feat=svg

SVG are smaller in size than PNGs  (svg can be gzipped (cause svg is “only” a text like html))

SVG have some great options – like masking etc. and are interactive and stylable when embedded in the html.

Tools for creating SVGs

Adobe Illustrator, Inkscape (free), Sketch (for mac users only)

Optimizing SVGs

Great tool for optimizing

https://petercollingridge.appspot.com/svg-editor

 

Take care till next time