Icons With SVG Sprites: Difference between revisions

Revision as of 02:31, 9 April 2016

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

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.

File > Export...
- 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 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
  (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

@@ Line 13: / Line 13: @@
 * '''File''' > '''Export...'''
+** 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
-** ''The files that are exported are ultimately combined into a signle file.''
+** With the '''Use Artboards''' option checked, separate `.svg` files are created for each artboard in the Illustrator file.
+** 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