Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation

Animation

  1. 1 Intermediate SVG–Animating with snap.svg 192
  2. 2 The Simple Intro to SVG Animation 88
  3. 3 SVG animation 159
  4. 4 The Playground Vector Animation Process 45
  5. 5 MDN about Animation with SMIL 15
  6. 6 Animating SVG with CSS 57
  7. 7 Animated line drawing in SVG 44
  8. 8 Animating Vectors with SVG 43

Books

  1. 1 SVG Pocket Guide by Joni Trythall - 2014 56
  2. 2 Learn SVG Interactively by Jay Nick - 2010 7
  3. 3 Interactive Data Visualization for the Web by Scott Muray - 2013 8
  4. 4 SVG Essentials by J. David Eisenberg - 2002 6
  5. 5 RaphaelJS: Graphics and Visualization on the Web by Chris Wilson - 2013 12
  6. 6 Building Web Applications with SVG by Jon Frost - 2012 6
  7. 7 Sams Teach Yourself SVG in 24 Hours by Micah Laaker 3
  8. 8 Learning Raphaël JS Vector Graphics by Damian Dawber - 2013 6

Downloads

  1. 1 SVG Crowbar 124
  2. 2 SVG Cuts 114
  3. 3 Noun Project 24
  4. 4 Vecteezy 35
  5. 5 Pinterest - SVG 63
  6. 6 110 free flat design icon pack 44
  7. 7 Shutterstock 29
  8. 8 Onde Baixar SVG 21

Filters

  1. 1 A Look at SVG Light Source Filters 21
  2. 2 Hands On: SVG Filter Effects 10
  3. 3 SVG Filters by Jenkov 9
  4. 4 SVG Filters W3C 4
  5. 5 Cross-browser filters with CSS and SVG 1
  6. 6 MDN about SVG Filter 1
  7. 7 Fun with SVG Filters 5
  8. 8 Enhancing Data Visualization with SVG Filters 4

Experiments

  1. 1 Poly Maker 41
  2. 2 SVG Wow! 35
  3. 3 Great experiments from Codrops 11
  4. 4 Flat Surface Shader 16
  5. 5 Thousands of experiments by David Dailey 9
  6. 6 http://vectorshapes.com/ 23
  7. 7 Star Maker 11
  8. 8 SVG Awesome 18

Grunt Plugins

  1. 1 grunt-svgmin 16
  2. 2 grunt-svg-compactor 4
  3. 3 grunt-webfont 3
  4. 4 svg_fallback 5
  5. 5 grunt-svg2png 2
  6. 6 grunt-svg-sprite 1
  7. 7 Merge svgs from a folder 1
  8. 8 grunt-iconizr 0

Follow on Twitter

  1. 1 https://twitter.com/SaraSoueidan 2
  2. 2 https://twitter.com/JoniTrythall 1
  3. 3 https://twitter.com/chriscoyier 0
  4. 4 Dmitry Baranovskiy (@DmitryBaranovsk) 2
  5. 5 https://twitter.com/svgwg 3
  6. 6 https://twitter.com/shepazu 0
  7. 7 https://twitter.com/erikdahlstrom 0
  8. 8 https://twitter.com/dirkschulze 0

Gradients

  1. 1 Getting Started with SVG Gradients 22
  2. 2 Animating SVG Gradients 11
  3. 3 Using SVG For Flexible, Scalable, and Fun Backgrounds Part 1 4
  4. 4 Using SVG for Flexible, Scalable, and Fun Backgrounds Part 2 1
  5. 5 SVG Gradient Background Maker 6
  6. 6 Basics of SVG Gradients 9
  7. 7 MDN about SVG Gradients 0
  8. 8 A Farewell to CSS3 Gradients 4

Optimizing, Fallbacks & Tools

  1. 1 SVG Optimizer 6
  2. 2 SVG Optimizer GUI 2
  3. 3 Grumpicon 3
  4. 4 SVG Optimisation Basics 3
  5. 5 Scour 3
  6. 6 SVG Editor 8
  7. 7 Export SVG for the web with Illustrator CC 2
  8. 8 Optimizing Inkscape SVG size for the Web 2

Icons

  1. 1 SVG Icons FTW 50
  2. 2 Icon System with SVG Sprites 17
  3. 3 Inline SVG vs Icon Fonts [CAGEMATCH] 2
  4. 4 Ten reasons we switched from an icon font to SVG 3
  5. 5 http://www.pencilscoop.com/2013/11/svg-and-icon-fonts-the-future-of-iconography/ 8
  6. 6 Create an icon font illustrator icomoon 8
  7. 7 Manipulating SVG Icons With Simple CSS 2
  8. 8 SVG `symbol` a Good Choice for Icons 4

Libraries

  1. 1 Snap.svg 40
  2. 2 Two.js 16
  3. 3 D3.js 5
  4. 4 DrawSVGPlugin 7
  5. 5 jQuery SVG Reference 4
  6. 6 Long-term storage for Google Code Project Hosting. 6
  7. 7 POKER369 8
  8. 8 BonsaiJS 3

Masks & Clip-Paths

  1. 1 Cutting Inner Part Element Using Clip-Path 3
  2. 2 Clip Path by Jenkov 3
  3. 3 Masking W3C 2
  4. 4 Clipping SVGBasics 2
  5. 5 Clip Path Generator 6
  6. 6 Using SVG Clip-path 2
  7. 7 Clip-path Images Coderwall 1
  8. 8 Masking Html5Rocks 1

