A Compendium of SVG Information

A huge pile of information about SVG.

How to Use SVG

These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: <img>, background-image, <svg>, <iframe>, and <object>/<embed>.

• Using SVG by me
• SVG on the Web — A Practical Guide by Jake Giltsoff.
• Resolution Independence With SVG by David Bushell (and his Use SVG Part 1 and Part 2)
• SVG on MDN
• How to Add Scalable Vector Graphics to Your Web Page by Craig Buckler
• SVG Workflow for Designers by Dan Mall
• Ezequiel Bruni’s Ultimate Guide to SVG

SVG as an Icon System

SVG is particularly good for icons. Besides the resolution independence and styling possibilities, the shapes for icons are generally simple and thus the files size is tiny and can be combined into a single web request like a sprite or icon font.

I’ve written a bunch about this:

• Icon System with SVG Sprites
• The whole idea is essentially based off SVG templating
• SVG Sprites vs. Icon Fonts – Ian Feather has some good reasons to go with SVG over Icon Fonts as well.
• Using <symbol> for icons
• Using <use> with an external source. Because it caches better. The trouble is IE, but SVG4Everybody fixes that. Alternatively, just Ajax in the whole chunk of SVG and drop it in the document (mini library for that). Microsoft Edge is maybe fixing this.
• Cascading SVG fill color (i.e. making the icons match the text color they are near)
• There are two approaches to artboard sizing… make them all the same (or at least the same aspect ratio) or crop to the edges. Here’s a comparison article.

And more from others:

• Any bit of SVG can be used inline and as an icon, but here’s some nice ready-to-go ones with a nice click-for-the-code interface by Baptiste Briel. Evil Icons is another icon set that comes with code to help with integrating.
• SVG Icons FTW by Oleg Solomka
• Google says do it.
• iconmelon: “SVG icons lib for the web” – with some sets that take advantage of uniqely SVG things, like multi-color, which is uniquely hard but possible with icon fonts.
• Thomas Fuchs “ditched icon fonts in favor of inline SVG” and talks about some build process stuff to help automate the job.
• An Overview of SVG Sprite Creation Techniques by Sara Soueidan
• Caching SVG Sprite in localStorage by Osvaldas Valutis
• SVG Sprites and Icon Systems Are Super by Joni Trythall
• When you use a <use> multiple times for the same icon, you can color each of them differently by applying a different fill to the parent element and letting that cascade in. In order for that to work, you need to leave off the fill on the shape elements, meaning you’re mostly limited to single-color icons. You can get two colors though, by utilizing currentColor. You can also utilize native CSS variables for even more power.
• Styling SVG <use> Content with CSS by Sara Soueidan
• Some cross-browser nuances noted by Florent Verschelde.
• WordPress’ plan to move from an icon font to SVG

All that is based on inline SVG as a system, which is a fantastic way to go, but if you’re going down the SVG as CSS background-image…

• Filament Group’s Grunticon: Article, Repo, In-browser tool. Turns a folder of SVGs into SVG data URIs and fallbacks down from there. Grunticon 2 can progressively-enhance up to inline SVG. You can also start with inline SVG and fallback to Grunticon.
• You can’t adjust fill on the fly with SVG as background-image (Grunticon suggests just making multiple versions because GZip is so efficient with that). But here is a clever technique from Zach Schnackel which uses a CSS preprocessor to snag the file, turn it into a Data URI, then replace the fills with a new color.
• If you want to colorize SVG used as a background-image, that’s a little tricky since you don’t really have control directly in the CSS over that. Noah Blon has some techniques though.

And remember if you’re looking for SVG icons to use, anything vector can be made to work. You don’t have to specifically look for “SVG icons”. Even with icon fonts, you can activate that font locally, type the character you want the icon from, convert it to outlines, and save that out as SVG.

Here’s some web apps that export to inline SVG sprites:

• IcoMoon
• Fontastic (announcement)
• Smarticons (and Glyph)
• font-blast extracts the icons from a font into individual SVGs

SVG Shape Syntax

• Basic Shapes on W3.org
• The <path> element has its own micro-syntax. Chris Nager introduces that in Bespoke SVG Reference.
• Steven Bradley also covers path “line commands” through a simple tutorial.
• Adam Pearce demonstrates how the path syntax works through interactive demos, including how the complex cubic bézier stuff works.
• Demo on manipulating <path> data by Sten Hougaard.
• Basic Shapes by J. David Eisenberg
• Getting Started With Scalable Vector Graphics (SVG) by Aaron Lumsden.
• How To Create SVG Arrowheads and Polymarkers (the <marker> element) by Steven Bradley.
• A GUI tool from Brent Jackson on visualizing/creathing the path syntax.

SVG Patterns

