SVG – less pixel, more fun!


Sven Wolfermann | maddesigns

Problem: huge variety of displays

Images majority of bytes per page – average ~1.3MB!

Device (viewport width) optimized images

Image by @grigs


SVG IS FUN! - SVG Glitch

Why Use SVG?

SVGs are text files

SVGs are…

SVG basic shapes

<svg viewBox="0 0 300 200" width="300" height="200">
  <rect width="300" height="200" fill="red"  />
  <circle cx="150" cy="100" r="80" fill="green" />

How to embed SVG

As Image

<img src="mySVG.svg" alt="image alt text" />

Object Tag

<object type="image/svg+xml" data="mySVG.svg"><!--fallback--></object>


<iframe src="mySVG.svg"><!--fallback--></iframe>

How to embed SVG


.element {background: url(mySVG.svg);}

animated SVG in <img src="svg-animated.svg" alt="">

How to embed SVG

Inline SVG (HTML5)



<!--[if (gt IE 8)]><!--><svg></svg><!--<![endif]-->


SVG is great for vector images – logos / icons


<div class="logo">
    <img src="logo.svg">

with Modernizr fallback

.no-svg .logo {
    background: url("logo.png");
.no-svg .logo img {
    visibility: hidden;


…but we have icon fonts!

I  icon fonts!

Icon fonts fallback is hard

Blog post: bulletproof icon fonts

Font Awesome

Font Awesome is a full suite of 479 pictographic icons

Font Awesome / IcoMoon

If you only use a bunch of icons, strip down the files with


pick your icons


save as font (or SVG)

save Kb!

Multiple Color Icon Fonts

<a class="st-icon st-multi-color st-icon-github st-shape-icon" href="">

kinda works, but NO!

Icon fonts vs. SVG

Ten reasons we switched from an icon font to SVG

Chris Coyier – SVG Is For Everybody – beyond tellerrad Düsseldorf 2014

Full color icons vs. monochrome glyphs

Iconic – Icon Library

SVG Icon Sprites

SVG Icon Sprites

internal SVG element reference

  <symbol id="menu">
      <path d="…" />
<use xlink:href="#menu" />

external SVG element reference (cachable!)

<svg xmlns:xlink="…">
  <use xlink:href="img/all-icons.svg#menu" />

Creating SVG icon sprites

SVG Store – Grunt task

svgstore: {
  options: {},
  dist: {
    files: {
      'dist/img/all.svg': ['source/img/icons/*.svg']

SVG icon sprites in HTML

integration “icon home” in HTML:

<svg class="icon-home" role="img" title="Home Icon"
     viewbox="0 0 75 75" width="25" height="25">
  <use xlink:href="img/all.svg#home"></use>

integration “icon menu” in HTML:

<svg class="icon-menu" role="img" title="Menu Icon"
     viewbox="0 0 75 75" width="25" height="25">
  <use xlink:href="img/all.svg#menu"></use>

CSS styling with fill

// inherit the fill color from parent
svg {
  polygon, path, rect, circle {
    fill: inherit;

fill all icons with red

// fill all elements contains the class „icon” with ’red’
[class*="icon"] {
  fill: red;

CSS styling with fill

[class*="icon"] {
  fill: red;

.icon-menu {
  fill: green;

.original-svg-pin {
  fill: blue;

Styling of <use> element references

(works in Firefox, but spec said Chrome/WebKit is right)

Styling before CSS: SVG Presentation Attributes

<path fill="#FF931E" stroke="#ED1C24" stroke-width="5px" />

Use CSS now:

    <style type="text/css">
      path {
        fill: #FF931E;
        stroke: #ED1C24;
        stroke-width: 5px;

SVG dual color with ‘currentColor’

Example: Sass Logo

<svg style="display:none;">
  <symbol id="sass" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" />
    <path d="M40.06 66.65c0.73 …"

<svg class="sass"><use xlink:href="#sass" /></svg>
<svg class="sass sass--color"><use xlink:href="#sass" /></svg>
<svg class="sass sass--invert"><use xlink:href="#sass" /></svg>

SVG dual color with ‘currentColor’

Example: Sass Logo

.sass {
  color: white;
  fill: red;
  color: green;
  fill: white;
  color: black;

SVG CSS Support

SVG – cross browser polyfills

- sadly IE9-11 don't support <use> references

- Chrome (WebKit) is buggy



SVG Sprites – fragment identifier

Use a part of a SVG sprite (not stylable)

<img src="all-bunnys.svg#svgView(viewBox(0,0,100,100))"
     width="100" height="100" alt="bunny" />
<img src="all-bunnys.svg#happy-bunny"
     width="100" height="100" alt="happy bunny" />
<img src="all-bunnys.svg#bunny-view"
     width="100" height="100" alt="the bunny" />

Responsive Icons

Responsive SVG Logo

my blog post (german)

Making SVGs Responsive With CSS

SVG Light Source Filters

Accessibility tips – Use inline SVG

<svg role="img" aria-labelledby="title desc">
    <title id="title">Chicken</title>
    <desc id="desc">A chicken icon</desc>
    <use xlink:href="animals.svg#chicken" />

Use WAI-ARIA attributes and roles

aria-labelledby="title" aria-describedby="desc"
aria-labelledby="title desc"

It's fine if your SVG content is purely graphical, but if it contains interactive content, a different approach may be needed.

Using SVG to shrink transparent PNG

Applying Alpha Channels to JPGs

SVG Loading

SVG pattern

SVG pattern

SVG animations (SMIL)

SMIL Animation

Animating SVG with CSS and SMIL

<svg viewBox="0 0 48 48" width="240px" height="240px">
  <circle id="Circle" fill="#00B000" r="20" cx="24" cy="24" />
  <path   id="Arrow"  fill="#FFFFFF" transform="rotate(5, 24 24)"
      values="5 24 24;25 24 24;5 24 24"/>

SVG stroke animation

SVG path morphing

SVG Clock

<svg id="clock" viewBox="0 0 100 100" width="600" height="600">
    <style type="text/css">
        #face { stroke-width: 2px; stroke: #fff; }
        #hour, #min, #sec { stroke-width: 1px; fill: #333; stroke: #555; }
        #sec { stroke: #f55; }
    <script type="text/javascript">
      setInterval(function() {
        function r(el, deg) {
          el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
        var d = new Date()
        r(sec, 6*d.getSeconds())
        r(min, 6*d.getMinutes())
        r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
      }, 1000)

SVG Animations with snapsvg.js

SVG Animations with snapsvg.js

var svg, circ;
svg = Snap('#paper');
circ = svg
  .attr({patternTransform: 'rotate(45)'});

  .attr({fill: circ});

Vector tools

Vector tools

Adobe Illustrator
Affinity Designer

Vector Tools vs. Bitmap Tools

Illustrator - Do’s and Don’ts

SVG Optimiser

SVG Optimiser