August 29, 2018 · SVG · Web · Illustrator

The Best Way to Export a Web-Ready SVG from Illustrator (2018)

When exporting SVG from Illustrator, you're prompted with many options. So which settings are the best to produce a web-ready SVG?

Illustrator export SVG options
Illustrator export SVG options

A web-ready SVG should help you to avoid problems like:

  1. Inconsistency in fonts displayed
  2. Embedded images in SVG not showing up
  3. Having a giant SVG file size
  4. Exported SVG appears to be different from your original design (breaking images)
  5. Unable to easily edit your exported SVG codes for animations or interactivity

There are 2 main approaches in exporting a web-ready SVG from Illustrator based on the way you're using it on your website:

One being <object> tag or Inline.

And the other being <img> tag.

We recommend sticking with <img> tag, unless you're using SVGs for animations or to do some interactivity. To understand why, read here.

We experimented on what's the best settings for both approaches, and here's what we got.

To ensure you export an SVG that is web-ready from Illustrator, refer to the diagram below - Best way to export a web ready SVG from Illustrator

1. Using object tags/ inline svg

If you’re using <object> tags or inline svg, chances are you want to do some animations or create interactivity for your SVG. These settings would best fit in your case:

Styling: Presentation Attributes

Having the styling set to presentation attributes will make it easier for you to animate or style your exported SVG using an external CSS. Reason being presentation attributes are easier to override in CSS according to the CSS precedence rules.

Fonts: Convert to Outlines

Converting fonts to outlines is the only sure-work way currently if you’re using Adobe Typekit fonts due to its licensing limitations. Heads-up, your fonts will become non-identifiable numbers & coordinates after exporting. You’ll NOT be able to edit nor animate your fonts after exporting. An alternative is to use Google Fonts, this way you can keep your fonts as SVG and style the fonts even after exporting SVG. Here's how it works.

This configuration only matters if there’s an image (i.e., PNG, JPG) in your SVG. Changing to “Link” saves file size by 40% in average, compared to embedding. Great! But you’d have to change the link manually after exporting, as the current link is pointing to your local directory.

Object IDs: Layer names

Assuming that you’re using descriptive names for your layers, keeping the Object IDs as Layer Names could help you to easily identify certain shapes in your SVG and style them using an external CSS.

Decimal: 4

Set the decimal to be at least 4, as a rule of thumb to ease your work. Use Nano's visual comparison tool to tweak and reduce the decimal points after export, in order to get the lowest file size and making sure your image doesn’t break.

Minify: No

To be safe, uncheck the Minify box as it might reduce your SVG codes readability when exported, making it tough for you to dive into your SVG for editing purpose after export. You can always go through Nano once you’re done with your edits, and Nano will ensure your SVG is well minified, even in <object> tag mode.

Responsive: No

Width and height will be added into your SVG which you can still modify after export.

2. Using image tags

If you’re embedding SVG using an <img> tag just as a static illustrations on your website, once you’re done with your final edit on Illustrator, you should export your SVG with these settings:

Styling: Internal CSS

It produces the smallest file size for your exported SVG.

Fonts: Convert to Outlines

Your image will look blurry at times as no font optimizations will be applied by your operating system. An alternative is to use Google Fonts and here's why.

Images: Embed

This configuration only matters if there’s an image (i.e., PNG, JPG) in your SVG. Selecting “Embed” ensures your image shows up properly everywhere, as it will be embedded in your SVG as a Base64 image.

Object IDs: Minimal

To reduce file size, each object IDs will be represented by an alphabet so it produces minimal file size. Since you won’t be editing your image manually later on, you do not need descriptive names for your objects.

Decimal: 4

Set it to 4 or more by default, you can always optimize and compare your SVG later on in Nano.

Minify: Yes

This ensures that your exported SVG is of the smallest size possible. Illustrator will remove empty groups and blank spaces if minify is selected.

Responsive: No

How everything works in a diagram

Best way to export a web ready SVG
Best way to export a web ready SVG

We hope this helps, and we'll update this article when there's any new discoveries in the future.

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Yi Qian

CXO at Vecta.io. Solving problems with people for people by connecting dots between brains, over a cup of coffee.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

RELATED POSTS

October 28, 2018 · SVG · Web · Fonts

Using fonts in SVG

A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with intention to allow designers to design SVG graphics with any fonts they like and have the fonts showing up correctly on the end user browser. But 18 years later now, how ...

October 25, 2018 · SVG · Web

How to create a customized vector background for your website within 1 minute

Searching high and low to get a vector background for your website? Want to get a vector wallpaper quick but don’t want to be paying for stock vector graphics? You can now create a vector background like below for yourself in less than 1 minute! ...

August 30, 2018 · SVG · Web · Fonts

5 Great Reasons you should be using Google Fonts to Design SVG Images

Great typography adds to a great design. But oftentimes, getting a decent custom fonts showing up properly on screens comes at a price, either with extra effort or compromising in quality or even both. We experimented to find out the best way t...