Why spriting?

• Smaller total file size
• Reduce HTTP request

Why SVG spriting?

• Even smaller file size
• Scalable, stylable & lossless
• Best friend of retina display

Why not SVG spriting?

• Browser compatability
• No easy ways to resize sprite images
• How to use it?

A easier & better way...

• One compressed svg sprite file
• Require no sprite.css
• Inline usage
• Spriting during the build process

Workflow

Create a gulp task for creating the sprite sheet from the individual SVG

gulp.task('sprite', function(){
  return gulp.src(config.imgSrcDir + '/*.svg')
  .pipe(svgSprite(svgConfig))
  .pipe(gulp.dest(config.imgDestDir));
});

Workflow

Use #fragment-identifier to locate the svg on the sprite

<img src="/sprite/sprite.svg#service-calculator">

<object data="/sprite/sprite.svg#header-image"></object>

Style the element to fit your need.

Done!