GitHub icon LinkedIn icon
SVG

Exporting SVGs with Illustrator

Chris

• 1 min read
Adobe Illustrator

I recently got asked about exporting SVGs from Adobe Illustrator while presenting my talk at WordCamp Ottawa 2017. I’ve done this process many times while working on client projects but never got around to sharing my process in Illustrator.

For reference I’m currently using Adobe Illustrator CC 2017, the process should be similar for older versions of Illustrator.

My workflow and settings

Here my ideal settings and steps when I have to export SVGs:

  1. Make sure the vector is fitted to the artboard bounds. This ensures there is no empty white space around the vector.
    • Object > Artboards > Fit to Artboard Bounds
  2. File > Export > Export As
    • Choose SVG as the format.
  3. Give your SVG a good filename (ie: twitter-icon.svg).
    • Lowercase, no spaces, no special characters or punctuation.
  4. Click Export.
  5.  Set the SVG Options
    • Styling: Presentation Attributes
    • Font: Convert to Outlines
    • Images: Link
    • Object IDs: Layer Names
    • Decimal: 3
  6. Make sure both the minify and responsive options are checked.
  7. Click OK.
    • You can also click the Show Code button if you want to use inline SVGs.

Learn more about SVGs

If you are interested in my SVG talk, you can grab the slides that I presented at WordCamp here!