Skip to content
Loading...

Preparing Adobe Illustrator files for SVG interactivity

Preparing Adobe Illustrator files for SVG interactivity

Adobe Illustrator has made some progress over the years in supporting SVG files, a vector-based format intended for the web. It shouldn’t come as a surprise that Adobe has been somewhat forced into supporting this web-standard, as in some respects it is an open-source alternative to their dying Flash technology.

Sample SVG code.

While Illustrator has implemented decent support for the SVG standard, there are still quite a few areas in which it is lacking. Adding classes to nodes and animation are hoped for items for future inclusion. More compact and efficient file writing is another area which could be radically improved. Until that day, there are many things that can be done to the native .AI file before it is exported to SVG that will help tremendously during the website programming phase.

Clean Up File

As SVG files are simply text files, any extraneous information in the file will be included and ultimately bloat the resulting SVG. Unused layers, empty text lines, stray points, items on the pasteboard, old raster images used for tracing maps – all that adds to the SVG file size.

A simple way for the initial clean up is to use Illustrator’s ‘Clean Up’ command – Object > Path > Clean Up. This can delete Stray Points, Unpainted Objects, and Empty Text Paths that may have been mistakenly added during design. Of course be sure that these things aren’t important to the design before running the command.

Next, get rid of any unused objects and layers. Anything that isn’t part of the final design should be deleted – pasteboard objects, images used for tracing, guides, etc. If raster artwork is part of the design, then an SVG file may not be the best format. SVGs can have raster images embedded within but generally any compression is lost completely, so raster-heavy designs may not be good candidates for SVG.

Name the Layers

Illustrator will export layers as groups for an SVG file, and will used the name as the ID of the group. These IDs can then be easily selected and manipulated using JavaScript or CSS, just as any other object on a web page. However, Illustrator can mangle those names if they don’t follow a fairly strict pattern:

  • All lower case
  • Name does not start with a number, must start with an alphabetical character. No special characters (! * # ™ < > / { } etc)
  • No spaces! Dashes (-) or underscores (_) only!
  • IDs must be unique, so no duplicate names
Correctly named layers.

In the example above, all of the named have layers have been subsequently collected in a new layer. This top layer will be the ID of the SVG.

Naming Objects (Nodes)

Objects in an SVG (such as a line, a polygon, a group, etc) are named Nodes. Nodes themselves can have various attributes, such as ID, Class and Style (which itself includes attributes like Fill, Stroke, etc). Illustrator maps the name of the Illustrator object to the ID of the node, and other attributes like fill and stroke are applied as the Style of the node. Unfortunately, there is not an easy way to add Classes to the node in Illustrator. There is a workaround in which Illustrator will map a named Graphic Style of the Illustrator object to a node Class, but as an Illustrator object can have only one Graphic Style, this defeats one of the main purposes of Classes – a node can have multiple Classes while having only one ID. Some day in the future, perhaps Adobe will add an interface for manipulating SVG node Classes. Until then, we will worry only about naming the Illustrator object, which will become the ID of that SVG node.

Multiple Paths within the ‘units’ layer. All of the Paths have been named except for the first one.

In the example above, you can see a layer ‘units’ that contains multiple paths. Each path designates a separate unit in a site plan. As the site plan needs to be interactive, there needs to be some way of conveying information about the SVG node when it is hovered over or clicked. The easiest way is to name the path with the unit number – now as we’ve already seen above, these names get converted to IDs when saved as an SVG – and IDs cannot begin with a number. So in this example, every number has been preceded by ‘unit-‘. This fulfills the requirement of IDs having to start with an alphabetical character and ultimately makes the code easier to understand.

An important thing to remember when naming objects that are intended to convey data or undergo transforms is to be consistent – in the example above, every unit is a single path. There may be instances where a unit may be made up of multiple paths. If it doesn’t depend on the design, the best strategy is to use the Pathfinder tool to Union the paths. If the design depends on multiple paths per ‘unit’ – then a good strategy is to group the paths and name the group. Just be sure to do this to all of the unique units – even if other units consist of only one path. A single path can be grouped to itself and a name applied to that group to be consistent.

Extra Steps

Now that we’ve covered the basics of file preparation for SVG output (particularly geared towards interactive site plans), there are a few things that you can do to the original AI file to really make the final SVG slim, trim and nigh-indestructible.

  • Get rid of unnecessary groups (Ungroup). Illustrator has an extremely unwelcome habit of exporting nodes that are grouped multiple times. All of these extra groups add to the file size and can in theory affect performance. If the group is necessary for the objects to become a single node, keep it. If not, get rid of it.
  • Remove unnecessary clipping masks. You can Select > Object > Clipping Masks and then delete. If lots of paths suddenly appear, the clipping mask is needed. Undo. If not, the clipping masks weren’t needed. If a HUGE amount of extra paths and shapes appear after deleting a mask, it is a good idea to get rid of most if not all of those extra paths and shapes that were being hidden by the mask. The file size will thank you.
  • Objects with special Graphic Styles applied to them will be expanded when the file is saved as SVG. It is a good idea to go ahead and expand them before saving as SVG to avoid unpredictable results. Object > Expand Appearance.
  • As an SVG uses a coordinate point system, it cuts down on the math if the artboard is set to the same size as the artwork. Object > Artboards > Set To Artwork Bounds. This also sets the ‘viewBox’ of the SVG.
  • Finally, setting the origin point to 0,0 helps with transformations and figuring out how large the original SVG is just by looking at the text. Use the Artboard Tool (Shift+O) and change the Reference Point to the upper left. Be sure Move/Copy Artwork with Artboard is selected and change both the X and Y coordinates to 0. Be sure none of the artwork is locked or it won’t follow the Artboard change.
  • Please save the original .AI file. The developer will export the file as an SVG.

Just the Beginning

These tips to set up AI files for SVG are simple ways that help to reduce file size, organize the file, and start them on the path to interactivity. The proof is on the website:

Final SVG on website – hover action on highlighted unit; inset shows the corresponding code. This image is only 57K and is scalable to infinity.

 

 

in Technical