Updated 21 December, 2020 · back to Reference
Potential Issues
Some techniques that are possible in Adobe Illustrator do not fit into the SVG standard.
There are always workarounds, and in most cases the solution is simple.
There is a page at yoursite.com/en/trouble which lists techniques that need to be adapted to the SVG format. Open the Adobe Illustrator file sync/desktop/trouble_en.ai for details.
Information Layers
Some of the following workarounds require the creation of information layers. An information layer is useful in Adobe Illustrator but does not appear in the web page. To indicate that a given layer should not appear in the final SVG:
- double-click the layer to access its options
- uncheck “Print”
- it is not necessary to check “Template”
Gradient Mesh Tool
If an Illustrator file contains a gradient mesh, a PNG image of the mesh will be created at the same time as the SVG file. This image will not be visible on the web page.
Workaround
To include a gradient mesh in a web page:
- Save All as SVG (this will create the PNG image of the mesh)
- move the PNG image into the “links” folder
- reopen the Illustrator file
- cut and paste the gradient mesh object onto an Information Layer for future use
- place the PNG image into the Illustrator file, where the gradient mesh had been (linked, not embedded)
- Save All as SVG
Letter Spacing
In Illustrator, there are two ways to modify letter spacing. At the bottom of the Character panel are two fields:
- at left, kerning: the amount of space between two letters
- at right, tracking: the amount of space between a group of letters
The SVG format does not treat letter spacing consistently kerning and tracking settings.
To avoid a visual discrepancy between Illustrator files and SVG pages, the values of kerning and tracking must always be set to 0:
In both cases V/A = 0.
However, it is possible to modify the kerning (left) between any pair of letters.
Workaround
If the quantity of text is limited, the easiest thing to do is convert the text to outlines (while keeping the original text on an information layer).
If you plan to use differently-spaced characters throughout your document, it is relatively simple to create a new font with extra spacing.
We recommend BirdFont for this type of task.
Multiple Artboards
The script “Save All as SVG” does not take into account multiple artboards.
A single SVG file will be exported, in which the upper left corner will be defined by the 0,0 coordinates in Illustrator.
Workaround
To use an Illustrator file with multiple artboards, it is possible to save the file as an SVG manually, making sure to check the box “Use artboards”.
Two Objects with the Same Name
In order to manipulate elements of a page with CSS or Javascript, it is necessary to know the IDs of the objects in question.
But, if two objects have the same name in Illustrator:
- a layer called “contactUs”
- a group of text blocks called “contactUs”
The IDs of the objects in the SVG will be unpredictable:
- ‹g id=”contactUs”›
- ‹g id=”contactUs_1“›
It is not possible to predict which object will have which ID.
Deleting one of the two objects does not fix the problem: once the second object has been given the ID “contactUs_1”, deleting the first object has no effect.
Resolving the problem
To resolve the problem all references to the ID must be deleted, then the correct object renamed with the ID.
Images outside of the “links” folder
It is not currently possible to include image that are embedded or stored outside of the “links” folder, in the same folder as the Illustrator file.
The following images will not appear on the final page:
- images in the same folder as the Illustrator file
- images embedded in the Illustrator file
In order to eliminate confusion about where images are stored, Svija looks in the “links” folder only.
Be Careful When Moving Images
As described, Illustrator will automatically look for missing images in the “links” folder.
But, if the image is not missing, Illustrator won’t look for it.
If you copy a document and its linked images to a new location, when you open the Illustrator file, image links will point to the original folder, not the new folder.
For example:
- you copy a poster done for a client into the folder “sync/desktop” for your site
- you copy the linked images into the “links” subfolder
- you open the poster and everything looks correct
- you publish the file as a Svija page and all the images are missing
Although you have correctly copied the files to your site folder, Illustrator found the linked images in their original location and didn’t have to look in the new “links” folder”.
To update your image links, simply:
- temporarily rename the original folder
- open the Illustrator file and re-save it
Renaming the original folder forces Illustrator to look for linked images in the new “links” folder.
Other reference pages: