Creating Bulletproof SVG Icons

Creating Bulletproof
SVG Icons

Andrey Kuzmin, @unsoundscapes

1. Performance: payload, amount of requests, CPU usage
2. Browser support: retina, IE8 and Android2.3, noscript
3. Ease of use: updating icons, changing styles with CSS

• Raster or Vector
  • CSS Sprites
  • CSS with data URIs
• Vector only
  • Icon Fonts
  • SVG fragment identifiers
  • Combined SVG with symbol tags

CSS Sprites

CSS Sprites drawbacks

• a larger copy of PNG is required for retina screen
• SVG sprite has performance issues in recent Chrome
• it’s impossible to change the color using CSS

CSS with Data URIs

CSS with Data URIs

      .icon-close {
        background-image: url('data:image/png;base64,iVBORw0K...
      }
    

• base64 encoding increases the size of the images by 37%
• you have to provide a separate image for each color
• data URIs are slow on mobile

Icon Fonts

      @font-face { font-family: IconFont; ... }
      .icon:before { font-family: IconFont; }
      .icon-close:before { content: "\025B6"; }
    

• it is difficult to scale and position the icons
• cumbersome build process
• monochrome icons

SVG fragment identifiers

      <svg>
        <view id='icon-close' viewBox='0 40 20 20'/>
        ...
      </svg>
      <img src='icons.svg#icon-close' alt='x'>
    

• limited browser support (doesn't work in iOS Safari < 7.1, Android 4.x)

Combined SVG with symbol tags

      <svg>
        <symbol id="icon-close" viewBox="0 0 20 20"/>...</symbol>
        <symbol id="icon-menu" viewBox="0 0 20 20"/>...</symbol>
        ...
      </svg>
      ...
      <svg><use xlink:href="#icon-close"></svg>
    

Illustration by @01k

Combined SVG Advantages

• Fast enough to be used on mobile devices
• Endless styling possibilities (fill, stroke, width, height...)
• Easy to maintain

Combined SVG Gotchas

• not supported in IE8 and Android 2.3
• combined SVG should be visually hidden for gradients to render
• combined SVG should be put on top of body because of iOS
• html base tag has affect on xlink:href in Firefox
• fill attributes should be removed in order to set with CSS
• can't be used with external svg because of IE, use svg4everybody or load with XMLHttpRequest

      var xhr = new XMLHttpRequest();
      

        xhr.onload = function () {
        

            var div = document.createElement('div');
            div.innerHTML = xhr.responseText;
            document.body.insertBefore(div, document.body.childNodes[0]);
        
        }
      
      

        xhr.open('GET', 'img/icons.svg', true);
        xhr.send();
      
    

gulp-svgstore

      var gulp = require('gulp');
      var svgstore = require('gulp-svgstore');
      gulp.task('svgstore', function () {
          return gulp.src('src/icons/*.svg')
              .pipe(svgstore())
              .pipe(gulp.dest('dest/img'));
      });
    

gulp-svgstore

• attempts to only do one thing, and do it well
• plays well with other gulp plugins:
  • gulp-rename
  • gulp-imagemin
  • gulp-cheerio
• is tested and documented

CSS Sprites as a fallback

• Graceful degradation (limited colors and sizes)
• Automatically generated with gulp-svgfallback

• Use javascript to test for svg support
  • Load svg if supported
  • Load fallback css otherwise
• Load fallback css if javascript is disabled

HTML

      <span class="icon icon-close">
        <svg width="50" height="50">
          <use xlink:href="#icon-close"></use>
        </svg>
      </span>
    

CSS

      .icon { display: inline-block; vertical-align: middle; }
      .icon > svg {
        display: block;
        fill: currentColor;
        pointer-events: none;
      }
      .no-js .icon > svg { display: none; }
    

Recap

• Defined a feature set
• Compared various methods
• Decided upon combined SVG with symbol tags
• Introduced a tool to simplify our workflow
• Proposed a fallback to make our solution bulletproof

• Tech Blog: tech.zalando.com
• GitHub: github.com/zalando
• Twitter: @ZalandoTech

Questions?

Andrey Kuzmin, @unsoundscapes

Links

• Ten reasons we switched from an icon font to SVG, by Ian Feather
• An Overview of SVG Sprite Creation Techniques, by Sara Soueidan
• A Compendium of SVG Information, by Chris Coyier
• Roll your own SVG sprite sheets with Bower and Gulp, by Alexander Synaptic