Awesome SVG
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
Basics
How to use, documentation, elements and everything else to start the studies about SVG.
- Why arent you using SVG?
- SVGBasics
- Using SVG
- Injecting SVG with Javascript
- 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
- Structuring, Grouping, and Referencing in SVG
- Understanding SVG Coordinate Systems & Transformations Part 1, Part 2, Part 3
- 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)
Icons
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 and icon-fonts the future of iconography
- Manipulating svg icons with simple css
- SVG symbol a Good Choice for Icons
- SVG use with External Source
- Cascading SVG Fill Color
- Google Fundamentals - Use SVG as icons
- 150+ Free Animated SVG Icons
- Fontastic
- Useiconic
- Iconmelon
- SVGIcons
- SVG ICONS SOCIAL
- SVG ICONS NewBancomail
Text
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
- Animated SVG Font
Patterns
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
- Gerstnerizer
Gradients
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
Filters
What are filters, how to use, some examples and tips.
- A Look at SVG Light Source Filters
- Hands On: SVG Filter Effects
- SVG Filters by Jenkov
- Cross-browser filters with CSS and SVG
- MDN about SVG Filter
- Fun with SVG Filters
- Enhancing Data Visualization with SVG Filters
Animation
We can animate SVG in different ways, SMIL, CSS, JS. Every link will explain how to do.
- The Simple Intro to SVG Animation
- SVG animation
- The Playground Vector Animation Process
- MDN about Animation with SMIL
- Animating SVG with CSS
- Animated line drawing in SVG
- Animating Vectors with SVG
- Animated SVG icons with Snap.svg
- Animate SVG Icons with CSS3 & JavaScript
- How to Animate Festive SVG Icons With CSS
- Polygon feature design: SVG animations for fun and profit
- SVG drawing animation
- SVG Circus
- An Intro to SVG Animation with SMIL
- Interactive Infographic wtih SVG and CSS animations
- SVG Path Animation with Jquery and Illustrator
- Animate SVG with SMIL Adam Guttentag's Blog
- How SVG Line Animation Works
- Masking SVG Animations
- Animating SVG with clipping masks and css
- Loading Animation with SVG
- SVG animation with SMIL a collection by Jorge Aznar
Responsive
How to use the ability of "Scalable" to create different interactions for multiple devices
- Rethinking responsive svg
- Make SVG Responsive
- Making SVG's responsive with CSS
- Making Responsive SVG Graphs
- Media queries in svg images
Accessible SVG
How to enhance accessibility using SVG
- Tips for Creating Accessible SVG
- Current State of Authoring Accessible SVG
- Using ARIA to enhance SVG accessibility
- Great Guide for accessibility
- Describler make your SVG accessible
Books
- SVG Pocket Guide by Joni Trythall - 2014
- Learn SVG Interactively by Jay Nick - 2010
- Interactive Data Visualization for the Web by Scott Muray - 2013
- SVG Essentials by J. David Eisenberg - 2002
- RaphaelJS: Graphics and Visualization on the Web by Chris Wilson - 2013
- Building Web Applications with SVG by Jon Frost - 2012
- Sams Teach Yourself SVG in 24 Hours by Micah Laaker
- Learning Raphaël JS Vector Graphics by Damian Dawber - 2013
- SVG Tessellation by Jeremy Corbett - 2013
- SVG Compressed by Jakob Jenkov - 2013
- Gráficos vetoriais escaláveis by Mauricio Samy Silva - 2012 - Pt-Br
- SCALABLE, un libro sobre SVG by Jorge Aznar Tobajas - 2014 - ES
SVG Software
- Adobe Illustrator - $19.99/month
- Sketch - $79.99
- Webcode - $39.99
- iDraw - $24.99
- Inkscape - Free
- Inkpad - Free/Open source
- Animatron - Free
- Concepts: Smarter Sketching - Free with $5.99 In-App Purchase to unlock PRO which includes SVG export
Libraries
- Snap.SVG
- Two.js
- Raphael.js
- D3.js
- SVG.js
- Bonsai.js
- SVGWeb
- SVGRef
- VLEX
- Chartist.js
- Highcharts
- Lazy Line Painter
- Path JS
- VelocityJS
- SeenJS
- DrawSVG
- SVGPan
- svg-pan-zoom
- C3.js
- SvgVerlet.js
Snippets
Fragment Identifiers
SVG to Download
Programmers doesn't know how to draw, so we can download free svg sources to create beautifull effects.
- SVG Cuts
- The Noun Project
- Vecteezy
- Pinterest - SVG
- 110 best hight quality free flat design icon pack
Slides
- Play SVG! Utilizando vetores na web by Willian Justen - Pt-Br
- Whirlwind Tour of SVG (plus RaphaelJS) by Mark Grabanski
- Styling & Animating Scalable Vector Graphics with CSS by Sara Soueidan
- Responsive svg by lex Walker
- Leaving Pixels Behind by Todd Parker
- SVG by James Coleman
- SVG for the Responsive Web by Jan van Hellemond
- Next Level SVG by Ilya Pukhalski
- D3: Data-Driven Documents by Mike Bostock
- Filter Effects
- You don't know SVG by Dimitry Baranosky
- The future of SVG and Web Standars by Tavmjong Bah
- The future of gradients in SVG by Nikos Andronikos
- The Power of SVG& the Open Web by Doug Schepers
- SVG Sprites: Basic Usage and More by Cody J Landstrom
- Animating SVG with CSS and SMIL by Sara Soueidan
Videos
- Create a SVG Loading Animation with Adobe Illustrator
- Introduction to SVG and RaphaelJS
- SVG Line Animation Tutorial with CSS & Other Fun Stuff
- UtahJS - Murphy Randle - A Smattering of Snap.svg
- Dmitry Baranovskiy - You Don't Know SVG
- A great List of SVG Basics
- Cara Heacock on SVG
- Understanding SVG with Inkscape
- Priyanka Herur - Modern web graphics design using SVG
- Chris Wright - Surprise and delight: CSS + SVG
- Introduction to Inkscape's Geometry Constructions Tool
- Raphaël Tutorial—Basics
- Introducing SVG Cleaner
- Create a SVG Loading Animation with Adobe Illustrator
- Inkscape Hints and Tips for making SVG files work in ScanNCut Canvas
- Chris Coyier – SVG Is For Everybody
- Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS
- W3C Standards and Implementors Panel - The Graphical Web 2014
- Tutoriel HTML-CSS : Le Format SVG - (Fr)
- Manipulating SVG With CSS
- The future of gradients in SVG
- Animaciones con SVG - (ES)
Sites using SVG
- julekalender.vitusapotek.no
- kaipoche.co
- playgroundinc.com
- gardenestudio.com.br
- panizzon.ind.br
- sud.ramoneurs.ch
- makeyourmoneymatter.org
- albinotonnina.com
- creative-mob.com
- initiative.com
- guillaumejuvenet.com
- sono-it.hr/wsite/
Experiments
- Poly Maker
- SVG Wow
- Great experiments from Codrops
- Flat Surface Shader
- Thousands of experiments by David Dailey
- VectorShapes - svg apps by Peter Schonefeld
- STAR MAKER
- SVG Awesome - a collection by Jason Weaver
- SVG MAGAZINE
Optimizing, Fallbacks and Tools
- SVG Optimizer
- SVG Optimizer GUI
- Grumpicon
- SVG Optimisation Basics
- Scour
- SVG Editor
- Export SVG for the web with Illustrator
- Optimizing Inkscape SVG size for the Web
- Script to export PSD to SVG
- SVGeezy
- SVG Cleaner
- Export Flash to SVG
- Using SVG to shrink your pngs
- SVG MAGIC
- FakeSMILE
- Open Source SVG Editor
- Orthogonal
- Iconizr
Grunt Plugins
- Grunt-svgmin
- Grunt-svg-compactor
- Grunt-webfont
- Svg fallback
- Grunt-svg2png
- Grunt-svg-sprite
- Grunt-svgstore
- Grunt-iconizr
- Grunt-svgtemplater
- Grunt-svg-modify
- Grunt-contrib-imagemin
- Grunt-dr-svg-sprites
Gulp Plugins
Groups and Conferences
Follow on Twitter
- @SaraSoueidan
- @JoniTrythall
- @chriscoyier
- @DmitryBaranovsk
- @svgwg
- @shepazu
- @erikdahlstrom
- @dirkschulze
- @heycam
- @aleatoric
- @mbostock
- @TheGraphicalWeb
- @svgeesus
- @daviddaileysru
- @tabatkins
Thanks to...
- Marcus Vinicius, my friend =)
- Rodrigo Machado for helping me with CC License.
- Chris Coyier and his Compendium of SVG Information, was a great start point for me.
- and of course, all the Contributors.
Contributing
Your contributions are always welcome! Click Here to read the guidelines.
License
To the extent possible under law, Willian Justen has waived all copyright and related or neighboring rights to this work.