Helpful Links and Resources on SVG

by Ryan Irelan

I’ve been doing research and planning on a new course covering SVG. Here are some great resources I found while combing through hundreds of links on Pinboard and search results from Google.

• History of SVG - More than you’d ever want to know. But still an interesting read to see the genesis of a recommendation.
• SVG Elements - Mozilla Foundation - All of the elements documented for easy searching.
• SVG Support Table - Can you use SVG in your project? This table will tell you.
• Export SVG for the web with Illustrator CC
• Vector Magic - Convert an existing bitmap image to SVG. Works well and reliably. The best online tool I found.
• Using SVG - CSS Tricks
• SVG without Hacks
• A Primer to Front-end SVG Hacking
• SVG Coordinate Systems - The epic three part series on the SVG coordinate system. This is a must-read and include a great interactive tool for seeing how your values for viewBox impact the coordinate system.
• Snap.svg - library JavaScript library for creating and manipulating SVG.
• SVGeezy - a library for easier handling of fallback images for SVG. This doesn’t require Modernizr.
• SVGO - a tool for optimizing SVG files.
• Interactive and Animated Scalable Vector Graphics and R Data Displays
• How to Add Scalable Vector Graphics to Your Web Page - Some basic coverage on getting SVG into your HTML document.
• SVG Workflow for Designers - A workflow post from the talented Dan Mall.
• Animating with SVG - Some fundamentals of CSS animations and SVG.
• Simple Intro to SVG Animation - How to use Velocity.js to manipulate SVG.
• The Designer’s Guide to Working with SVG - More fundamentals of SVG.
• SVG Scripting - The entire SVG tutorial series from Jenkov is very helpful. It’s not always comprehensive but can be a reliable guidepost along the way.
• SVG is for Everybody - a talk by Chris Coyier
• Structuring, Grouping, Referencing in SVG - Some excellent information on SVG groups and references (using defs and use).
• An Optimized SVG Workflow - Kyle Foster - Kyle walks through how he creates and optimizes his SVG files before using them in projects. There are some good tips in here!
• You Don’t Know SVG - Dmitry Baranovskiy - A talk from long-time SVG user and developer Dmitry Baranovskiy. It can be a bit snarky but the information is solid.

If you want to learn about when the new Mijingo course on SVG will be released, follow us on Twitter or sign up for your email announcement list:

Filed Under: Free Tutorials, SVG