Icons With SVG Sprites

Overview

The goal is to create a single .svg file containing all the icons that will be used on a website.

Creating the icons

Save all the icons in a single Illustrator document.

Each icon is in its own layer, and each icon is placed on its own artboard.

Exporting the SVG

• File > Export...
  • Format: SVG (svg)
  • Use Artboards: checked
  • The files that are exported are ultimately combined into a signle file.
• SVG Options dialog
  • Styling: Internal CSS
  • Font: SVG
  • Images: Preserve (presumably there are no embedded images)
  • Object IDs:' Layer Names
    (This setting is important. These are the object ids that will be used to reference the individual icons in HTML.)
  • Decimal: 4
  • Minify: checked
  • Responsive: checked