SVG – less pixel, more fun!

Sven Wolfermann | maddesigns

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

http://httparchive.org/trends.php

Device (viewport width) optimized images

SVG IS FUN! - SVG Glitch

http://codepen.io/maddesigns/pen/jydLe/ | Original by Dirk Weber SVG Glitch

Why Use SVG?

Scales and Retina-ready
HTML-like elements - DOM Structure
CSS3 and JavaScript
Printer friendly
Accessibility Features and SEO
Browser Coverage
Gzip-friendly
More! Filters, Paths, Viewbox, etc. SVG Advantages

SVGs are…

lines, rects, circles, polygons, text
strokes
solid fills and gradients
embedding images
transparency, shadow, blur, and much more filters
groups
animations
and, and, and, …

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" />
</svg>

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

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

How to embed SVG

CSS

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

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

http://codepen.io/maddesigns/pen/cpowf

How to embed SVG

Inline SVG (HTML5)

<svg></svg>

IE8?

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

SVG is great for vector images – logos / icons

logo.svg

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

with Modernizr fallback

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

…but we have icon fonts!
(happydance)

Font Awesome

Font Awesome is a full suite of 479 pictographic icons

https://github.com/FortAwesome/Font-Awesome

Font Awesome / IcoMoon

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

IcoMoon

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="">
  :before
    <span>
    :before
    :after
    </span>
    Github
  :after
</a>

kinda works, but NO!

Full color icons vs. monochrome glyphs

http://designmodo.github.io/Flat-UI/

SVG Icon Sprites

internal SVG element reference

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

external SVG element reference (cachable!)

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

http://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

Creating SVG icon sprites

SVG Store – Grunt task

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

https://github.com/FWeinb/grunt-svgstore

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>
</svg>

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>
</svg>

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;
}

http://codepen.io/maddesigns/pen/kBqIg

Styling of <use> element references

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

http://codepen.io/maddesigns/pen/lqmBn

Styling before CSS: SVG Presentation Attributes

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

Use CSS now:

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

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 …"
    fill="currentColor"/>
  </symbol>
</svg>

<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;
}
.sass--color{
  fill: red;
  color: green;
}
.sass--invert{
  fill: white;
  color: black;
}

http://codepen.io/FWeinb/pen/rGBsC

SVG – cross browser polyfills

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

- Chrome (WebKit) is buggy

SVG4everybody

https://github.com/jonathantneal/svg4everybody

SVGinject

https://github.com/iconic/SVGInjector

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" />

http://codepen.io/maddesigns/pen/iKIsL | Blog post: SVG Sprites With Fragment Identifiers

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" />
</svg>

Use WAI-ARIA attributes and roles

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

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

http://www.sitepoint.com/tips-accessible-svg/

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)"
           d="M14.2,25.9l8.9-7.2l-2.3-2.8l12.7,0l-2.4,12.4l-2.5-3l-9,7.1L14.2,25.9z">
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      dur="4s"
      repeatCount="indefinite"
      values="5 24 24;25 24 24;5 24 24"/>
  </path>
</svg>

http://codepen.io/maddesigns/pen/kAlnI

SVG Clock

<svg id="clock" viewBox="0 0 100 100" width="600" height="600">
  <defs>
    <style type="text/css">
      <![CDATA[
        #face { stroke-width: 2px; stroke: #fff; }
        #hour, #min, #sec { stroke-width: 1px; fill: #333; stroke: #555; }
        #sec { stroke: #f55; }
      ]]>
      </style>
    <script type="text/javascript">
      <![CDATA[
      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)
        ]]>
    </script>
</defs>

http://codepen.io/maddesigns/pen/IzycE | Original blog post

SVG Animations with snapsvg.js

http://snapsvg.io/

SVG Animations with snapsvg.js

var svg, circ;
svg = Snap('#paper');
circ = svg
  .circle(10,10,10)
  .attr({fill:'#c09'})
  .pattern(0,0,25,25)
  .attr({patternTransform: 'rotate(45)'});

svg.rect(0,0,'100%','100%')
  .attr({fill: circ});

http://codepen.io/webinista/pen/rpgkd

Illustrator - Do’s and Don’ts

Avoid 3D
Avoid Drop Shadows
Avoid Blur
Avoid BlendModes
Avoid Embedding Fonts
Avoid Complex paths

SVG Optimiser

SVGo

SVGo-GUI (SVGo)

SVG is fun!
Thanks for your attention!
Sven Wolfermann | @maddesigns | maddesigns.de

SVG – less pixel, more fun!

Problem: huge variety of displays

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

Device (viewport width) optimized images

SVGs

SVG IS FUN! - SVG Glitch

Why Use SVG?

SVGs are text files

SVGs are…

SVG basic shapes

How to embed SVG

How to embed SVG

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

How to embed SVG

IE8?

Support

SVG is great for vector images – logos / icons

Icons

…but we have icon fonts! (happydance)

I  icon fonts!

Icon fonts fallback is hard

Font Awesome

Font Awesome / IcoMoon

IcoMoon

IcoMoon

Multiple Color Icon Fonts

Icon fonts vs. SVG

Full color icons vs. monochrome glyphs

Iconic – Icon Library

SVG Icon Sprites

SVG Icon Sprites

Creating SVG icon sprites

SVG icon sprites in HTML

CSS styling with fill

CSS styling with fill

Styling of <use> element references

Styling before CSS: SVG Presentation Attributes

Use CSS now:

SVG dual color with ‘currentColor’

SVG dual color with ‘currentColor’

SVG CSS Support

SVG – cross browser polyfills

SVG4everybody

SVGinject

SVG Sprites – fragment identifier

Responsive Icons

Responsive SVG Logo

SVG Light Source Filters

Accessibility tips – Use inline SVG

Using SVG to shrink transparent PNG

SVG Loading

SVG pattern

SVG pattern

SVG animations (SMIL)

SMIL Animation

SVG stroke animation

SVG path morphing

SVG Clock

SVG Animations with snapsvg.js

SVG Animations with snapsvg.js

Vector tools

Vector tools

Vector Tools vs. Bitmap Tools

Illustrator - Do’s and Don’ts

SVG Optimiser

SVGo

SVG-Links:

SVG is fun!

Thanks for your attention!

…but we have icon fonts!
(happydance)