“The forgotten fourth image format”, Scalable Vector Graphics languished in obscurity for almost a decade, pushed into a browser backwater by Internet Explorer’s lack of support. Now that IE 9 has joined the robust, tested support featured in all other browsers, SVG is finally coming into its own for frontend development.

This introductory reading list is just that: it explains the basics of using vector graphics in practical, everyday front end development, without delving too deeply into markup; I’ll be exploring those details in future articles.

Goal: Export SVG from a vector editor and add it to a web page; make the SVG responsive, animated and interactive.

Required Skills: HTML and CSS

Total time (core material): 12 hours

Core Material

1. An Introduction to SVG
2. Using SVG
3. SVG, XML & Versioning
4. Namespacing & xLink
5. The viewBox
6. Validating SVG
7. Using JavaScript in SVG
8. The Basics of SVG Optimisation

Most designers (and many developers) use applications such as Adobe Illustrator, Inkscape and Sketch to create SVG content. While recent versions of these tools have improved their SVG export, they still all need to be set up correctly for optimal creation of vector images; older versions are still used by many, and need to have their exported code cleaned up considerably.

1. Adobe Illustrator Workflow For SVG
2. SVG Export Settings For Adobe Illustrator
3. Tricks & Tips For Working With SVG in Adobe CC

Further Resources

Read A Practical Guide to SVG on the Web, by Jake Giltsoff, for a quick and efficient overview. Similarly, read A Pocket Guide to Writing SVG by Joni Trythall.

Sara Soueidan has written some excellent, in-depth pieces on SVG in the last year: I would recommend reading Making SVGs Responsive with CSS, Understanding SVG Coordinate Systems and Transformations and Styling And Animating SVGs With CSS.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.