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.
- 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
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
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
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
- 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
- Adobe Illustrator - $19.99/month
- Sketch - $79.99
- Webcode - $39.99
- iDraw - $24.99
- Inkscape - Free
- Inkpad - Free/Open source
- Animatron - Free
- Snap.SVG
- Two.js
- Raphael.js
- D3.js
- SVG.js
- Bonsai.js
- SVGWeb
- SVGRef
- VLEX
- Chartist.js
- Lazy Line Painter
- Path JS
- VelocityJS
- SeenJS
Programmers doesn't know how to draw, so we can download free svg sources to create beautifull effects.
- 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
- 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)
- 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/
- 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 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
- Grunt-svgmin
- Grunt-svg-compactor
- Grunt-webfont
- Svg fallback
- Grunt-svg2png
- Grunt-svg-sprite
- Grunt-iconizr
- Grunt-svgtemplater
- Grunt-svg-modify
- @SaraSoueidan
- @JoniTrythall
- @chriscoyier
- @DmitryBaranovsk
- @svgwg
- @shepazu
- @erikdahlstrom
- @dirkschulze
- @heycam
- @aleatoric
- @mbostock
- @TheGraphicalWeb
- @svgeesus
- @daviddaileysru
- @tabatkins
- 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.
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.