In SVG you can fill shapes with colors and gradients, but you can also specify a <pattern> to fill with. <pattern>s are groups of other SVG elements that repeat, so it’s kinda like putting some <svg> in your <svg>.

• SVG Patterns by Matthew Bystedt
• How to Use SVG Patterns by Joni Trythall
• SVG Patterns Gallery by Philip Rogers
• SVG Fill Patterns by Jakob Jenkov
• Patterns on MDN
• PatternBolt (collection of simple SVG patterns).
• SVG Pattern Generator (fun!)
• Plain Pattern: A SVG based Seamless Pattern Maker
• This isn’t really about <pattern>, but SVGeneration creates SVG for use as background-image, some of which repeat like the idea of a pattern.
• Build More Complex Patterns With Images, Attributes, And Nesting by Steven Bradley.
• How to Export SVG Patterns by James George
• PatternFills by Irene Ros.

Sizing SVG (viewport, viewBox, and preserveAspectRatio)

The browser window you are looking at right now is a viewport. If there was an <iframe> on the page, that would have its own viewport. So too does <svg>! It’s a little tricky though, because SVG also has a viewBox which is the actual space in which the SVG elements are drawn. That, combined with preserveAspectRatio, determine how and where the SVG are drawn within that viewport.

• Understanding SVG Coordinate Systems & Transformations by Sara Soueidan
  • (Part 1) – The viewport, viewBox, & preserveAspectRatio (with a nice demo)
  • (Part 2) – The transform Attribute
  • (Part 3) – Establishing New Viewports
  • Art-Directing SVG Images With The viewBox Attribute
• A Look At SVG viewBox and viewport by Joni Trythall
• SVG Viewport and View Box by Jakob Jenkov
• A Look At preserveAspectRatio in SVG by Joni Trythall
• preserveAspectRatio on MDN
• SVG and the preserveAspectRatio Property by Giovanni DiFeterici
• The SVG Canvas, Coordinate System, And Viewport by Steven Bradley
• Using canvas to fix SVG scaling in Internet Explorer by Nicolas Gallagher.

SVG Gradients

Whereas a fill in SVG is just an attribute (or applied in CSS), SVG gradients are literally a special element: <linearGradient>. CSS has gradients as well, but because SVG gradients (can be) in the DOM, there might be cases where they are easier to manipulate.

Plus they work in IE 9 where CSS gradients do not.

• Getting Started with SVG Gradients by Joni Trythall. And her follow up noting some quirks with spreadMethod and the animate values attribute.
• Animating SVG Gradients by Joni Trythall
• SVG Gradients by Jakob Jenkov
• CSS gradients are faster than SVG backgrounds by Lea Verou
• Linearly interpolate colors in a triangle using SVG (Gouraud shading)
• This article by Alex Walker is a little old and link-baity, but has some good intro gradient information.
• SVG gradients can have opacity through the use of stop-opacity, as Matthew Miller shows us.
• SVG Radiant is a very good SVG gradient building tool. If you drag the (2) point up away from the bottom right, you can you can get a good feel for the difference between pad/repeat/reflect. This one is pretty good too, and outputs the gradient you build as not only SVG but as CSS or canvas as well. And another by Microsoft. This one is perhaps too simplified.
• Applying SVG gradients to a fill or stroke by Steven Bradly.
• Cleaning Duplicate SVG Gradient stops and Moving to defs (tool) by Jake Albaugh

SVG and Fragment Identifiers

The <use> element in SVG allows you to copy a bit of SVG for use again elsewhere. But that only works for inline SVG. If you wanted to use just particular bits inside an SVG file in CSS (background-image) or HTML (<img>), you’ll need fragment identifiers.

• How SVG Fragment Identifiers Work by me
• Better SVG Sprites With Fragment Identifiers by Peter Gasston
• simurai thinking about why this would be so useful: SVG Stacks
• Demo of it in <img> and background-image
• Demo from the specs
• Can I use… support

SVG Strokes

SVG is all about drawing shapes. Just as in a design program like Adobe Illustrator, you can apply strokes to those shapes as well as fills.

• Using SVG stroke Attributes by Joni Trythall (e.g. stroke-linecap, stroke-linejoin, stroke-dashoffset, etc)
• SVG Stroke by Jakob Jenkov
• Stroke Properties on W3.org
• A popular animation technique is “drawing” the stroke of shapes:
  • How SVG Line Animation Works
  • Animated line drawing in SVG by Jake Archibald.
  • SVG Drawing Animation
  • Polygon feature design: SVG animations for fun and profit
  • Walkway.js – “An easy way to animate SVG images consisting of line and path elements.”
  • Lazy Line Painter (jQuery plugin)
  • vivus
• SVG strokes normally scale relative to the viewport of the SVG, but they don’t have to, you can make sure they stay the width they are set to with vector-effect: non-scaling-stroke; (Demo).

SVG and Text

