Creating SVG Files for Websites

The following instructions are for exporting an illustrator icon as a web ready SVG file.

First, make your icon a Compound Path. Select it then go to Object > Compound Path > Make

Easiest Method: Export for Screens

With this method, you no longer need to add a transparent box around your icon the same size as the artboard. The Export for Screens function automatically bases the SVG viewBox on the artboard size.

1. Export the artboard as an SVG: File > Export > Export for Screens...

There are a bunch of options, but most of them govern the types of files you want to export and their location rather than any SVG settings.

2. Open your SVG file in Notepad (open Notepad and drag your SVG file into it).

3. Delete the following from the beginning of the code:

<?xml version="1.0" encoding="UTF-8"?>

 4. Save the file (CTRL + S).

Legacy Method: Export As

1. Add a transparent box around your icon the same size as the artboard.

2. Export the artboard as an SVG: File > Export > Export As...

Use the following settings:
Styling: Presentation Attributes
Font: SVG
Images: Preserve
Object IDs: Unique
Decimal: 2
Minify: Checked
Responsive: Checked

3. Open your SVG file in Notepad (open Notepad and drag your SVG file into it).

4. Delete the following from the beginning of the code:

<?xml version="1.0" encoding="UTF-8"?>

 5. Save the file (CTRL + S).