Adobe SVG to D3

Built with blockbuilder.org

This is an example of creating a graphic in Adobe Illustrator which is then exported as a SVG file. This image was designed as a new annotation element for another project. The reason for using a tool to generate SVGs is that doing any complex graphic manually does not scale and is very painful to create. However, there are things to consider when bringing external SVGs in, which I will discuss further down.

This SVG is composed of several layers that will support multiple interaction schemes. The red circle is a delete button. The blue circle will be draggable off the SVG to anywhere on the screen with a connecting line back to the parent g. The white space in the middle of the parent g will be for text annotation. Each layer created in Adobe Illustrator gets mapped to a new group element in the SVG each with its own generated ID. Each element in each group is assigned a CSS class for styling. All the CSS is then placed in the header of the SVG element. Each element in each group does not have its own ID.

This SVG is a set of images only. It has not been set up for any interaction yet. Look at the SVG defined in RectAnno3.xml to get an idea of the layout and naming.

The SVG file is read into a D3 based page via a call to d3.xml. The file read in for this example is RectAnno3.xml. Normally this would be a .svg but Gist does not like that so I just changed it to an xml extension and it works the same.

Unlike how you normally create a set of SVG elements in D3, importing a SVG requires a different approach. You explicitly attach your imported SVG directly to a DOM node.

1. Once you have read in the SVG file with d3.xml you pass in the imported SVG to the document with document.importNode.
2. You then attach the imported node to a SVG node by cloning it and appending to a target parent SVG element like a g.

Things to consider when importing external SVGs.

1. All Adobe Illustrator layers map to distinct g elements. Important that you layout your graphic such that what ends up in a specific g element makes sense, especially if you are going to transform that element in any way. The IDs that are generated are kind of funky. You have control over the name based on the name of the Adobe Illustrator layer but an additional string is inserted. (For my SVG it is x5F). So if the layer was named anno_rect then the generated ID would be anno_x5F_rect.
2. Every element has its own CSS which is included in the SVG element header. Usually you have a separate CSS file(s) for your styling rather than having it in the SVG element.
3. Accessing specific sub-elements requires a bit of navigation since there are no ids below the g element. This is fine if the graphic isn’t too complex or does not contain collections of the same type of element.

One Workflow could be:

1. Create your graphic in Adobe paying attention to what is in each layer (translates to a g in SVG).
2. Edit the exported SVG, adding IDs where needed and move the CSS out to an external file.
3. Unfortunately there is no easy way to reverse this so any changes that are needed to the original graphic will require repeating steps 1 and 2 after you edit and export the graphic from Adobe.

This is my first effort to import SVGs so if there are any errors or comments about how to do this more effectively please revise.

Thanks