The Wonderful World of SVG

Chris Coyier @chriscoyier

Basic Shapes <line> <rect> <circle> <ellipse> <path> <polyline> <polygon> There
are only a handful of

Basic Shapes <line> <rect> <circle> <ellipse> <path> <polyline> <polygon> There
are only a handful of Technically not a basic shape. Basic Shapes are shortcuts to paths.

Let’s spend like 15 seconds looking at SVG syntax. Even
though most of us will hardly ever touch it directly because there are great tools for it.

“Beaker” by Ben Joyce :: codepen.io/benjoyce/full/myqxad/

“Beaker” by Ben Joyce :: codepen.io/benjoyce/full/myqxad/ <polygon> <circle> <polyline> <rect>
<path>

<linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0" style="stop-color:
#88FF3F" /> <stop offset="0.56" style="stop-color: #6BD819" /> <stop offset="1" style="stop-color: #58BF00" /> </linearGradient> “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/

#88FF3F" /> <stop offset="0.56" style="stop-color: #6BD819" /> <stop offset="1" style="stop-color: #58BF00" /> </linearGradient> “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/ <ellipse fill="url(#gradient)" cx="150" cy="50" rx="150" ry="50" />

#88FF3F" /> <stop offset="0.56" style="stop-color: #6BD819" /> <stop offset="1" style="stop-color: #58BF00" /> </linearGradient> <path fill="url(#gradient)" d="M129.9,68.6c0,18.8-42.2,9.4-42.2,…" /> “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/ <ellipse fill="url(#gradient)" cx="150" cy="50" rx="150" ry="50" />

“Nature’s Journey” demo ﬁle that comes with Adobe Illustrator

“Nature’s Journey” demo ﬁle that comes with Adobe Illustrator LET
THERE BE ART

But why would you even Use SVG? 1 Resolution independent
2 Design possibilities 3 Use as a system

SCREEN SIZE & RESOLUTIONS Cliché conference presentation graphic depicting different

1999 SVG was born in

Why send pixel data when you can send geometry? Math
is more efﬁcient! Let your powerful computer* do the drawing. *The connection between this idea and client-side MVC is interesting. shoptalkshow.com/episodes/147-tom-dale/

1999 SVG was conceived in

2015 SVG was conceived in

“Nature’s Journey” demo ﬁle that comes with Adobe Illustrator

That one would be a little impractical on the web.
Because it’s like 30 MB. One of the advantages of SVG is that for simple graphics, the ﬁle size is smaller and the quality is higher (best of both worlds). But there is a complexity limit.

DEFINITELY!

PRROBBBBLY. (test the zipped file size)

Mayyyyybe. test context, gzipped size, display size, etc.

“SVG Animation” by Jose Aguinaga :: codepen.io/jjperezaguinaga/full/yuBdq/

“Super Nintendo Controller SNES” by Amar Chauhan :: codepen.io/beedesigned/pen/WbZzQx/ <div
id="icon"> <div id="controller"> <div id="leftPad"> <div id="arrowBG"> <div id="arrow"></div> </div> </div> <div id="bodyPad"></div> <div id="rightPad"> <div id="buttonBG"> <div id="button1"> <div class="circle"></div> <div class="circle"></div> </div> <div id="button2"> <div class="circle"></div> <div class="circle"></div> </div> </div> </div> </div> </div>

Pretty useful for <img srcset> and/or <picture>

inkscape.org

If you can get your hands on the vector art…
you can easily get that into SVG for use on the web.

There are three* useful ways to USE SVG ON THE
WEB 1 SVG as <img> in HTML 2 SVG as background-image in CSS 3 Inline SVG in HTML * There are more ways, like <object>, <embed>, and <iframe> - but I don’t think they are very useful so let’s ignore them.

<img src="spain.svg" alt="Map of Spain"> HTML

<img> is content.

.main-header { background-image: url(texture.svg); } CSS

INLINE <rect x="10" y="10" width="500" height="500" fill="yellow" stroke="blue" stroke-width="5" />

INLINE <rect x="10" y="10" width="500" height="500" fill="yellow" stroke="blue" stroke-width="5" />
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inline SVG Demo</title> </head> <body> <svg viewBox="0 0 1000 1000"> </svg> </body> </html>

SVG-as-<img>

SVG-as-<img> SVG as background-image

SVG-as-<img> SVG as background-image Inline SVG

SVG is pretty efﬁcient already, but it can also be
heavily optimized in multiple ways. cool fact

SVG gzips very well, because it has a lot of
repetitive strings. Be sure to enable that on your server for .svg and when testing to decide to use or not, test different formats against the gzipped sizes.

