“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.

Core Material

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.