Web Developer Reading List: Introduction to SVG

“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. Make SVG Responsive
2. Text Clipping Masks
3. Create Adaptive SVG Illustrations
4. SVG as an Alternative To Imagemaps
5. Responsive SVG Imagemap
6. The Basics of SVG Optimisation
7. Adobe Illustrator Workflow For SVG
8. SVG Export Settings For Adobe Illustrator

Further Resources

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.