I’m working with a professional designer, Michael, on some graphics for my upcoming MIX presentation.  I’ve worked with designers before on various projects, some SVG, some traditional Web design, but this is my first time working on an SVG project with someone who never used SVG before, and it’s been an interesting experience, which I thought I’d jot down for anyone interested.

Both of us have been busy with other projects, and since we are in different places (me in Chapel Hill NC, him in Atlanta GA), we have only gotten to touch base a few times.  Michael has delivered some first drafts of the graphics, which look lovely, and I decided to dig into the underlying code, confident that I could trim down the file size and thus help browser performance.

My personal graphical editor of choice is Inkscape, which is a fine tool for all its warts (though it’s a little painful on Mac, where it is hosted as an X-11 application); typically, though, I create SVG either programmatically with a script or manually with a text editor (yes, I know that’s crazy… but it can be done).  Michael, being a professional designer, uses Adobe Illustrator, and I am keen to have him use the tools he is most comfortable with.  Since I want SVG to be used by mainstream designers, I want to understand how their tools work and what their workflow is like.

So, in order to make sure that we can roundtrip the files as seamlessly as possible, while still leveraging the features of SVG, I set about today to establish a workflow with Illustrator, TextMate (my go-to text editor, with a custom SVG code template bundle), Firefox, and its native debugger extension Firebug (with its handy “Inspect Element” context-menu selection).  My goal: to make reusable icons out of some of the graphical assets in the larger image, to be referenced by SVG’s <use> element.

The <use> Element

Some earlier graphical languages, especially special-use ones such as CAD languages for engineering, architecture, or mapping, included a native symbol library.  These would normally include a variety of arrowheads, iconic symbols, line styles (dotted, dashed, etc.), and other graphical primitives.  The problem with this idea is that such symbol libraries were by necessity limited in the number of symbols, and usually only had one or two styles for each basic symbol. Not very extensible.  SVG took a different approach.

SVG has the ability to “clone” an image, to reposition or resize it, and to change some of its styling.  This works on a shape or collection of shapes, whether the image is defined in the same document, or in an external SVG file.  The mechanism to do this is the <use> element, and it looks like this:

<use xlink:href="#myImageId"
     x="100" y="300"
     transform="scale(1.5)"
     fill="cornflowerblue"/>

Translated into English, this code says,

Find the image with the id of “myImageId”, and copy it.  Move it 100 pixels to the right, and 300 pixels down.  Increase its size by half again.  Oh, and if it doesn’t already have a color, make it blue. Thanks.

(That final “/” is the part that says “thanks”, a quaint courtesy missing from HTML5.  SVG was specified in a gentler time.)

Thus, designers can provide their own symbols, in the style appropriate to the task at hand.  There are several good SVG clipart libraries that allow SVG authors to share their symbols and simple reusable images.

You can see that if you draw an image of a balloon, with several paths (the bubble, the knot, the string, and maybe a highlighting accent) and some special graphical effects (a gradient, and perhaps a filter effect) all amounting to a dozen lines of code, and you want to reuse this balloon, you don’t want to redraw it each time; it would be a waste of effort, and result in a much larger file.  For print, this may not be as much of an issue, but for a Web-based format, it takes longer to download and uses more memory in the browser, resulting in poorer performance.  So, instead of rebuilding a score of balloons, or copying and changing the original image description, you can simply make one basic model, sans color, and reference that multiple times, with a different color and size.  It’s easier to do, and each extra balloon only increases the size of the file by a small amount, much smaller than adding dozens of duplicates.

To really take advantage of this feature takes a different way of thinking about the design.  A clever designer can even create several image components and recombine them into composites with even more variation.  Of course, it’s not always appropriate for every project, but my current project has quite a few duplicate images.

This is a feature supported by every browser with native SVG (though not every one yet allows you to reference images in external documents).  So, it’s a safe and natural feature for an SVG authoring tool to utilize in its SVG output.

Best Practice: Make liberal use of <use>.

<use> It and Lose It

Illustrator doesn’t support <use>.

Or rather, it does recognize it, and render it… but it promptly converts any instances of the <use> element to simple verbose copies of the referenced image.  I could not find any way to create an instance of <use>.

Also, when creating gradients, Illustrator seems to get overly specific about the position and dimensions (width, height) of the gradient, needlessly yoking them to a specific element at a particular location and of a particular size.  SVG allows you to define a gradient once and reuse it among several shapes, decreasing the number of gradients; Illustrator should make better use of this feature, and so should Inkscape.

This is not a tool created with the Web in mind.

Because of this quirk, my current file size is about 6 or more times what it needs to be.  Let’s see how we can work around that.

Symbolic Gestures

I spent quite a bit of time –hours, truth to tell, because I’m an Illustrator newbie– isolating individual images (trees, benches, etc.) that were used through the graphic as a whole.

When I make “symbols” (for lack of a better word), I like to find their positioning anchor –that is, the point at which they are most usefully positioned– and set that to the {0,0} point, so there are no unpleasant surprises when placing the symbol.  For most symbols, this is the centerpoint of the symbol; if I have an icon (a badge, a logo), I will position it smack dab at the point in my graphic that it should be applied, relative to other images.  For other symbols, it is one of the extremities, where it will meet up with another shape… for a tree this would be the bottom of the trunk where it sprouts from the ground, for an arrowhead it would be the base where it it attaches to a line.  I try to pick the most intuitive anchor for each symbol.

