August 29, 2018 · Web Designing

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...

IF YOU LIKE THIS POST, YOU'LL LIKE THESE TOO

March 09, 2019 · Web Designing

Improving mobile page speed by 200% using SVG and Nano

According to Google, your page should load within 3 seconds, otherwise 53% of mobile visitors would abandon your page. If it takes 6 seconds, the probability of bounce increases to 106%. In short, your website's performance has a direct correlation t...

January 14, 2019 · Web Designing

Best practices for SVG SEO in Google Image

With the proliferation of high resolution devices, SVG is definitely the future to serving high res screens with responsive images, at a small file size and low bandwidth. In fact, some sites that we check-in daily like Google, YouTube, Twitter...

December 12, 2018 · Web Designing

The definitive guide to CSS styling order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.