Skip to content
A list of valuable resources for learning SVG, covering everything from basic shapes to advanced topics like animation.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

The SVG Resource List

A list of valuable resources for learning SVG. It covers everything from the basics of writing SVG code, or exporting it from, say, Adobe Illustrator - to advanced topics like how SVG interacts with CSS and Javascript. How to animate it - how to make it interactive.

At the end of the list you will also find a handy selection of tools for working with SVG - such as editors, optimizers and polyfills, as well as a range of JS libraries that work well with SVG.

Introduction to SVG

Complete Guides to Writing / Using SVG

Working with SVG - Basics

Exporting SVG Files

SVG Structure, Scaling and Text

Compatibility and Performance

Working with SVG - Advanced Concepts

SVG Coordinate Systems and Transformations

SVG Patterns, Filters and Stroke

SVG Clipping and Masking

Styling SVG's with CSS

SVG Animation

General Considerations

"How To" Guides

Tools for Working with SVG

SVG Editors

SVG Animations Editors

  • SVGator - online SVG animation editor

SVG Optimizers / Converters

Polyfills and Compatibility


  • xvg - A Chrome extension for debugging SVG paths

JS Libraries for SVG

SVG-specific General-Purpose

Data Visualization

  • D3 - Data-visualization

Animation Libraries

SVG Tutorials

Links and Resources

Guides and References

SVG Demo Collections

Podcasts and News

Free SVG Resources

Other Useful Links - for Inspiration

You can’t perform that action at this time.