I’ve long referred to Scalable Vector Graphics as the “fourth image format”. In the first decade of the web, it felt like the forgotten format, due to lack of browser support. But since IE9, SVG has boasted near-complete support in modern browsers, and it’s been a deep pleasure to see it used in so many different ways on the modern web.
SVG still has some way to go: it’s not yet used for every logo, and it’s much more powerful than mere vector illustrations, as anyone perusing this reading list will learn.
This resource is suitable for both designers and developers: the former will find helpful resources in exporting and optimising their work from Illustrator and other vector drawing tools, together with the backgrounds) and text sections, while developers will encounter many useful applications of SVG in the others, complete with code samples.
As with most resources on this site, this reading list remains a work in progress: several topics, including radial gradients and an in-depth discussion of paths and arcs, have yet to be addressed, but will be added soon.
Prerequisites: Some knowledge of HTML & CSS
Time: Seven hours
Introduction
Shape Elements and Groups
Decoration
Text
Backgrounds
Imagemaps & InteractivityEnjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
