How to Optimize and Export SVGs | Adobe Illustrator

When you begin working with SVG, it is important to understand how to create, export, and optimize your SVG files for the browsers that will render them.

However, before we start, you need to understand one thing clearly. The optimization of an SVG file begins with its creation and continues all the way to export. Like any HTML web page, it’s difficult to fix a poorly built SVG file after it’s completed.

Sure, you can use optimization tools after export, but this automated approach can break your file in all kinds of unexpected ways. Having a solid working knowledge of good manual SVG optimization concepts will hold you in good stead from the start.

This is exactly what you will learn today.

Note: For those of you using older version of Illustrator here is an appropriate tutorial.

When your graphic is ready for production, select File > Export > Export As… command, then select SVG as option for the file type and hit Export button. You should see the following panel:

Let’s explore the options presented in more detail.

Styling

There are three way to style your SVG and they are presented in the first dropdown list.

1. The first is to use internal CSS (i.e. a <style> block), which is generally considered the best option following the Separation of Concerns principle.
2. The second method is to use inline CSS styles (i.e. ).
3. And the third method is to use SVG presentation attributes .

In the image below, you can see the difference between these three options.

Font

If you want to convert your text to outlines, here you can instruct Illustrator to do so. If you want to preserve your text editability, then select SVG option. Outlined text gives you complete visual control of your typography, but at a significant cost – file sizes blow out and text loses editability and searchability.

Note: SVG fonts will be removed from SVG 2 and is considered as a deprecated feature with support being removed from browsers.

Images

Here you can choose how you treat any raster images in your SVG. You can choose to keep them as external files, or to embed them into the SVG as DataURIs. Often Link is a useful choice as it makes the parent SVG file dramatically smaller and, as such, far more manageable in your code editor.

However, the Embed option does have one great, overriding advantage: embedded images can never become unlinked/separated from their ‘parent SVG’. SVGs using linked resources will show the missing image icon the first time the SVG is downloaded, uploaded or moved without its ‘child images’.

Keep this in mind if you require portability in your SVG.

As a general rule, you’ll avoid many future headaches if you can simply avoid using pixel-based graphics in your SVGs whenever you can.

Object IDs

Generally the best option is to select Layer Names, because this will give you meaningful names for your individual SVG elements. Minimal uses random letter-numbers, and Unique uses large random combination of characters.

Decimal

This option defines how many decimal places your coordinates will have filled after the decimal point. Higher numbers means more precise paths, while lowest number produces less verbose code and small file size.

As you can see from the graphic below, the path with 5 decimal places if far larger than the same path with 1 decimal – yet visually identical.

Keep in mind that we’re talking about 100ths and 1000ths of a pixel here. Higher values will only ever be necessary only if your graphic is very small or requires incredible precision. In most cases, sticking to value of 1 decimal place – will be the best option.

Minify

Check this option only if you’re exporting a final version of your graphic for production and you are sure that the file won’t be edited anymore.

Responsive

In theory, this option removes the width and height attributes from your SVG document – making it more responsive. However, in most cases, this is not enough to make your SVG truly responsive for all browsers and especially for IE. We’ll explore a fix for this problem in a follow up tutorial.

TIP: It’s always a good idea to keep your original .ai file as your source, and then to export SVG copies with different settings from that parent file.

When you choose Export As… command, in the appearing export dialog you may have noticed an additional option called Use Artboards. It becomes useful when you use multiple artboards—for example, when you create a set of icons—and you want each artboard to be exported as a separate SVG file.

As you’ve seen above, a lot of optimization takes place during the creation and export of your SVG. However, you may want to further optimize your file with some specialized tool, such as SVGO or its web GUI-fied version SVGOMG.

Be aware that you do need to be careful when using these tools. They can easily break your document functionality. My advice is to use manual optimization whenever it’s possible and use automated optimization tool only if it’s necessary and with caution.

Conclusion

I don’t think I’m going out on a limb to pronounce SVG as the future of web vector graphics. It’s hard to see a situation where SVG doesn’t continue to gain more power along the time. If you haven’t dived in yet, it will be good and wise investment to start learn it now.

We have SVG 2 appearing on the horizon with lots of powerful, new features to play with will. Exciting times ahead.