SVG has a <text> element which allows you to add (you guessed it) text to a graphic. Real, native web text, not outlines of characters, which 1) makes it more useful (selectable, searchable) 2) makes it more accessible 3) keeps the size down. Just like regular web text, the fonts you have available are limited to what is available on a given browser/platform/version or what is loaded via @font-face.

• SVG `text` and Small, Scalable, Accessible Typographic Designs by me
• SVG Filters on Text by Chris Scott
• There is a sub-element of <text> called <tspan> which you could use to affect the styling of parts of a larger text. SVG tspan element by Jakob Jenkov
• Text in SVG (text, tspan, tref) by Matthew Bystedt. tref is interesting – it allows you to define a bit of text to be used later, kinda like anything in <defs>, filters, gradients, use, etc.
• Easily center text vertically, with SVG! by Lea Verou
• Cross-Browser SVG Text-Paths by Zoltan Hawryluk
• SVG Text Element by Sebastian Gutierrez: “why it is important and how we use it within our D3.js Data Visualizations”
• Flowed text in SVG: One step forward, one step back by Tavmjong Bah. SVG 1.1 can’t wrap text (a fairly big limitation), but that should be coming in SVG 2.
• SVG text makes ideas like FitText easier: Fitter Happier Text.
• Letterbolt: animated SVG font.

Animating SVG

There three ways to animate SVG. CSS and SMIL are the “declarative” methods, and of course JavaScript can do it as well.

SMIL

SVG syntax has an <animate> tag specifically for it, although it’s a touch complicated. That’s referred to as SMIL (Synchronized Multimedia Integration Language), and SVG expands on that a bit as well.

• Fair warning: SMIL has never been supported in Internet Explorer and Blink has an “intent to deprecate” warning out.
• A Guide to SVG Animations (SMIL) by Sara Soueidan.
• SVG animation with SMIL on MDN
• With SMIL, you can animate a <path> (or other shapes) to a totally different set of coordinates (as long as it has the same number of points), creating a shape morphing effect that can be super cool. Tutorial on this by Felix Hornoiu.
• How SVG Shape Morphing Works by me
• An Intro to SVG Animation with SMIL by Noah Blon
• Collection of SMIL animations
• Radial Parallax with SVG, SMIL and CSS by Adam Guttentag
• Animated SVG Text Message Video Overlay by Adam Guttentag
• SMIL isn’t just <animate /> but also <animateTransform />. Demo. MDN.
• An Intro to SVG Animation by Ryan Allen

CSS

If you’re using inline SVG, you can also target the SVG (or shapes within) with CSS and animate using CSS animations.

• Animating SVG with CSS by me
• How SVG Line Animation Works by me. Jordan Wade also made some line animation examples on the Code School blog.
• SVG Glitch – using SMIL or using mutliple elements and CSS clip.
• Animate SVG with CSS by Jonathan Suh
• How to Animate Festive SVG Icons With CSS by Noah Blon
• Interactive Infographic with SVG and CSS animations by Adam Coulombe
• A Few Different Ways To Use SVG Sprites In Animation by Sarah Drasner

JavaScript

You can also use JavaScript to manipulate (and thus animate) SVG. Also see the libraries in the next section. Those tend to have animation capabilities.

• Animating Vectors with SVG by Brian Suda
• SVG animation with JavaScript by David Dailey
• Animated SVG Icons and Elastic SVG Elements with Snap.svg by Mary Lou
• Animated SVG Icon (Snap.svg) by Sebastiano Guerriero
• SVG Circus – In-browser tool for building (mostly looping) animations. Outputs it’s own custom JavaScript to do the animation. It’s open source.
• This article introduces how SVG animation can be done through Velocity.js. “Velocity.js automatically detects when it’s being used to animate an SVG element then seamlessly applies SVG-specific properties without you having to modify your code”
• Greensock also does SVG animation (demo) and fixes a number of issues with SVG transforms via CSS.
• SVG Morpheus by Alex Kaul: “JavaScript library enabling SVG icons to morph from one to the other.”

Other

• The folks at Playground created some nice SVG animations for their homepage. They wrote about their process, which ultimately landed on more of a custom frame-by-frame thing than any of the above.
• Kyle Conrad on Animating SVG: The Return. The trials, tribulations, and methods of vector animation.
• The State of SVG Animation by Sara Soueidan
• The Seven Stages of SVG by Chris Gannon

And just for funzies, check out this collection of SVG animations by Dennis Gaebel.

SVG JavaScript Libraries

