SVG Sprite Workflow That Works

With Sara and Flore (Front End Developer at Squiz) in Respond 16 in Sydney

The Problems

  • background-image
  • background-position

Problem 1: Extra Work

Problem 2: No Change on Icon Color

Problem 3: No Change on Icon Element Color

The Solution

  • No needing to work on the Illustrator anymore
  • Using CSS to change colors instead of from Illustrator

Workflow 1 — Install Plugins/Polyfills

  • gulp-svg-sprite: this plugin will do all the heavy-lifting for us. It will combine all the SVG files and generate one SVG Sprite.
    And this is the configuration for Gulp:

Workflow 2 — Boilerplate

  1. Create new folder in source/svg-sprite (change the path appropriate for your own structure). When gulp-ing, new file will be created in dist/styles/mysource_files/sprite.svg (or depending on how you set it up in Gulp configuration.
  2. Include svgxuse and SVG for Everybody in the foot in HTML like below:

Workflow 3 — Prepare SVG Icons

  1. Let’s get an icon (or icons) from designers (or yourself). Please ask the designer to set the path color in black when they create icons.
  2. Go to SVGOMG and open the icon. In the right menus, keep the options as they are, but except the ‘Merge paths’. Disable it and download.
  3. Open the SVG file you just downloaded in a text editor. Search for an attribute ‘fill’ and remove them. Save the file.
  4. Give the appropriate name when you save. The file name will be the ID of the SVG icon and we will use it later.
  5. Put the SVG files in the source/svg-sprite.

Workflow 4 — Add SVG Icons in HTML

Workflow 4 — Accessibility with 3 Scenarios

Polyfill

Why 2 Polyfills?

When JS is Disabled?

Any Feedback/Comments?

--

--

--

Senior UI engineer • Writer, Speaker • UI animation, Canvas, SVG, Three.js, PixiJS, WebGL, Shaders • React, CSS (SEM+BIO), A11y

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ryan Yu

Ryan Yu

Senior UI engineer • Writer, Speaker • UI animation, Canvas, SVG, Three.js, PixiJS, WebGL, Shaders • React, CSS (SEM+BIO), A11y

More from Medium

Make a tabs web component in Lit using slots and css

CSS Trick: horizontal scrolling lists on mobile devices

Building front-end Javascript, CSS and HTML. Joke Generator.

MDN Styling and Layout w/CSS chapter 11