Get the SVG right from Illustrator

13th April, 2019 - 4 min. read - in Tutorials - Go to Index

I usually teach in my computational design class the benefits of the SVG format as a way to lower the barriers in the creative coding field.

Indeed, I teach my students that they can draw assets in Adobe Illustrator to transform them in interactive and dynamic compositions using a programming language, javascript for instance.

The SVG format is a structured and hierarchical (scene-graph) document that can be nicely manipulated through code within the browser.

This is the process (simplified):

To achieve that, a drawn composition needs to be exported to make it compatible with the coding environment.

Unfortunately, exporting an SVG is not a seamless process, even these days.

Different tools produce different markup. Adobe Illustrator, by far, is the most reliable and predictable tool in terms of generated SVG. There are some quirks, though, that I want to highlight here.

Two exporters

There are two distinct ways to generate an SVG from an Illustrator document. Indeed, for some unknown reasons, it has two exporters.

You can Save As a document in an SVG format and you can Export As to do the same. Both produce an SVG but the markup can be pretty different and there are PRO’s and CON’s for each option.

The “Save As” SVG

This is the most obvious command and it’s the one I used (and struggled) for a long time. Here the review:



The “Export As” SVG



The Winner

It’s difficult to declare a real winner but considering the better trade-off, the Export As is the most reliable and predictable, that is the most important thing in the integration field. Export As would be almost perfect if it weren’t for the way it optiomize the SVG excluding hidden or artboard-outside elements.

These are some rules to remember when exporting an SVG with “Export As” in Illustrator that can ease the process:

Said that, I’m still looking for a solid tool that allows a designer-friendly experience to draw and create graphic elements with an easy and repeatable way to integrate them in a coding environment. We’ll see.

Spotted a typo or (likely) a grammar error? Send a pull request.