Monday, August 29, 2005

Testing Adobe Illustrator's SVG Output

FM asked me to take a look at creating SVG documents from Adobe Illustrator so that we could determine what needs to be done to make the documents structurally coherent. Here's a brief summary of the information I've gleaned from minor testing (using Illustrator 11.0.0).
  • The SVG width and height are defined by the elements contained in the Illustrator document, not the page layout, using a coordinate system similar to the SVG coordinate system.
  • Every element that is explicitly named is given an id attribute matching that name. Spaces are converted to underscores. Non-alphanumeric characters are converted to hex-encoded values of the form "_x5F_" (an underscore). Duplicate element names are modified by adding "_#_" where # is a number starting at zero.
  • Each layer and group is surrounded by a g tag.
  • The elements are created bottom-to-top if looking at the Layers palette.
  • Using the rectangle tool will produce a rect element in the SVG. Fill and stroke on a rectangle are defined on the rect element.
  • Using the rounded rectangle tool or stylizing a rectangle with rounded corners will produce a path element in the SVG. Fill and stroke on a path are defined on the path element.
  • Text is rendered as a text element transformed from 0,0 with multiple positioned tspan elements. The tspans appear to be created based on kerning and spacing rather than line wraps.
  • Text created using the Type Tool is rendered as an individual object.
  • Text created using the Area Type Tool is rendered as a group which contains the object defining the area and the text itself. If the area text is named in Illustrator the SVG group, object, and text are all given the same id.
  • Using the Line Segment tool creates a line element in the SVG. Applying a filter style to create an arrowhead creates a group with the original line and a path defining the arrowhead, this renders to SVG as expected. Applying an effect style to a create an arrowhead redraws the line as a path, but when rendered to SVG the line is created as a group containing another group, containing the original line and a path defining the arrowhead.
Note: In Illustrator filters and effects affect the object on which they're used differently. Generally filters are non-editable, effects are editable.