When you drag a shape to a new location, as I did for creating anchors, Illustrator converts the path or attribute values to their new coordinates, rather than simply applying a transformation.  This is something that Inkscape gets wrong (at least, last time I checked).  Nested transforms are harder for developers to work with than simple coordinates.  So, kudos to Illustrator on this one.

Each symbol is best enclosed within a group… in SVG, this is a <g> element (SVG also has a <symbol> element, but in practice, I don’t think it’s worth much).  Grouping allows the designer to collect all the constituent parts of the image together for greater portability.

When a designer works, if they are anything like me, they tweak a bit here and there, sketching out the rough shape, working on another part of the big picture, then focus on adding details.  A problem arises for a developer who has to subsequently dig into the resulting code… elements are added to the document in the order they are created, so a bunch of shapes that appear to be one symbol might be scattered throughout the document, and might even be in different layers.

Best Practice: Group early, group often.  Create graphical objects, and think about graphical / document structure.  Your developer co-workers will thank you.

Being the non-designer developer I am, my first instinct was to group the elements in a text editor, and as a clumsy first attempt to find the different elements, I used Firebug to inspect each element to find its id or unique data I could use in a text search in the text editor, but the different parts were too scattered for this to be effective; pretty quickly, I turned to Illustrator myself to do the grouping visually.

The process for converting these graphics into symbols was made much clumsier by the selection mechanism of Illustrator.  When things are grouped in Illustrator, it logically selects all the bits of that grouped image.  The problem is that it also does this with layers, as well as groups; you can “drill down” from a layer into an individual group, but when you are first trying to select a set of images that aren’t already grouped, this can be twiddly and frustrating.  Illustrator also defines far too many nested groups, decreasing their usefulness and creating markup cruft that makes later programming harder. Using the selection marquee (the draggy box), you can more easily select the constituent parts of the image, but be careful of any background elements.

Best Practice: When creating symbols, select the elements you want as part of that symbol, either with the selection marquee or with shift+click.  Right-click on the selection, and choose “Group” to group the elements, which should also group any gradients, filters, clipping paths, etc. that the shapes use; in the Layers dialog, you will see the graphics collected under a new group labeled “<group>”; double-click this, and give it a meaningful name.  (Note: you might need to right-click again and choose “Isolate Selected Group” in order to the collect the gradients and other graphical effects into the group; these are not shown in the Layers dialog, so I wasn’t sure at what point they are included in the group.)

“Let Me Tell You What I Think You Mean”

As I isolated each image, I deleted extraneous shapes that weren’t part of any symbol.  I made each symbol into its own file, just to keep them tidy.  Each symbol looked great by itself, but when I finally recomposed all the symbols together, the colors were all wrong!  A little digging revealed the problem… Illustrator changes the ids of the “paint servers” –referenceable graphical effects like gradients and filters– as you delete other shapes.  So, when I recombined the symbols into a single file, some of the gradient ids overlapped and defaulted to the first instance… which screwed up the colors.  This is a portability and maintenance nightmare.

Illustrator tried to be a little too clever here.  Like the way it unwinds <use> references and discards the <use> element, it doesn’t play well with a designer-developer roundtripping workflow.  I ran into many such cases where it discarded changes I had edited by hand.  I tried to resize the document dimensions in my text editor, but when I loaded it in Illustrator, made some changes, and saved it again, it scaled down my graphics (which I’d just explicitly scaled up) and changed the viewport to a much smaller set of dimensions.  Hey, Illustrator, if I wanted it that size, that’s the size I would have made it!  Finally, I gave up, and set the dimensions I wanted in a new file I created in Illustrator itself, and copy-pasted from one Illustrator window into the new document, which seems to have taken.  I don’t like programs which introduce inconsistency into a workflow.

What are you smirking about, Inkscape?  You pull the same kind of nonsense!

Copy-Paste Error

After all this tweaking, I ended up with more or less what I want to start with: a document with the dimensions I need, with a set of reusable symbols at the right scale.

But when I tested it out by selecting a symbol on the canvas, copying it, and pasting it in its new location, I was disappointed to find that Illustrator copied the parts of the symbol, but not the grouping… it just added the individual parts of the graphic directly in the target layer.

FAIL!

I messed around a bit more with the interface, and through luck, I stumbled on a different way of selecting the symbol.  By toggling a selection button for the group in the Layers dialog, and copying that (Ctrl/Cmd+C only… Illustrator doesn’t provide a right-click menu on items in the Layers dialog list), I could paste the group.

Best Practice: Copy and paste symbols from the Layers dialog to preserve their logical structure.

This is a far cry from having a <use> element, but I plan to apply a post-processing step to the final document, replacing duplicates with <use> references.  Luckily, Illustrator didn’t give the pasted copy a completely random id, but simply appended an incremented number to the original symbol id, so this should be fairly easy.

My next step is to turn the new document over to Michael, my long-suffering designer, and see if any of this makes sense to him, or if he will come to his senses and throttle me for imposing all this developer madness on him.

To Be Continued…

I recognize that my own inexperience with Illustrator is probably behind some of my missteps (the full extent of which I have shielded from you, dear reader).  On the other hand, a fresh pair of eyes can often spot flaws that could be eliminated where an experienced hand would simply repeat the same mistakes.

This project is far from over, and as I refine my workflow, I’ll report back what I discover.  Some of what I learn may inform future versions of SVG.  Other parts should be changes to the authoring tools.  Hopefully some of it will help help designers and developers work around issues in creating SVG with the tools they use today.