Adobe Illustrator is by far the most established, and popular Illustration tool in the design community. But until recently, it had a major shortcoming when exporting SVGs (Scalable Vector Graphics) cleanly for the web. Now, Adobe has upped its game by adding a clean, export function targeted at the web. Please note: there are actually three ways to export SVGs for Illustrator. This article is focusing on the process for exporting SVGs for the web. Other export options are suitable for other uses.
Exporting SVGs for the Web
To used it got to File > Export > Export As. Name your File and Choose SVG as the format. It may seem like you’re about to save the image file without selecting settings, but a new window will open. To strike a good balance of low file size, and design asset preservation we recommend the following selections:
- Styling: Presentation Attributes
- Font: SVG
- Images: Embed
- Object IDs: Minimal
- Decimal: 2
- Minify: Checked
- Responsive: Unchecked.
Here is a brief explanation of each these settings and what they represent:
Styling Options: Determines how color attributes are saved
- Presentation: Allows you to define a color in the SVG attributes. This a can always be overwritten with CSS later, but having some color is helpful in case modification with CSS is not necessary.
- Internal CSS and Inline Style: These settings are generally used for large SVGs, but mostly will not be used when exporting for the web.
Font Options: Determines how text within your SVG files are saved
- SVG: Allows fonts to remain editable, and will keep file size low. This should be used for common fonts.
- Outline: Converts fonts to outlines. This keeps fonts displaying properly, but will add to SVG file size.
Object IDs: Determines how parts of your SVG can be targeted with CSS and JS
- Layer Names: Will copy layer names you have defined in your SVG file into IDs which can be targeted with CSS and JS. This is a good way to keep things organized and allow your UI developer to target specific parts of your file.
- Minimal: This setting keeps your files size small, but limits your UI developer’s ability to target specific sections of your file. This should be chosen most of the time, unless you have specific plans for the file;.
- Unique: Will create unique strings of text to make sure every element within the SVG can be targeted. This will add to file size.
Decimal
- Two: is usually the best choice. If you make the number smaller you’re removing precision from your vectors. If you make the number larger you’re adding precision but also adding to file size.
Minify
- Yes: Optimizes the file size of the SVG by removing empty groups and blank spaces. Choosing this option also reduces the readability of the resulting SVG code. But we recommend choosing Minify, as it will help with file size, which is the major power of SVGs.
Responsive
- No: Leaving this off means that width and height will be undefined within the SVG. This is a personal preference. CSS settings will override these settings, so generally, we find it’s not harmful to leave width and height defined. So generally we leave this unchecked.
For a complete explanation regarding these settings from Abobe, check out their documentation. Keep in mind, Adobe will be ignoring file size and advocating for preserving artwork intention and quality for every setting. Their advice will lead you to export a larger file, than the settings we suggested above. Ultimately, you’ll need to play with these settings, with the help of your UI developer, to come up with your own personal preferences.
For more information on SVGs, check out our related articles:
Until next time.
PS. If you have questions about user experience, web design or development post your question to our Ask a Question section and one of our contributors may answer in a post. Thanks!