SVG ALL THE THINGS

Why SVG?

Choosing a web image

jpg	gif	png	svg

Many colors	Animation	Transparency	Resolution Independence

SVG also has animation and transparency but it's not good for photographs.

Why do we care about different resolutions?
retina screens, mobile phones, print, zoom

SVG vs Icon Fonts
http://css-tricks.com/icon-fonts-vs-svg/
http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

What is SVG?

Stands for Scalable Vector Graphics.
It is an XML file that can be edited in any text editor.
Replaces PGML and VML as the standard vector graphic for the web.
SVG 1.1 Second Edition is the current standard; SVG 2 is under development.

Specs - www.w3.org/TR/SVG/

Feature Sets:

DTD (doctype)

SVG doctype declarations are optional.

Beyond the specificities of (X)HTML processing, Doctype declarations in XML languages are only useful to declare named entities and to facilitate the validation of documents based on DTDs. This means that in many XML languages, doctype declarations are not necessarily useful.

Organizational Elements

<g>,<use>,<defs>,<symbol>

Paths

"the element is the most powerful element in the SVG library of basic shapes" - MDN

Line commands: (uppercase is absolute and lowercase is relative)

'M' or 'm': move to (x, y)
'L' or 'l': line to (x, y)
'H' or 'h': horizontal line (x)
'V' or 'v': vertical line (y)
'Z' or 'z': close path
'C' or 'c': cubic bezier curve (x1, y1, x2, y2, x, y)
'S' or 's': cubic bezier curver shortcut (x2, y2, x, y)
'Q' or 'q': quadratic bezier curve (x1, y1, x, y)
'T' or 't': quadratic bezier curve shortcut (x, y)
'A' or 'a': arc (rx, ry, x-axis-ration, large-arc-flag, sweep-flag, x y)

For the sake of brevity in paths, superfluous white space and separators can be removed as well as subsequent commands if the command is the same.

M 100 100 L 200 200  
M100 100L200 200

M 100 200 L 200 100 L -100 -200  
M 100 200 L 200 100 -100 -200

Coordinate System

The viewport, viewBox, & preserveAspectRatio

viewBox
Attribute that sets the size of the canvas that all the coordinates inside the SVG use.

preserveAspectRatio
Attribute that determines the relationship between the viewBox and viewport. Important for maintaining aspect ratio in scaling.

Basic Shapes

<!--    rectangle    -->
<rect x="0" y="3" width="32" height="5" />

<!-- rounded corners -->
<rect x="0" y="3" width="32" height="5" rx="3" ry="3" />

<!--     circle      -->
<circle cx="50" cy="50" r="100" />

<!--    ellipse      -->
<ellipse cx="50" cy="50" rx="30" ry="20" />

<!--      line       -->
<line x1="10" y1="5" x2="20" y2="15" />

<!--    polyline     -->
<polyline points="10,20 10,30 15,30" />

<!--    polygon      -->
<polygon points="10,20 10,30 15,30" />

Using SVG

Examples from CSS-Tricks and Sitepoint.

Image tag

<img src="image.svg">

Object tag

<object type="image/svg+xml" data="image.svg"></object>

Iframe

<iframe src="image.svg"></iframe>

Inline Use

<svg><use xlink:href="image.svg#imageId"></use></svg>

CSS Background

div {
    background: url('image.svg');
}

Test Embed

Styling

Common attributes
fill, stroke, transform
currentColor

Animating

Built in animation using animate elements and SMIL
Simple Example

Javascript frameworks
Raphaël (examples)
d3
Snap.svg
bonsai

Tricks
Line animation trick

Sprites

Sprites are used to lower the amount of requests made to the server. With PNGs this was done by flattening all the images on to one image and clipping the image to only show the portion that you wanted. This is still possible with SVG but there are better ways to do this.

Using defs or symbol
svg4everybody (IE and Android support)
Test Sprite

Using data-uri embeded in CSS
Test Data URI
Drawbacks? Can't style or edit. CSS bloat.

Tooling

Generate sprite sheets, data-uris or png fallbacks.

Web tools
Grumpicon
iconizr

NPM
gulp-base64
gulp-imacss
Many more

Browser Support

Can I Use

Testing for support

Modernizr

basic support
inline
clip paths
filters

hasFeature

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");

There is much more

http://css-tricks.com/mega-list-svg-information/

cuth/svg-allthethings