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