Exporting an SVG for Web Using Adobe Illustrator

Nov 1st, 2017

Illustrator version

This page is written using Illustrator version 22 (CC 2018). Some instructions for CS6 are included.

From the Edit menu choose: Edit -> Color Setttings...

Always set the Document Color Mode to RGB when exporting to web. This can be done using the File menu: File -> Document Color Mode -> RGB color.

It's easiest to have a single artboard. It should be set to the same pixel dimensions as the final output size of the SVG.

Use the "Tracing" workspace so that the appropriate window tabs are visible.
Select the image layer you need to turn into vectors.
In the Image Trace tab, start with the 3 color preset
After the tracing calculation finishes, change the number of colors to the number of colors appropriate for the image and wait for recalculation
Click the "Expand" button in the main toolbar
Switch back to the "Web" workspace to see that the image has been replaced with new objects in the layer
You may need to select the background layer that was created for the image and delete it to preserve transparency.

Using the file menu, choose File -> Export -> Export As...

In the dialog box that pops up:

Choose SVG as the format.
If you only have one artboard, leave the "Use Artboards" checkbox unchecked. Otherwise, you can check this box to have multiple files generated.
Click the Export button, which will result in another dialog box. Choose the following options:
- Styling: Internal CSS
- Font: Convert To Outlines
- Images: Preserve
- Object IDs: Layer Names
- Decimal: 2
- Minify: Yes
- Responsive: Yes
Click the OK button

Using the file menu, choose File -> Save As...

In the dialog box that pops up: