File: Readme.md
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.
Thanks to...
- Marcus Vinicius, my friend =)
- Rodrigo Machado for helping me with CC License.
- Cleyson Leal for creating the awesome logo.
- 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.
Other Awesome Lists
License
To the extent possible under law, Willian Justen has waived all copyright and related or neighboring rights to this work.
File: contributing.md
Contributing
Your contributions are always welcome!
Guidelines
- Create a file section if needed.
- Add section description.
- Add section title to Table of contents.
- Search previous suggestions before making a new one, as yours may be a duplicate.
- Add your links:
* [link-name](http://example.com/) - description - If your link isn't in english, use (Lang) after the link.
- Check your spelling and grammar.
- Make sure your text editor is set to remove trailing whitespace.
- Send a Pull Request.
File: .travis.yml
language: ruby
rvm:
- 2.2
before_script:
- bundle
- chmod +x ci_script.sh
script: ./ci_script.sh
branches:
only:
- master
env:
global:
- NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
File: topics/Accessibility.md
Accessible SVG
How to enhance the accessibility using SVG.
- Current State of Authoring Accessible SVG
- Describler make your SVG accessible
- Invisible Visualization
- Making SVG Accessible
- Tips for Creating Accessible SVG
- Using ARIA to enhance SVG accessibility
File: topics/Animation.md
Animation
How to create different interactions and animations using SVG.
- A Guide to SVG Animations (SMIL) by Sara Soueidan
- An Intro to SVG Animation with SMIL
- Animated line drawing in SVG
- Animated SVG icons with Snap.svg
- Animate SVG Icons with css and Snap
- Animate SVG with CSS
- Animate SVG with SMIL Adam Guttentag's Blog
- Animating SVG with CSS
- Animating Vectors with SVG
- Create an SVG Animation using CSS and JavaScript
- Creating Material Design Ripple Effects with SVG
- Elastic Progress with SVG and GSAP
- Greensock Introduces DrawSVG
- How SVG Line Animation Works
- How to Animate Festive SVG Icons With CSS
- How to animate with Polyart
- How to create a Buffer Animation
- How to create an infographic with SVG
- How to use animateTransform for inline SVG
- Img2svg-animation - convert an image into a self-drawing SVG animation
- Interactive Infographic with SVG and CSS animations
- Intermediate SVG–Animating with snap.svg
- Jump Loader Animation with GSAP
- Loading Animation with SVG
- MDN about Animation with SMIL
- Masking SVG Animations
- Polygon feature design: SVG animations for fun and profit
- Run, run, Ruuun!
- Sign on the Dotted Line: Animating Your Own SVG Signature
- Styling And Animating SVGs With CSS
- SVG animation
- SVG Animation and CSS Transforms: A Complicated Love Story
- SVG Animations Using CSS and Snap.svg
- SVG animation with SMIL a collection by Jorge Aznar
- SVG Animation with Greensock
- SVG Circus
- SVG Dabbles - Tutorials about snap.svg
- SVG drawing animation
- SVG Path Animation with Jquery and Illustrator
- The Playground Vector Animation Process
- The Simple Intro to SVG Animation
- The State of SVG Animation
- Weighing SVG Animation Techniques
File: topics/Books.md
Books
Some of the best books about SVG.
- Building Web Applications with SVG by Jon Frost - 2012
- Gráficos vetoriais escaláveis by Mauricio Samy Silva - 2012 🇧🇷
- Interactive Data Visualization for the Web by Scott Muray - 2013
- Learn SVG Interactively by Jay Nick - 2010
- Learning Raphaël JS Vector Graphics by Damian Dawber - 2013
- RaphaelJS: Graphics and Visualization on the Web by Chris Wilson - 2013
- Sams Teach Yourself SVG in 24 Hours by Micah Laaker
- SCALABLE, un libro sobre SVG by Jorge Aznar Tobajas - 2014 🇪🇸
- SVG Essentials by J. David Eisenberg - 2002
- SVG Pocket Guide by Joni Trythall - 2014
- SVG Tessellation by Jeremy Corbett - 2013
File: topics/Downloads.md
SVG to Download
Some SVG resources to download and enjoy.
- Car Brand Logos - 184 automotive brand logos to download (100 SVG + 84 PNG), from mass-market to supercar and EV-only marques.
- Flat Color Icons
- Freepik
- Loading.io - Build Your Ajax Loading Icons with SVG/CSS/GIF.
- Onde Baixar SVG
- Pinterest - SVG
- Pixabay - International website for sharing high quality public domain photos, illustrations, vector graphics, and film footage.
- svg-icon - Select and download SVG icons as SVG symbol sprite file from over 4,000 SVG icons transformed from icon fonts collections.
- SVG Crowbar - Download svg on a page using the bookmark
- SVG Cuts
- SVG Porn - high quality svg logos
- SVG Repo - Explore & search library of commercial use OK SVG vectors
- Shutterstock
- The Noun Project
- Vecteezy
File: topics/Experiments.md
Experiments
Everyone likes experiments, why not some of them?
- A simple modal window with an animated SVG background.
- Annoshape by Shepazu
- Bump Maping by Lucas Bebber
- Depth field using Filters
- Elastic Stroke SVG+CSS
- Elastic SVG Elements
- Flat Surface Shader
- Generate semantic metro maps from GTFS data
- Glitch by Lucas Bebber
- Gooey Menu by Lucas Bebber
- Great experiments from Codrops
- GSAP SVG Animations by Chris Gannon
- Poly Maker
- Semantic & interactive graphics with SVG
- Semantic & interactive metro maps with SVG
- Semantic diagrams (generate/parse/query embedded RDF)
- SVG 101 - Instructive SVG's
- SVG Awesome - a collection by Jason Weaver
- SVG Christmas Experiments by I Hate Tomatoes
- SVG Christmas Experiments by Willian Justen and Lucas Maia
- SVG Heart Monitor
- SVG MAGAZINE
- STAR MAKER
- SVG Memory Game
- SVG Paper Shredder
- SVG Rainbow Rocket Man
- SVG Space Rocket!
- Play with Orca
- SVG Wow
File: topics/Filters.md
Filters
What are filters, how to use, some examples and tips.
- A Look at SVG Light Source Filters
- Color Filters can turn your gray skies blue
- Cross-browser filters with CSS and SVG
- Enhancing Data Visualization with SVG Filters
- FeConvolveMatrix live demo
- Hands On: SVG Filter Effects
- How to create squiggly text with svg filters
- MDN about SVG Filter
- SVG Filters by Matthew Bystedt
- SVG Filters by Jenkov
- SVG Filters effects
- SVG Filters W3C
- SVG Filters by Yoksel
File: topics/Follow-twitter.md
Follow on Twitter
They create the bests tools that we use today!
- @aleatoric
- @chriscoyier
- @daviddaileysru
- @dirkschulze
- @DmitryBaranovsk
- @erikdahlstrom
- @heycam
- @mbostock
- @JoniTrythall
- @SaraSoueidan
- @svgwg
- @shepazu
- @svgeesus
- @tabatkins
- @TheGraphicalWeb
File: topics/Gradients.md
Gradients
How to use, tools to generate gradients and some tips.
- A farewell to css3 gradients
- Animating SVG gradients
- Advanced Gradients for SVG
- Basics of SVG Gradients
- CSS/SVG Gradient Generator
- Getting started with SVG Gradients
- MDN about SVG Gradients
- Online CSS Gradient GeneratorHelp
- SVG Gradient Background Maker
- SVG Gradient Browser Issues
- Using svg for flexible scalable and fun backgrounds - part 2
- Using svg for flexible scalable and fun backgrounds - part 1
File: topics/groups.md
Groups and Conferences
They create the bests tools that we use today!
File: topics/Grunt-plugins.md
Grunt Plugins
For those who use Grunt, some plugins to work with SVG.
- Grunt-contrib-imagemin
- Grunt-dr-svg-sprites
- Grunt-icomoon
- Grunt-iconizr
- Grunt-svg2png
- Grunt-svg-compactor
- Grunt-svg-modify
- Grunt-svg-sprite
- Grunt-webfont
- Grunt-svgmin
- Grunt-svgstore
- Grunt-svgtemplater
- Svg fallback
File: topics/Gulp-plugins.md
Gulp Plugins
For those who use Gulp, some plugins to work with SVG.
File: topics/Icons.md
Icons
How to use svg for icons, why svg is better than fonticon, tools, and more.
- A Working SVG Workflow for Accessible Icons
- An overview of svg sprite creation techiniques
- Cascading SVG Fill Color
- Create an icon font illustrator icomoon
- Customizable svg icons css variables
- Feather
- Fontastic
- GeoIcons - Geographic map icons as tree-shakable SVG components.
- Glyph Smarticons
- Google Fundamentals - Use SVG as icons
- Hybrid SVG icons
- IcoGenie - AI-powered SVG icon generation from text descriptions
- IconSear.ch - search engine with over 50,000 SVG icons indexed
- Icon System with SVG Sprites
- IconicFonts - provides more than 55 icon sets with over 60,000 icons
- Icon Fonts vs SVG
- Iconmonstr
- ICONS Repo - Editable (colors, thickness, rotation, background) SVG icons library/tool
- Loaders with just SVG
- LogoSear.ch - search engine with over 200,000 SVG logos indexed
- Manipulating svg icons with simple css
- Making SVG buttons
- Material Design Icons By Google
- Por que parei de utilizar ícones como fontes - Pt-Br
- Sistemas de Icones em SVG - Pt-Br
- sprite.sh
- svg-icon - An ultimate svg icons collection DONE RIGHT
- SVG ICONS NewBancomail
- SVG ICONS SOCIAL
- SVG icons ftw
- SVG Morpheus
- Ten reasons we switched from an icon font to SVG
- SVG Sprites and Icon Systems are super
- SVG Sprite Workflow That Works
- SVG symbol a Good Choice for Icons
- SVG use with External Source
- Useiconic
- theSVG - A beautiful library of 4,000+ brand SVG logos with multiple variants and a free API
- VectorLogoZone - consistently formatted SVG logos
File: topics/Libraries.md
Libraries
Some libraries to help us to work with SVG.
- Animate Plus
- Bonsai.js
- Brainmap.js
- Brush Photo & Video Library - Renders repeated Unicode text along smooth SVG paths over embedded photos, with dependency-free ports for 20 languages.
- C3.js
- Charted
- Chartist.js
- D3.js
- DrawSVG
- Frappé
- GraphicsJS
- GreenSock Draw SVG
- GreenSock Morph SVG
- Highcharts
- iPath
- Landline
- Lazy Line Painter
- Maker.js
- MetricsGraphics.js
- mo · js
- Oea.SVG
- Path JS
- Raphael.js
- Snap.SVG
- snap.svg.zpd
- SnapFoo
- SeenJS
- svg-pan-zoom
- SVG.js
- svg-captcha
- SVGMaster
- SVGnest
- SVGPan
- SVGRef
- SvgVerlet.js
- SVGWeb
- Two.js
- VelocityJS
- Vivid.js
- Vivus
- VLEX
- Walkway
- wheelnav.js
File: topics/Masks-clips.md
Masks and Clip-paths
Another great feature that SVG supports, take a look.
- Cutting Inner Part Element Using Clip-Path
- Clip-path Generator
- Clip-path Images Coderwall
- Clip Path by Jenkov
- Clipping SVGBasics
- Masking Html5Rocks
- Masking W3C
- Using SVG Clip-path
File: topics/Optimization-tools.md
Optimizing, Fallbacks and Tools
Optimize your SVG, support older browsers and more.
- A complete guide to SVG Fallbacks
- Brackets-svg-code-hints
- Convertio
- Create Paths Online
- deSVG
- excalidraw-render - Clean, browser-free
.excalidrawto SVG/PNG renderer. Pure Python + cairosvg; no Node, no headless browser. - Export SVG for the web with Illustrator
- FakeSMILE
- FastTool SVG Tools - Browser-based SVG to PNG conversion, SVG optimization, and related image utilities with client-side processing.
- Grumpicon
- Iconizr
- Illustrator SVG Exporter Script
- Optimizing Inkscape SVG size for the Web
- Optimizing SVG for Web
- Orthogonal
- PicSVG
- Pixel Art to SVG - Pixel-art-aware PNG to SVG converter that keeps the grid: one rectangle per cell, merged with greedy meshing instead of contour tracing. Runs fully in the browser, no upload.
- Scour
- Script to export PSD to SVG
- smil2css
- svg2png command line wrapper
- SVG Cleaner
- SVG Dashed Line Generator
- SVG Editor
- SVG Editor Tools
- SVG Gobbler Browser Extension
- SVG MAGIC
- SVG Now
- SVG OMG
- SVG Optimisation Basics
- SVG Optimizer GUI
- SVG Optimizer
svgitool to inspect the content of SVG files- SVG Preview
- SVGeezy
- svgson
- svgxuse
- Tips for optimising svg delivery for the web
- Using SVG to shrink your pngs
- Vector Magic
- Vizua - Free browser-based image toolkit with SVG support — convert, optimize, and transform SVG files along with 90+ other image tools. All processing runs client-side via WebAssembly.
- WebFrames
- ZorroSVG - Put a Mask on it
File: topics/Patterns.md
Patterns
How to use, how they work and some tools to create patterns.
- An Overview of SVG Patterns
- Backgroundify - Very simple background generator
- Basic of SVG Patterns
- How to use SVG Patterns
- MDN about SVG Patterns
- Plain Pattern - Pattern Maker
- Trianglify - Triangle Pattern Generator
- Patternbolt - Pack a pattern svg into css or scss
- Gerstnerizer
- Textures.js
- SVG fill patterns
- SVG Patterns Gallery
- svg-patterns
- SVG quasicrystal generator
File: topics/Podcasts.md
SVG Podcasts
When you're on the train, jogging, or laying in bed trying to get to sleep…sometimes you just wanna listen to a podcast!
File: topics/Responsive.md
Responsive
How to use the ability of "Scalable" to create different interactions for multiple devices.
- Design the Web: Responsive SVG Images - Lynda Course
- How to Scale SVG
- Make SVG Responsive
- Making SVG's responsive with CSS
- Making Responsive SVG Graphs
- Media queries in svg images
- Responsive Sass Mixin
- Responsive Logo Composition With SVG
- Responsive Logos, Part 1: Tips for Adapting Logos for Small Screens
- Responsive Logos, Part 2: Making Logos Truly Responsive with Inline SVG
- Rethinking responsive svg
File: topics/Sites-using-svg.md
Sites using SVG
Some of the best sites using SVG.
- albinotonnina.com
- creative-mob.com
- Electron / Atom
- gardenestudio.com.br
- Gitlab
- guillaumejuvenet.com
- initiative.com
- kaipoche.co
- makeyourmoneymatter.org
- panizzon.ind.br
- playgroundinc.com
- Stat Social
- StretchSketch
File: topics/Slides.md
Slides
Some presentations about everything in SVG.
- Advanced SVG Animation Workshop by Sarah Drasner - Pt1
- Advanced SVG Animation Workshop by Sarah Drasner - Pt2
- Advanced SVG Animation Workshop by Sarah Drasner - Pt3
- Animating SVG with CSS and SMIL by Sara Soueidan
- Building Better Interfaces with SVG by Sara Soueidan
- Creating SVG Polygons
- D3: Data-Driven Documents by Mike Bostock
- Filter Effects
- GSAP + SVG by Sarah Drasner
- Leaving Pixels Behind by Todd Parker
- Next Level SVG by Ilya Pukhalski
- Play SVG! Utilizando vetores na web by Willian Justen - Pt-Br
- Responsive svg by lex Walker
- Styling & Animating Scalable Vector Graphics with CSS by Sara Soueidan
- SVG 101 - A gentle introduction
- SVG - De volta e para o futuro by Maujor Pt-Br
- SVG by James Coleman
- SVG for the Responsive Web by Jan van Hellemond
- SVG Strikes Back by Matt Baxter
- The future of gradients in SVG by Nikos Andronikos
- The future of SVG and Web Standars by Tavmjong Bah
- The Power of SVG& the Open Web by Doug Schepers
- The wonderful world of SVG
- You don't know SVG by Dimitry Baranosky
- Whirlwind Tour of SVG (plus RaphaelJS) by Mark Grabanski
- Working with SVG - A Primer
File: topics/Snippets.md
Snippets
Improve your workflow with some snippets.
File: topics/Softwares.md
SVG Software
When we need to create more detailed elements.
- Adobe Illustrator - $19.99/month
- Affinity Designer - $49.99
- Animatron - Free (no charge)
- Autodesk Graphic - $29.90
- Boxy SVG - Free (no charge)
- Concepts: Smarter Sketching - Free with $5.99 In-App Purchase to unlock PRO which includes SVG export
- iDraw - $24.99
- Inkpad - FOSS
- Inkscape - FOSS
- Sketch - $79.99
- Webcode - $39.99
- Gravit Designer - Free (no charge)
- CleverBrush - Free (no charge) to draw online, there are also white-labeled version available
- Text Forge (official plugin) - FOSS
- PolyGlyph - Free credits on signup — AI-powered SVG generation
File: topics/Sprites.md
Sprites
Another approach on how to use SVG sprites.
- Ajaxing for your SVG Sprite
- Caching SVG Sprite in localStorage
- Creating SVG Sprites using Gulp and Sass
- Inline SVG Icons
- How SVG Fragment Identifiers Work
- Usando SVG Sprites - Pt-BR
- Using Fragment Identifiers on SVG
- W3C Documentation
File: topics/Text.md
Text
SVG is great for create responsive texts and texts with filters.
- 3 tricks for adding texture to your text
- Animated SVG Font
- Create Text Filling with Water Effect
- Creative Typography with SVG
- Cross Browser svg text paths without javascript even in older ie
- CSS vs. SVG: Graphical Text Effects
- Easily center text vertically with svg
- Fitter Happier Text
- Flowed text in SVG: One step forward, one step back
- SVG filters on text
- SVG text element
- SVG text typographic designs
- Text in SVG
- Tspan element
File: topics/Tutorials.md
Tutorials
Everything you need to know to start with SVG.
- 5 Gotchas You’re Gonna Face Getting Inline SVG Into Production
- A bit about SVG
- A estrutura do SVG 🇧🇷
- A Look At SVG viewBox and viewport
- A Guide To Building SVG Maps From Natural Earth Data
- Add svg to web page
- Adobe Illustrator’s SVG Interactivity Panel Explained
- An Introduction to Sprite Animation
- An SVG Primer for Today's Browsers
- Atomic Design no SVG 🇧🇷
- Caching SVG Sprite in localStorage
- Clipping in CSS and SVG
- Coloring SVGs in CSS Background Images
- Como usar SVG 🇧🇷
- Entendendo e Usando o SVG 🇧🇷
- Export SVG for the web with Illustrator CC
- Getting to the point
- How I created my first SVG
- How SVG Shape Morphing Works
- How To Define SVG Content for Reuse — The defs, symbol, And use Elements
- How to make an svg lava lamp
- How to Style and Animate SVG Elements with CSS
- Imagens em alta resolução utilizando SVG 🇧🇷
- Make Responsive SVG Graphics and Infographics
- MDN docs about SVG
- Move And Scale SVG Graphics With The viewBox Attribute
- Por que usar SVG? 🇧🇷
- Resolution Indepence with SVG
- Structuring, Grouping, and Referencing in SVG
- Styling SVG Content with CSS
- SVG animation research & GSAP
- SVG and the preserveAspectRadio Property
- SVG Art Direction using Viewbox
- SVG Artboard Sizing
- SVG Basic course by Css-Tricks
- SVG Document Structure
- SVG For Absolute Beginners
- SVG has more potential
- SVG News
- SVGBasics
- The Once and Future SVG
- The Ultimate Guide to SVG
- The ultimate SVG guide Infographic
- Tools And Resources For Editing, Converting And Optimizing SVGs
- Transforms on SVG Elements
- Um pouco sobre SVG 🇧🇷
- Understanding the Basics of SVG Transformations
- Using SVG
- W3C Docs
- Want to learn about svg? Start with this article
- Web Developer Reading List Introduction to SVG
- What Is SVG And Why Do You Care?
- Why arent you using SVG?
- Understanding SVG Coordinate Systems & Transformations Part 1, Part 2, Part 3
- You, Me & SVG - Code School
File: topics/Videos.md
Videos
One image says more than 1000 words, and a video?!
- A beginners guide to SVG :us:
- A great List of SVG Basics
- Animaciones con SVG 🇪🇸
- Augmenting Animations and Interactivity in SVG with Devina Coutinho
- Cara Heacock on SVG
- Chris Coyier – SVG Is For Everybody
- Chris Wright - Surprise and delight: CSS + SVG
- Create a SVG Loading Animation with Adobe Illustrator
- Dmitry Baranovskiy - You Don't Know SVG
- Inkscape Hints and Tips for making SVG files work in ScanNCut Canvas
- Introducing SVG Cleaner
- Introduction to Inkscape's Geometry Constructions Tool
- Introduction to SVG and RaphaelJS
- Manipulating SVG With CSS
- Merry SVG Christmas by I Hate Tomatoes
- Priyanka Herur - Modern web graphics design using SVG
- Raphaël Tutorial—Basics
- Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS
- SVG 2 For the Artist and Developer with Tavmjong Bah
- SVG and GreenSock for Complex Animation by Sara Drasner
- SVG Coordinate System–Part I
- SVG in Motion by Sara Soueidan
- SVG Line Animation Tutorial with CSS & Other Fun Stuff
- Tutoriel HTML-CSS : Le Format SVG 🇫🇷
- The future of gradients in SVG
- The SVG Reality by Sebastiaan Deckers
- Three Ways to animate SVG by CSS-Tricks
- The Wonderful World of SVG by Chris Coyier
- Understanding SVG with Inkscape
- UtahJS - Murphy Randle - A Smattering of Snap.svg
- W3C Standards and Implementors Panel - The Graphical Web 2014
- Walking the Line: An Exploration of SVG's Past, Present, and Future with Alex Danilo
- Why Inline SVG is Best SVG