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
Resolution Independence With SVG by David Bushell
SVG on MDN
How to Add Scalable Vector Graphics to Your Web Page by Craig Buckler
SVG Workflow for Designers by Dan Mall

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 (good caching)
Cascading SVG fill color (i.e. making the icons match the text color they are near)

SVG Shape Syntax

Basic Shapes on W3.org
The <path> element has its own micro-syntax. Chris Nager introduces that in Bespoke SVG Reference.
Basic Shapes by J. David Eisenberg
Getting Started With Scalable Vector Graphics (SVG) by Aaron Lumsden

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>.

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).

About 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 (Part 1) – The viewport, viewBox, & preserveAspectRatio by Sara Soueidan (with a nice demo)
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 Gradients

Whereas a fill in SVG is just an attribute (or applied in CSS), SVG gradients are literally a special element like <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
Animating SVG Gradients by Joni Trythall
SVG Gradient Background Maker
SVG Gradients by Jakob Jenkov
CSS gradients are faster than SVG backgrounds by Lea Verou

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.

Better SVG Sprites With Fragment Identifiers by Peter Gasston
simurai thinking about why this would be so useful: SVG Stacks

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:

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 Text Element by Sebastian Gutierrez
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
Easily center text vertically, with SVG! by Lea Verou
Cross-Browser SVG Text-Paths by Zoltan Hawryluk

Animating SVG

There are a variety of ways to animate SVG. SVG syntax has an tag specifically for it, although it’s a touch complicated. That’s often referred to as SMIL (Synchronized Multimedia Integration Language). If you’re using inline SVG, you can also target the SVG (or shapes within) with CSS and animate using CSS animations. You can also use JavaScript to manipulate (and thus animate) SVG.

SVG animation with SMIL on MDN
Animating SVG with CSS by me
How SVG Line Animation Works by me
Animating Vectors with SVG by Brian Suda
SVG animation with JavaScript by David Dailey
Animated SVG Icons with Snap.svg by Mary Lou
JavaScript libraries focusing on SVG typically involve animating SVG. See those in the next section.

SVG JavaScript Libraries

D3.js (Data-Driven Documents) by Mike Bostock
Snap.svg (Newer thing by Dmitry Baranovskiy/Adobe) (Getting Started Guide by Sara Vieira)
Raphaël (Older thing by Dmitry Baranovskiy)
svg.js by Wout Fierens
Fabric.js (SVG-to-canvas & canvas-to-SVG) by Juriy Zaytsev

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

SVG Clipping

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 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.

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
Filament Group’s Grunticon: Article, Repo, In-browser tool. (Turns a folder of SVGs into SVG data URLs and fallbacks down from there.)
grunt-svgstore by Fabrice Weinberg (combine folder of SVGs into SVG sprite)
grunt-svg-sprite by Joschi Kuphal (combine folder of SVGs into SVG sprite, with CSS preprocessor output)
gulp-svg-sprites by Shane Osbourne (combine folder of SVGs into SVG sprite)
iconizr by Joschi Kuphal (lots of features combined)
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.

SVG Demos

Codrops has a good amount of nice SVG demos
I collect SVG demos that do interesting things.
SVG Wow
Erik Dahlström’s /svg/
Dynamically generated SVG through SASS + A 3D animated RGB cube! by Lea Verou

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.

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).

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) also do no-request rendering (that’s the whole point, really.)

In-browser Base64 encoder
This is what Grunticon does.
CLI commands to get Base 64 versions of files (either written to file or to clipboard).
Compass (for Sass) has Data URI helpers.

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

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!

SVGO is a command line tool that optimizes SVG. And it has a Grunt task.
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
In-browser SVG Optimizer by Peter Collingridge
Exporting SVG for the web with Adobe Illustrator CC by Michaël Chaize
Optimizing Inkscape SVG size for the Web by Tavmjong Bah

SVG Software

Adobe Illustrator ($19.99/month)
Sketch ($79.99)
WebCode ($39.99)
iDraw ($24.99)
Inkscape (Free)

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
Current State of Authoring Accessible SVG by Douglas Alan Schepers

SVG Talks

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

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

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 Guide to SVG Fallbacks by me
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.
A Primer to Front-end SVG Hacking by David Bushell
SVGEezy by Ben Howdle and Jack Smith.
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

SVG Specs

The W3C presides over the syntax that guides the implementation of SVG in browsers. SVG 1.1 is final, SVG 2 is in draft.

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) 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.

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.
WordPress user? Fix the media uploader so it accepts SVG.
You can use an .svg to replace the cursor. SVG Cursors by Robert Longson

A Compendium of SVG Information is a post from CSS-Tricks