Editing Icons With SVG Sprites

[[Category:Web Development]]
== 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<br />''(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