A Compendium of SVG Information

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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

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:

And more from others:

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:

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

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.

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.

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.

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.

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.

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.

CSS

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

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.

Other

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.

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

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.

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.

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

Gulp

Command-line Only

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.

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

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

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!

SVG Software

Desktop Software

In-browser Software

Mobile apps

SVG Stuff in Code Editors

SVG Security

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.

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 and Raster Graphics

SVG and CMSs

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

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

Talks as Videos

Podcasts

SVG Books

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.

Misc

Obligatory random things!

SVG 2