SVG gzips very well, because it has a lot of
repetitive strings. Be sure to enable that on your server for .svg and when testing to decide to use or not, test different formats against the gzipped sizes. AddType image/svg+xml .svg .svgz <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/html image/svg+xml </ifmodule> HTaccess

“gzip + poetry = awesome" :: jvns.ca/blog/2013/10/24/day-16-gzip-plus-poetry-equals-awesome/

PNG logo

PNG 16 K

PNG 16 K SVG

PNG 16 K SVG 319 K CRAZY EXPERIMENT

PNG 16 K SVG 319 K CRAZY EXPERIMENT 24 K
CRAZY EXPERIMENT, GZIPPED

PNG 16 K SVG 319 K CRAZY EXPERIMENT 24 K
CRAZY EXPERIMENT, GZIPPED ? K SHOULDA BEEN AN SVG AM I RIGHT?

SVGO is great for optimizing .svg ﬁles. This demo is
SVGO-GUI :: github.com/svg/svgo-gui The core library / command-line tools is here :: github.com/svg/svgo A visual in-browser version by Jake Archibald is here :: jakearchibald.github.io/svgomg/

SVG makes for an excellent ICON SYSTEM Icons are incredibly
common on the web. Tons of sites make use of them because they are useful visual indicators. The style of them change over time, but the concept isn’t a trend.

The classic problem: Say a site needs 20 icons. You
really don’t want to make 20 separate HTTP requests for those. That would be slow. One of the top ways to make sites faster is to make less requests. An icon system does two things: 1. All icons are in one request. 2. It makes icons easy to use.

Past solution to this same problem: CSS Sprites

Past solution to this same problem: Icon Fonts

Quick Aside It’s looking like HTTP/2 will make concatenating assets
an anti-pattern. Because. Uh. Reasons. I think there is no penalty for requesting multiple assets from the same host and no extra cookie overhead. So if you leave all the icons separate, you can change a single icon without breaking the cache on all of them.

Let’s do this thing. How to make an icon system
from inline SVG

<body> <svg> <defs> <symbol viewBox="0 0 100 100" id="icon-1"> <title>Follow
us on Twitter</title> <path d="M80.893,40.234c- … </symbol> </defs> </svg>

<body> <svg display="none"> <defs> <symbol viewBox="0 0 100 100" id="icon-1">
<title>Follow us on Twitter</title> <path d="M80.893,40.234c- … </symbol> </defs> </svg>

“Step 7: styling an icon group” by Benedikte Vanderweeën ::
codepen.io/Benedikte/pen/rAjad

Leveling up up our icon system 1. Let’s make a
build tool do the hard part 2. Let’s ajax for the SVG defs, so we can browser cache 3. Let’s add a fallback for non-supporting browsers

defs.svg <svg xmlns="http://www.w3.org/2000/svg"> <symbol id="icon-logo" viewBox="0 0 100 100" aria-labelledby="title
desc"> <title>CodePen Logo</title> <desc>Three dimensional box surrounded by a circle.</desc> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <symbol> <symbol id="icon-hammer" viewBox="0 0 100 100" aria-labelledby="title desc"> <title>CodePen Logo</title> <desc>Three dimensional box surrounded by a circle.</desc> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <symbol> <symbol id="icon-goat" viewBox="0 0 100 100" aria-labelledby="title desc"> <title>CodePen Logo</title> <desc>Three dimensional box surrounded by a circle.</desc> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <symbol>

Let’s make a computer build the sprite for us. We
could do it ourselves, but that’s more work and error-prone.

IcoMoon is very awesome.

IcoMoon gave us this Using the icons is as easy
as this.

Command line build systems are even more awesome.

How about a little graceful degradation and browser caching?

