Learn how to export an SVG file in Illustrator by following these quick steps and generally sound export options. From there, you’re free to use your SVG files as you please.
Video Tutorial
If you’d prefer to follow along with me as I export a sample Illustrator file for SVG, feel free to watch the simple video tutorial below.
Step-by-Step Tutorial
Exporting properly can be a little daunting. If you want to look at static images and double check your settings, use my image-based step-by-step tutorial instead.
Step 1 – Once your artwork is ready, first save a copy of the ai file so that we can expand all the objects, strokes, and text. Go to File > Save a Copy.
Locate where you would like to save your file, set your name (I have added _copy), keep the file as an ai file, and click ‘save’.
Step 2 – In the copy file, we can now go ahead and expand all artwork.
For groups of fill and stroke, go to Object > Expand and then Object > Expand Appearance and expand fill and stroke, then click ‘ok’.
For any fonts on the artwork, right click and go to ‘create outlines’.
Step 3 – Once all artwork has been expanded, it is time to save. Go to File > Save As.
Locate your destination folder (you can see I’m saving the svg file in the same folder as the original ai and the ai copy), set the file name, select ‘svg (svg)’ as your format, check ‘use artboards’ and ‘all’ to export all the artboards (I’m only using one, but the same process applies for multiple artboards).
Step 4 – The ‘svg options’ box will appear. From here you can set your export options. The options I have set below are good to follow as a general rule of thumb, but feel free to adjust them according to your preferences.
SVG Options
Keep the ‘svg profiles’ as ‘svg 1.1’.
Change ‘type’ to ‘convert to outline’. That will convert any fonts you have in the file to outlines. Even though we covered this in a previous step, it’s good practice to select this just in case you missed a font or forgot to convert to outlines.
Under ‘options’, if you have any embedded bitmap images in your file, set ‘image location’ to ‘link’.
Click ‘more options’ to bring up the advanced options.
Under ‘css properties’ select ‘presentation attributes’.
Set ‘decimal places’ to ‘3’, which gives you a good level of accuracy when it comes to the export without creating too high a file size.
Keep/set encoding as ‘unicode (utf-8)’ and leave the remaining options unchecked. Once ready, click ‘ok’ to save the svg file.
The svg file is now ready to use. While you can reopen the file with Illustrator and make changes, this is why we saved a copy (to expand and outline everything) and kept the original ai file, which you can instead use to make changes, then re-save the svg.
Exporting files can be a little overwhelming with so many options, and svg files are no different. The options I have selected are ideal for a general rule of thumb, and hopefully this tutorial gives you everything you need to export for svg quickly and with confidence.