• D3.js (Data-Driven Documents) by Mike Bostock
• Snap.svg (Newer thing by Dmitry Baranovskiy/Adobe – kind of like the “jQuery of SVG”d) (Getting Started Guide by Sara Vieira)
• Raphaël (Older thing by Dmitry Baranovskiy)
• Bonsai – “A lightweight graphics library with an intuitive graphics API and an SVG renderer.”
• SVG.js by Wout Fierens
• Fabric.js (SVG-to-canvas & canvas-to-SVG) by Juriy Zaytsev
• Two.js – “a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.”
• Paths.js – “Generate SVG paths for geometric shapes”
• VLEX – “Vector Layout Expressions”
• jQuery, with it’s DOM manipulation bilities, can alter inline SVG attributes and generally deal with the SVG DOM, but it does have trouble creating and injecting an <svg> element, because it doesn’t use the right namespace. Solution: put inside a <div> first.
• deSVG by Ben Howdle replaces <img> SVG with inline SVG it Ajaxs for, so you can style it and do all the awesome stuff you can do with inline SVG. Beware: double requests.

Charting with SVG

SVG doesn’t have any charting-specific features, but it has lots of features that lend themselves well to creating charts.

• In How to Make Charts with SVG we show a few ways to make pie, line, bar and scatter graphs.

There are also also very full-featured libraries that can build great charts. Like:

• amCharts
• Highcharts

Organizing SVG

Much like there are HTML tags to organize content, there are SVG tags to organize graphics. For instance, The <g> (group) tag is analogous to <div>. It doesn’t have much meaning all by itself, but it’s useful because it means you can style it and let those styles affect the entire group.

• Structuring, Grouping, and Referencing in SVG – The <g>, <use>, <defs> and <symbol> Elements by Sara Soueidan
• SVG `symbol` a Good Choice for Icons by me
• How To Define SVG Content for Reuse — The defs, symbol, And use Elements by Steven Bradley

SVG and Fonts

• There was a time when @font-face generators made an .svg version of fonts. I think it was required for some generation of iPad. It wasn’t really it’s own format, but another font format embedded in SVG which made it work. I believe we’re done doing that or talking about it now.
• SVG & colors in OpenType fonts Johannes Lang

SVG Clipping / Masking

You can draw shapes/paths that are used to hide other shapes/paths that are inside/outside of them.

• Clipping in CSS and SVG – The clip-path Property and `clipPath` Element by Sara Soueidan
• Animating SVG With Clipping Masks and CSS by Joe Howard
• Clipping and masking on MDN
• SVG is a good fit for CSS border-image, because border-image does a lot of scaling and repeating to do what it does, and SVG is good at that.
• Speaking of border-image, which works in a 9-slice (think Tic-Tac-Toe board) scaling, here’s a technique by Dirk Weber using 4-slice scaling in which “We will be able to create irregularly shaped outlines around elements and create arbitrary corner styles.”
• Dirk has written about 9-slice scaling as well.
• Peter Hrynkow on using an black-and-white PNG as an SVG mask over a JPG – for good image compression with true transparency. ZorroSVG is a tool for that.
• The same technique, presented differently by Dirk Weber as Applying Alpha Channels to JPGs
• Masking SVG Animations by Nathan Gordon
• SVG Patterns, Rotation and Clippaths by Adam Guttentag
• Demo (Happy Halloween) by Bear Travis inspired by CJ Gammon’s design.

SVG Build Tools

A common way to work with SVG on a site is to have a “folder full of SVGs” that you intend to use throughout the site. For performance reasons, you wouldn’t want to request each one individually. These build tools help combine them together in one way or another. Or they help you do something useful with SVG.

In-browser Tools

• IcoMoon by Keyamoon (select icons you want to use, output just that as SVG sprite. Drag and drop on your own SVG. Save project to update later.)
• Fontastic also outputs as SVG sprite
• Iconizr by Joschi Kuphal (repo) (lots of features combined)

Grunt

• grunt-svgstore by Fabrice Weinberg (combine folder of SVGs into SVG sprite). Gulp version.
• grunt-dr-svg-sprites by Danish Broadcasting Corporation makes a SVG sprite as well as PNG fallbacks.
• grunt-svg-sprite by Joschi Kuphal (combine folder of SVGs into SVG sprite, with CSS preprocessor output)
• grunt-svg-modify – Make width/height/color variations of SVG images by yoskel.
• Grunticon by Filament Group

Gulp

• gulp-svg-sprites by Shane Osbourne (combine folder of SVGs into SVG sprite). Tutorial on using this one by Mike Street
• gulp-svgfallback by Andrey Kuzmin creates a PNG sprite from SVGs
• Creating SVG Sprites using Gulp and Sass by Mike Street
• Roll your own SVG sprite sheets with Bower and Gulp by Alexander Synaptic

Command-line Only

• SVG-Stacker by Michael Schieben

Getting SVG to Use

There are a number of ways to get your hands on the SVG you need.