Patterns

  1. 1 How to Use SVG Patterns 21
  2. 2 SVG fill patterns 24
  3. 3 Basic of SVG Patterns 4
  4. 4 MDN about SVG Patterns 1
  5. 5 Plain Pattern - Pattern Maker 6
  6. 6 Trianglify - Triangle Pattern Generator 7
  7. 7 SVGeneration - SVG generator 5
  8. 8 Patternbolt - Pack a pattern svg into css or scss 2

Sites Using SVG

  1. 1 Kaipoche 22
  2. 2 Playground Inc. 15
  3. 3 Garden Estúdio 6
  4. 4 Panizzon Embalagens 5
  5. 5 Gerber Ramonage 8
  6. 6 Make Your Money Matter 7
  7. 7 http://www.albinotonnina.com/ 5
  8. 8 CreativeMob 3

Tutorials

  1. 1 Welcome unicorn-ui.com 32
  2. 2 SVG Document Structure 5
  3. 3 Why aren´t you using SVG? 2
  4. 4 What is SVG and why do you care? 3
  5. 5 The Once and Future SVG 3
  6. 6 SVG Basics 5
  7. 7 Using SVG 3
  8. 8 http://www.pencilscoop.com/2014/04/injecting-svg-with-javascript/ 4

Responsive

  1. 1 Responsive Sass Mixin 5
  2. 2 Rethinking responsive svg 1
  3. 3 the new code 2
  4. 4 Making SVGs Responsive with CSS 1
  5. 5 Making responsive SVG graphs 2
  6. 6 Media queries in svg images 0
  7. 7 How to Scale SVG 2
  8. 8 Responsive Logos, Part 1: Tips for Adapting Logos for Small Screens 1

SVG to Download

  1. 1 svg-crowbar 32
  2. 2 SVGCuts 15
  3. 3 Noun Project 6
  4. 4 Vecteezy 10
  5. 5 Pinterest SVG 25
  6. 6 110 best hight quality free flat design icon pack 18
  7. 7 Shutterstock 10
  8. 8 Onde baixar SVG? 4

Text

  1. 1 SVG text typographic designs 15
  2. 2 SVG Text Element 3
  3. 3 SVG Filters on Text 2
  4. 4 Tspan element 3
  5. 5 Text in SVG 5
  6. 6 Easily center text vertically, with SVG! 2
  7. 7 Cross Browser svg text paths without javascript even in older ie 2
  8. 8 Flowed text in SVG: One step forward, one step back 1

Slides

  1. 1 Working with SVG - A Primer 7
  2. 2 Play SVG! Utilizando vetores na web by Willian Justen 1
  3. 3 Whirlwind Tour of SVG (plus RaphaelJS) by Mark Grabanski 1
  4. 4 Styling & Animating Scalable Vector Graphics with CSS by Sara Soueidan 0
  5. 5 Responsive svg by lex Walker 1
  6. 6 Leaving Pixels Behind (Providence) 1
  7. 7 SVG by James Coleman 2
  8. 8 SVG for the Responsive Web by Jan van Hellemond 1

Videos

  1. 1 SVG Coordinate Systems Part I 9
  2. 2 Create a SVG Loading Animation with Adobe Illustrator 3
  3. 3 Introduction to SVG and RaphaelJS 2
  4. 4 SVG Line Animation Tutorial with CSS & Other Fun Stuff 5
  5. 5 A Smattering of Snap.svg 2
  6. 6 Dmitry Baranovskiy 3
  7. 7 SVG Introduction 3
  8. 8 Cara Heacock on SVG 2

SVG Immersion Podcast

  1. 1 ITunes 1
  2. 2 Stitcher 1
  3. 3 Tunein 0

SVG Software

  1. 1 Adobe Illustrator 12
  2. 2 Sketch 3 9
  3. 3 PaintCode 5
  4. 4 iDraw 2
  5. 5 Inkscape 2
  6. 6 Vector illustration app for the iPad. 3
  7. 7 Animatron 12
  8. 8 Concepts: Smarter Sketching 7

Snippets

  1. 1 SVG Snippets for Sublime Text 2/3 7
  2. 2 SVG-SMIL-Snippets for Sublime Text 2/3 1

Sprites

  1. 1 W3C Documentation 3
  2. 2 Using Fragment Identifiers on SVG 1
  3. 3 Inline SVG Icons 3
  4. 4 Caching SVG Sprite in localStorage 0
  5. 5 Ajaxing for your SVG Sprite 3
  6. 6 Creating SVG Sprites using Gulp and Sass 0
  7. 7 How SVG Fragment Identifiers Work 0
  8. 8 http://willianjusten.com.br/usando-svg-sprites/ 2

Accessible SVG

How to enhance the accessibility using SVG.

  1. 1 Tips for Creating Accessible SVG 0
  2. 2 Current State of Authoring Accessible SVG 1
  3. 3 Using ARIA to enhance SVG accessibility 0
  4. 4 Describler make your SVG accessible 0
  5. 5 Invisible Visualization 1
  6. 6 the new code 3

Tutorials

  1. 1 Welcome unicorn-ui.com 32
  2. 2 SVG Document Structure 5
  3. 3 Why aren´t you using SVG? 2
  4. 4 What is SVG and why do you care? 3
  5. 5 The Once and Future SVG 3
  6. 6 SVG Basics 5
  7. 7 Using SVG 3
  8. 8 http://www.pencilscoop.com/2014/04/injecting-svg-with-javascript/ 4
Confirm
Follow page
Suggest
Message Willian Justen de Vasconcellos
Report link