A curated list of SVG. The main idea is that everyone can contribute here, so we can center all the informations about SVG and keep up-to-date.
- Awesome SVG
- Basics
- Icons
- Text
- Patterns
- Gradients
- Filters
- Animation
- Responsive
- Accessible SVG
- Books
- SVG Software
- Libraries
- Snippets
- Fragment Identifiers
- SVG to Download
- Slides
- Videos
- Sites using SVG
- Experiments
- Optimizing, Fallbacks and Tools
- Grunt Plugins
- Gulp Plugins
- Groups and Conferences
- Follow on Twitter
- Thanks to...
- Contributing
How to use, documentation, elements and everything else to start the studies about SVG.
- Why arent you using SVG?
- SVGBasics
- Using SVG
- MDN docs about SVG
- Add svg to web page
- W3C Docs
- Resolution Indepence with SVG
- A bit about SVG
- An SVG Primer for Today's Browsers
- Tutorials by WebPlatform
- Um pouco sobre SVG - (Pt-Br)
- Entendendo e Usando o SVG - (Pt-Br)
- Imagens em alta resolução utilizando SVG - (Pt-Br)
- Maujor SVG - (Pt-Br)
How to use svg for icons, why svg is better than fonticon, tools for create icons and guidelines
- SVG icons ftw
- Icon System with SVG Sprites
- Icon Fonts vs SVG
- Ten reasons we switched from an icon font to SVG
- SVG symbol a Good Choice for Icons
- SVG use with External Source
- Cascading SVG Fill Color
- Google Fundamentals - Use SVG as icons
- Fontastic
- Useiconic
- Iconmelon
- SVGIcons
SVG is great for create responsive texts and texts with filters.
- SVG text typographic designs
- SVG text element
- SVG filters on text
- Tspan element
- Text in SVG
- Easily center text vertically with svg
- Cross Browser svg text paths without javascript even in older ie
- Flowed text in SVG: One step forward, one step back
- Fitter Happier Text
How to use, how they work and some tools to create patterns.
- How to use SVG Patterns
- SVG fill patterns
- Basic of SVG Patterns
- MDN about SVG Patterns
- Plain Pattern - Pattern Maker
- Trianglify - Triangle Pattern Generator
- SVGeneration - SVG generator
- Patternbolt - Pack a pattern svg into css or scss
- SVG Patterns Gallery
How to use, differences between css gradients and svg gradients, tools to generate gradients and some tips.
- Getting started with SVG Gradients
- Animating SVG gradients
- Using svg for flexible scalable and fun backgrounds - part 1
- Using svg for flexible scalable and fun backgrounds - part 2
- SVG Gradient Background Maker
- Basics of SVG Gradients
- MDN about SVG Gradients
- A farewell to css3 gradients
- CSS SVG Gradients with Transparency
- SVG Gradient Browser Issues
- Advanced Gradients for SVG
- SVG Gradient Generator
- Online CSS Gradient GeneratorHelp
- CSS/SVG Gradient Generator
What are filters, how to use, some examples and tips.