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 elemen