SVG Resources
A curated collection of articles, tutorials, tools, and links for working with SVG on the web.
Articles & Tutorials
-
SVG For the Web 101: How to Use and Best Practices
Progressive enhancement vs graceful degradation — best approaches for using inline SVG backgrounds safely across all browsers.
-
Intro to SVG
A gentle introduction to SVG: the XML-based vector image format that scales perfectly at any resolution.
-
SVG Browser Support
Comprehensive browser compatibility data for SVG features including inline SVG, CSS backgrounds, and filter effects.
-
SVG Browser Rendering Bugs
Common SVG rendering inconsistencies across browsers and workarounds to fix them.
-
Using the SVGeneration Code Editor
How to use the built-in SVG code editor to fine-tune generated patterns before downloading.
Tools
-
Base-64 CSS Decoder
Paste a CSS
background-imagedata URI and instantly decode and preview the embedded SVG. -
W3C SVG Specification
The official SVG specification from the W3C — the authoritative reference for all SVG elements and attributes.
-
MDN SVG Reference
Mozilla's comprehensive SVG reference with browser compatibility tables and live examples.
External Links
-
David Bushell — Web Design & Development
Expert front-end development articles and insights from a respected web consultant.
-
Todd Motto — JavaScript & Angular
In-depth JavaScript tutorials and Angular content from a Google Developer Expert.
-
Smashing Magazine — SVG
High-quality practical SVG articles from one of the web's leading design and development publications.
-
A List Apart — SVG
Thoughtful longform writing about SVG best practices and design patterns.
-
CSS-Tricks SVG Lodge
An extensive free video series on SVG — one of the best learning resources available anywhere.