Editing Icons With SVG Sprites (section)

== Exporting the SVG ==
[[File:Illustrator-svg-export.png|right|frame|SVG export options in Illustrator]]
* '''File''' > '''Export...''' > '''Export As...'''
** ''(It's possible that '''Export for Screens''' would be useful also. It hasn't been tested.''
** Select a location that is inside the web project, but separated from the production files, e.g. `/images/icons/src/`.
** '''Format:''' SVG (svg)
** '''Use Artboards:''' checked
*** With the '''Use Artboards''' option checked, separate `.svg` files are created for each artboard in the Illustrator file. The default is to export all the artboards in the Illustrator file. Enter the index of individual artboards in the '''Range''' field to selectively export icons. 
** The icon file names are the following format: `[IllustratorFileName]_[ArtboardName].svg` 
** Using `gulp-svgstore` to combine the SVG files, these file names are used as the object ids within the final SVG file. So spaces in artboard names are not a good idea. 
* '''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