• Learn the SVG syntax. (see section)
• Learn to use vector editing software. (see section)
• Download vector stuff from the internet. Remember anything vector can be turned into SVG (e.g. you might find have an .eps or .pdf, but it has vector stuff in it, so open/manipulate in Illustator, Save As .svg).
  • Everything on The Noun Project is SVG
  • Stock photo sites typically have a way to return only vector search results. (e.g. Shutterstock or Vecteezy)
  • Remember fonts are vector, thus icon fonts are vector, thus any icon in an icon font set can be SVG. (Download and activate font, type character in Illustrator document in that font, convert to outlines, Save As .svg) Here’s a big list of icons fonts by me.
  • SVGCuts (free category)
  • Pinterest board
  • Foundry: “Providing a new generation of vector assets and infinite possibility” by thoughtbot
  • SVG Porn (logos for popular stuff in SVG format)

SVG Demos

• SVG Fancy Town: a collection of Pens that I found to demonstrate something cool or interesting or both in SVG land.
• Codrops has a good amount of nice SVG demos
• SVG Wow
• Erik Dahlström’s /svg/
• Dynamically generated SVG through SASS + A 3D animated RGB cube! by Lea Verou
• Patatap – super fun demo by Jonathan Brandel animating SVG and music with your interactions.
• Complex SMIL animation by rafszul of a wolf running.
• SVG is well-suited to the idea of “responsive logos”. These by Joe Harrison are SVG, but are actually more like a CSS sprite in that they are complete graphics being swapped out. Jeremy Frank has a post about styling/hiding/showing/moving the parts of SVG based on the room available.
• HalfTone.svg
  

  Pine for the days of cracking open a newspaper with beautiful half tone black and white prints? Recreate that magic (minus the ink smudges and paper smell) with fully scalable SVGs.

SVG Filters

There are CSS filters, which allow for familiar things like blur. SVG has its own set of filters (which is where the CSS ones came from) that include those familiar things, but also much more, including weird and unique things more reminiscent of Photoshop filters. SVG filters can be applied to HTML content as well as SVG content.

• SVG Filters (examples and demo tool) by Jorge Aznar
• Hands On: SVG Filter Effects
• SVG Filters by Jakob Jenkov
• Cross-browser filters with CSS and SVG by Peter Gasston
• Applying SVG effects to HTML content on MDN
• SVG Filters on Text by Chris Scott
• Fun with SVG Filters by Alan Greenblatt
• SVG Filters on HTML5 Video by Paul Irish (working demo).
• Enhancing Data Visualization with SVG Filters by Erik Hazzard
• SVG filters by Mike Sierra
• SVG Essentials/Filters
• You can make directional blurring happen with filters. Here’s Lucas Bebber with more on that and two more demos by Ignacio Correia: mouse movement and text scroll.
• Doing an Inset Drop-shadow With SVG Filters by Tab Atkins
• The Art Of The SVG Filter And Why It Is Awesome by Dirk Webber. Lots of cool text filters collected here.

Data URIs and SVG

One of the advantages of inline SVG can be the fact that no web request needs to be made. The information to draw that SVG is right there. Data URI’s (sometimes “Base 64” encodings, sometimes actual <svg> syntax (UTF-8)) also do no-request rendering (that’s the whole point, really.)

• Probably Don’t Base64 SVG – Base64 increases the size by around 33% and may not gzip as efficiently. Although you may need to encode it for it to work in IE which also increases the size…
• There are various choices for what you choose to encode in a data URI (and some ways to screw it up). Taylor Hunt wrote up a bunch about this.
• Check list by Amelia Bellamy-Royds on what is required for a UTF-8 data URI in CSS.
• In-browser Base64 encoder
• Grunticon outputs ASCII encoded SVG in CSS. i.e. data:image/svg+xml;charset=US-ASCII,
• CLI commands to get Base 64 versions of files (either written to file or to clipboard).
• Compass (for Sass) has Data URI helpers.
• Set background svg color in CSS (URL encode in Sass) by Philipp Kühn

SVG and CSS

CSS can affect inline SVG in most of the ways you would expect. But SVG also has its own set of CSS properties unique to it.

• Property list (Perhaps slightly outdated, since it’s referring to Presto)
• SVG’s Styling Properties on W3.org
• SVG Styling by Dirk Schulze
• SVG and CSS on MDN
• Manipulating SVG Icons With Simple CSS by P.J. Onori
• If you’re using inline SVG and , you can target elements within the from CSS, but they kind of aren’t “aware” of their <svg> parent, so you can’t have different class names on that affecting specific elements inside. You can properties like fill to cascade down through though, and there is a trick to get 2 colors.
• You can apply transforms on SVG elements themselves, like transform="translate(2px, 3px)" but Charlie Marsh discovered you don’t get as good of performance out of that as you do with CSS transforms on a parent HTML element, like style="transform:translate(2px, 3px)".

SVG and Lighting