First, test to see if inline SVG is supported. var
supportsSvg = function() { var div = document.createElement('div'); div.innerHTML = '<svg/>'; return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg'; };

if (supportsSvg()) { // Ajax for the defs.svg } else
{ // We’re going to need a fallback }

var ajax = new XMLHttpRequest(); ajax.open("GET", "defs.svg", true); ajax.responseType =
"document"; ajax.onload = function(e) { document.body.insertBefore( ajax.responseXML.documentElement, document.body.childNodes[0] ); } ajax.send(); Ajax means we can browser cache the response.

For the fallback, one option is to use Grunticon. Grunticon
is a whole system onto itself, so you can deﬁnitely just use it exactly as is. But Grunticon doesn’t start with inline SVG in the HTML like we are doing here. We can still use it and do things our own way. Details! css-tricks.com/inline-svg-grunticon-fallback/

if (supportsSvg()) { // Ajax stuff here. } else {
grunticon([ "", "/fallbacks/icons.data.png.css", "/fallbacks/icons.fallback.css" ]); } Don’t load anything in a “supported” scenario

Should the day come that you don’t need a fallback
anymore, just stop running Grunticon and doing the support test.

OK, SHEESH. Why do it this way? What are the
advantages?

1. Vector!  Typically sharper than icon fonts because of non-text
anti-aliasing. css-tricks.com/icon-fonts-vs-svg/

anti-aliasing. 2. Easy mulE-color!  More CSS control than any other method. css-tricks.com/icon-fonts-vs-svg/

anti-aliasing. 2. Easy mulE-color!  More CSS control than any other method. 3. Animate!  Easy to apply transitions and animations. css-tricks.com/icon-fonts-vs-svg/

anti-aliasing. 2. Easy mulE-color!  More CSS control than any other method. 3. Animate!  Easy to apply transitions and animations. 4. Script away!  Everything is in the DOM. css-tricks.com/icon-fonts-vs-svg/

anti-aliasing. 2. Easy mulE-color!  More CSS control than any other method. 3. Animate!  Easy to apply transitions and animations. 4. Script away!  Everything is in the DOM. 5. BeKer accessibility! Plus fallbacks!  Fool-proof, once you set it up well. css-tricks.com/icon-fonts-vs-svg/

anti-aliasing. 2. Easy mulE-color!  More CSS control than any other method. 3. Animate!  Easy to apply transitions and animations. 4. Script away!  Everything is in the DOM. 5. BeKer accessibility! Plus fallbacks!  Fool-proof, once you set it up well. 6. BeKer semanEcs!  <svg> = “image” / <span> = “nothing” css-tricks.com/icon-fonts-vs-svg/

anti-aliasing. 2. Easy mulE-color!  More CSS control than any other method. 3. Animate!  Easy to apply transitions and animations. 4. Script away!  Everything is in the DOM. 5. BeKer accessibility! Plus fallbacks!  Fool-proof, once you set it up well. 6. BeKer semanEcs!  <svg> = “image” / <span> = “nothing” 7. Ease of use  Easy to manage individual icons, instant build processes. css-tricks.com/icon-fonts-vs-svg/

Speaking of icons, The Noun Project is the best site
ever for ﬁnding simple vectors for about anything.

SVG is pretty great at ANIMATION 1 Animate with CSS
2 Animate with SMIL 3 Animate with JavaScript

Animating SVG with CSS is just like animating HTML with
CSS. If it’s inline SVG, the CSS can be anywhere, like with the rest of the CSS for your page. If you use the SVG any other way, you have to embed the CSS within the SVG. CSS

Animating SVG with JavaScript can mean many different things. JavaScript
can do anything! JS

var circle = document.getElementById("orange-circle"), positionX = 0; setInterval(function() { positionX
+= 10; circle.setAttribute("cx", positionX); if (positionX > 500) { positionX = 0; } }, 20); This is just a dumb ol’ loop that changes an attribute. But that’s animation!

Typically, it means use a library. All of these work
with SVG, but all have slightly different capabilities, approaches, and focuses. 1. Greensock (GSAP)  greensock.com - does some cool normalization stuff too 2. Snap.svg  snapsvg.io - jQuery for SVG - kinda like newer Raphaël 3. Velocity.js  julian.com/research/velocity 4. SVG.js  svgjs.com 5. D3  d3js.org - data powerhouse

“High Five SVG Animation” by MailChimp UX :: codepen.io/mailchimpux/pen/Gblcs

“Yes/No SVG Tick Animation” by Chris Gannon :: codepen.io/chrisgannon/pen/ogEjRa/

codepen.io/sdras/pen/dPqRmP

You can do CLIPPING & MASKING Clipping paths are always
vector. Inside the vector shape is shown, outside the vector path is hidden. Masks are images. They can be vector too, but they don’t have to be.

“SVG Mask (Experiment)” by Noel Delgado :: codepen.io/noeldelgado/pen/ByxQjL

It’s overused already but who cares it’s awesome LINE DRAWING

“Animated SVG Headphones” by Chris Gannon :: codepen.io/chrisgannon/pen/zxWowX

SVG is pretty great at CHARTING Lines? Shapes? Math? Heck
yeah. SVG doesn’t have charting-speciﬁc features. It has features that lend themselves well to charting.

“Draw SVG Graph” by Chris Gannon :: codepen.io/chrisgannon/pen/PwQXgG

amCharts.com amCharts.com

The original gangsters SVG FILTERS “The Gooey Effect” by Lucas
Bebber :: css-tricks.com/gooey-effect/

More, more, MORE All this has been the tip of
the iceberg. There is a TON to know about SVG that we didn’t cover. I mostly wanted to just get you more excited about it. Huge list of information about SVG: css-tricks.com/mega-list-svg-information/

THANKs! @chriscoyier codepen.io

The Wonderful World of SVG

The Wonderful World of SVG

More Decks by Chris Coyier

Other Decks in Design

Featured

Transcript