“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.
Total time (core material): 12 hours
Core Material
An Introduction to SVG
Using SVG
SVG, XML & Versioning
Namespacing & xLink
The viewBox
Validating SVG
Using JavaScript in SVG
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.
Adobe Illustrator Workflow For SVG
SVG Export Settings For Adobe Illustrator
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.