• A Look at SVG Light Source Filters by Joni Trythall
• Adding Gloss – Using Filters for Lighting
• feDiffuseLighting on MDN

Optimizing SVG

It’s very smart to optimize images before use on the web. For raster images, even after you’ve saved at the smallest, lowest quality you are comfortable with, tools like ImageOptim can trim off even more file size without further affecting quality.

That same thing applies to SVG!

• Optimising SVGs for Web Use is a good post that walks us through some simple steps to tidy up the SVG file itself.
• SVGO is a command line tool (tutorial) that optimizes SVG. And it has a Grunt task or a native app. SVG NOW is an Illustrator Plugin that uses it to export SVGO optimized SVG right out of Illustrator.
• Kyle Foster has a lot of information about SVG optimization including two videos (one, two) and a slide deck.
• SVG Optimisation: The Basics by Dudley Storey
• Todd Parker reminds us that SVG GZips well. Repetitive information is what GZip eats for breakfast, so don’t worry too much about it.
• Scour – an SVG scrubber
• Peter Collingridge created SVG Optimizer. He provides an upload-and-output version, or a step-by-step in-browser version.
• Exporting SVG for the web with Adobe Illustrator CC by Michaël Chaize
• Optimizing Inkscape SVG size for the Web by Tavmjong Bah
• SVG Cleaner (intro blog post, video, and repo)

SVG Software

Desktop Software

• Adobe Illustrator ($19.99/month, Mac / Windows). While Illustrator is the flagship vector editing program, you can export SVG out of Photoshop as well.
• Sketch ($99)
• Affinity Designer ($49.99, Mac)
• WebCode ($39.99, Mac)
• Animatron (Free, Mac)
• Inkscape (Free, Mac / Windows / Linux)

In-browser Software

• SVG-edit
• Method Draw
• Mondrian

Mobile apps

• iDraw ($24.99, Mac and iOS)
• Inkpad (Free, iOS)
• Concepts: Smarter Sketching ($5.99 for SVG Export, iOS)

SVG Stuff in Code Editors

• A set of tab-complete snippets for Sublime Text 2/3. Also SMIL.
• Fun with SVG and Vim by Adam Morse
• Brackets SVG Code Hints

SVG Security

• The Image that called me (Active Content Injection with SVG Files), a presentation PDF by Mario Heiderich.
• Crouching Tiger – Hidden Payload: Security Risks of Scalable Vectors Graphics

Accessible SVG

I’m not an accessibility expert, but from what I can tell, SVG gets a decent nod from the accessibility community. Of course, you still have to do it right.

• Tips for Creating Accessible SVG by Léonie Watson
• Using ARIA to enhance SVG accessibility by Léonie Watson
• 15 guidelines to follow for SVG accessibility
• Current State of Authoring Accessible SVG by Douglas Alan Schepers
• Describler by Douglas Alan Schepers is a browser based tool to help convert your SVG’s into more accessible SVGs. It does things like make sure they are auto scaling, allows you to preview how they are read aloud, helps add accessibility attributes, etc.
• (Video) Douglas Schepers on Accessible SVG Data Visualization
• VoiceOver on iOS requires role="img"

SVG and Responsive Design

There are a few big intersections here. One is the inherit flexibility, sharpness, and small file size of SVG just fits in philosophically with the cross-device thinking of responsive design. Two is that because SVG have their own viewports, CSS media queries within them are kind of like the mythical “element queries” in they are based on themselves.

• Media Queries Within SVG by Tim Kadlec
• This demo by Joe Harrison capatured peoples imagitions with the possibilities of responsive icons. More detail is shown on the house the more space is available.
• Ilya Pukhalski looked into that demo and explained it in more details and looked at other methods.
• Sara Soueidan also did an overview of the techniques.
• Dudley Storey looked at the correct properties needed to ensure SVG (of different types) remain flexible.
• Making Responsive SVG Graphs Andrew Weeks.
• An important thing to know about CSS in SVG: the viewport inside SVG is the size of the SVG element itself, not the entire document in the browser. So when you write @media queries, things like min/max-width are based on the width of that SVG. Estelle Weyl exploited this ability to create a responsive images technique she called The Clown Car technique.
• Jason Grigsby was fascinated by media queries in SVG as well, and linked up some other resources and demos about it.
• Demo by Bear Travis in which a full page SVG graphic (with parallax!) is changed into a clipped circular one on a smaller screen.
• Art-Directing an SVG Embedded Using <object> by Sara Soueidan

SVG and JavaScript

One of the advantages of SVG is that the shapes are in the DOM. For instance, perhaps a <svg> has a <rect> and a <circle>. Through JavaScript, you could bind an event handler to just the <rect> and a different one to just the <circle>.

• SVG, JavaScript and the DOM by Ian Elliot
• Using Javascript to control an SVG by Peter Collingridge
• Links with Inline SVG, Staying on Target with Events by me. (Using pointer-events: none; is typically a good idea.)
• Love Generating SVG With JavaScript? Move It To The Server! by Ilya Zayats
• Be aware that when manipulating SVG with jQuery, you might not be able to using something like .addClass() but would have to use .attr("class", foo) instead.

SVG and Raster Graphics

• You can embed raster graphics (JPG, GIF, PNG) into SVG with the <image> element.
• You can convert raster graphics into SVG using the Live Trace / Image Trace tools in Adobe Illustrator. Or there is a free online tool called Vector Magic.
• Adobe Shape is an iOS app that snags vector graphics right from the camera on an iOS mobile device.
• How to Convert an Existing PNG or GIF to SVG by Ryan Irelan.
• Raster-to-SVG tools include PicSVG, Vector Magic, and ConvertIO

SVG and CMSs

• WordPress: Fix the media uploader so it accepts SVG.
• WordPress: manage an SVG sprite through the media uploader (potentially more up-to-date fork?)
• WordPress: ubik-svg-icons

SVG Browser Support

SVG is supported in all the current versions of all browsers and several versions back. The biggest concern is generally IE 8 and down, and Android 2.3 and down. But that’s just basic SVG support (inline, <img>, CSS background). There are sub-features of SVG that have different levels of browser support. Can I Use… does a good job of tracking that stuff.

• SVG Basic Support
• SVG filters
• SVG effects on HTML (e.g. use an SVG filter on a <div>)
• SVG fonts
• SVG fragment identifiers

SVG Fallbacks

If you need to support browsers old enough to not support SVG (see the Browser Support section), there are plenty of ways to handle fallbacks to resources that do work (e.g. replacing an image.svg with an image.png or the like).

• A Complete Guide to SVG Fallbacks by Amelia Bellamy-Royds and me. And here’s the older guide that was mostly a reaction to a single particular not-so-great
• Testing for support of SVG-as-img by me
• SVG for Everybody by Jon Neal. Syntax: <svg><use xlink:href="spritemap.svg#icon"></use></svg>. Either just works, or ajaxs and replaces the (for IE), or puts in fallback PNG.
• SVG injector from the Iconic folks (a really nice icon set as inline SVG and every kind of fallback). Syntax: <img data-src="svg/thumb-up.svg" data-fallback="png/thumb-up-green.png">. Will inject inline SVG or a fallback.
• Iconic have also open sourced their Illustrator exporter and Grunt toolkit.
• A Primer to Front-end SVG Hacking by David Bushell
• SVGEezy by Ben Howdle and Jack Smith. Use .svg in the HTML, and it swaps out with .png if not supported. Remember you can’t beat the prefetcher when you use src, so this will be subject to double requests.
• Dealing with SVG images in mobile browsers by Krister Kari
• Using SVG on Android 2.x by Todd Anglin
• Revisiting SVG workflow for performance and progressive development with transparent data URIs by Todd Motto
• Todd Motto also describes a nice way to test for inline SVG support here, where he uses createElementNS to create an SVG element and apply a rect and see if it works.
• If you want to author as if you’re just linking up SVG files (like SVG-as-img) but actually insert inline SVG, and you’re using Angular.js: check this. You could possibly combine this with a support test to then use a fallback instead in a non-support scenario.
• A technique by Artur A for inline SVG fallbacks. It’s a little complicated including <switch>, <foreignObject>, and some interplay between CSS on the page and CSS in the inline SVG, but it seems to work. The idea is to not use <img src> so no double-downloads and also not download the background-image if not needed.
• SVG Magic – jQuery plugin that does PNG fallbacks. The big cool thing SVG Magic does is that is creates the PNG images for you, rather than needing to create your own. Easier, but beware it makes a third-party network request to do this.
• svg-fallback by yoskel. (Grunt task)
• Drag and drop SVG to PNG conversion on OS X.
• OLD: svgweb would do SVG fallbacks using Flash.

SVG Specs

The W3C presides over the syntax that guides the implementation of SVG in browsers. There is technically a whole SVG Working Group. SVG 1.1 is final, SVG 2 is in draft. (A little history by Amelia Bellamy-Royds.)

• SVG 1.1 (Recommendation Status)
• SVG Tiny 1.2 (Not really used as far as I know, even though you can export as it from Illustrator. It was intended for stuff like old Blackberry’s)
  

  SVG 1.2 Tiny is a profile of SVG intended for implementation on a range of devices, from cellphones and PDAs to laptop and desktop computers, and thus includes a subset of the features included in SVG 1.1 Full

• SVG 2 (Editor’s Draft Status, also here) Apparently will have stuff like stroke positioning (inside, outside, middle).
  

  This version of SVG builds upon SVG 1.1 Second Edition by improving the usability of the language and by adding new features commonly requested by authors.

  Speaking of SVG 2, here’s Tavmjong Bah discussing some new features. I’ve heard z-index is coming in SVG 2 as well, but for now you have to change source order to replicate that.

• There are also specifications specifically for Markers and Strokes.

SVG Talks

There is a lot to talk about! Especially now since the browser support levels of SVG is so ubiquitous these days.

Slides

• SVG: So Very Good by Tyler Sticka
• You Should Be Using SVG by Ben Visser (with demos)
• Leaving Pixels Behind by Todd Parker at Artifact Conf
• Animating SVG with CSS and SMIL by Sara Soueidan
• Styling & Animating Scalable Vector Graphics with CSS by Sara Soueidan. Also an article on Smashing Magazine.
• SVG Optimization End-All, Be-All Edition by Kyle Foster
• SVG by James Coleman
• SVG for the Responsive Web by Jan van Hellemond
• Next Level SVG by Ilya Pukhalski
• Mike Bostock on D3.js
• SVG Strikes Back by Matt Baxter
• Cirque du filter: A Journey Into Advanced SVG Filter Effects by Michael Mullany
• SVG – Less Pixel, More Fun! by Sven Wolfermann
• Responsive SVG by Alex Walker
• Filter Effects
• The Future of SVG and Web Standards by Tavmjong Bah
• The Future of Gradients in SVG? by Nikos Andronikos
• The Power of SVG & the Open Web by Doug Schepers (Slides in SVG =))
• A collection of talks from CSS Dev Conf 2015

Talks as Videos

• SVG is for Everybody by me
• Styling & Animating Scalable Vector Graphics with CSS by Sara Soueidan at CSSConf
• You Don’t Know SVG by Dmitry Baranovskiy (with Slides)
• Introduction to SVG and RaphaelJS by Marc Grabanski
• Interactive Vector Graphic Essentials and Whirlwind Tour of Scalable Vector Graphics by Marc Grabanski
• Adding SVG to your toolbelt by Lennart Schoors
• SVG for responsive HTML5 by Jan van Hellemond
• Create a SVG Loading Animation with Adobe Illustrator
• SVG Line Animation Tutorial with CSS & Other Fun Stuff
• A Smattering of Snap.svg by Murphy Randle
• SVG by Cara Heacock
• Modern web graphics design using SVG by Priyanka Herur
• Surprise and delight: CSS + SVG by Chris Wright
• W3C Standards and Implementers Panel (2014)
• Manipulating SVG With CSS by Kyle Foster
• Augmenting Animations and Interactivity in SVG by Devina Coutinho

Podcasts

• Doug Schepers on The Web Ahead with Jen Simmons
• ShopTalk 129: With Sara Soueidan

SVG Books

• Practical SVG by Chris Coyier – 2016 t
• 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 and Amelia Bellamy-Royds (Originally released in 2002, 2nd edition released 2014
• 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

SVG Bugs

Hopefully it’s clear by now that SVG is a huge universe onto itself. There are so many features, and features combined with other features and other technologies, it’s no surprise there are bugs and browser inconsistencies.

• SVG Weirdness: “A repository for documenting bugs and other weird SVG behaviors” by Emil Björklund
• svg-edit tracks some browser bugs on their wiki.
• You can search the WebKit bug tracker for SVG related bugs.
• Same with Mozilla’s bug tracker.
• And Chromium.
• Vectomatic tracks some bugs.

Misc

Obligatory random things!

• Your .svg files not showing up even though you linked them correctly? Your server might be sending the wrong content-type (text/xml instead of image/svg+xml). Fix with .htaccess.
• You can use an .svg to replace the cursor. SVG Cursors by Robert Longson
• SVG would be absolutely ideal for favicons, but only Firefox support at the moment (Oct 2014). Safari 9’s “Pinned Tabs” accept (require?) SVG.
• SVG Placeholder Image Generator by Doug Schepers
• If you’ve ever used a blank GIF for a filler image (or a Data URI of the same), here’s Stephen Shaw on using SVG instead, which is easier for maintaining a configurable aspect ratio.
• GitHub supports diffing on SVG’s, both as code and visually.
• Trianglify: a javascript library for generating colorful triangle meshes that can be used as SVG images.
• Basics of SVG in email
• Poly Maker – awesome explanation of making poly art in SVG by Paul Lewis. And speaking of Poly, Matthew Wagerfield’s Flat Surface Shader can output in SVG as well.
• IJSVG is a Mac OSX 10.7+ COCOA library for rendering SVG’s within your COCOA applications.
• Building SVG Icons with React by Brent Jackson.
• Why is SVG going to be REALLY BIG? by David Dailey
• Flash designer? Flash2Svg: “Export Animated SVG files staight from Flash Pro”

SVG 2

• SVG 2 Spec
• SVG 2 new features