Previously I explored manually optimizing an SVG file by tweaking settings and cleaning up code by hand. While that’s a good thing to know – and very often a final necessary step – it’s more likely that most designers and developers will be building and exporting their SVG work from a vector illustration tool such as Adobe Illustrator.

In this article, I’ll look at setting up and working with Illustrator with the goal of producing useful, editable and highly compressed SVG graphics. In a follow-up piece, I’ll detail the best export options, including some that are exclusive to the latest version of Creative Cloud.

Set Up Preferences & Artboard

The first step is to choose the right reference system for your work. While vector shapes are indifferent to size and scale, it’s logical to use measurements that mirror the purpose of the SVG file. In most cases, that will mean pixels, especially if you will be integrating bitmap graphics into your SVG .

For work that also has a print component, or when making a precise illustration of a real-life object, you might choose inches, centimeters or millimeters. Set your choices in Illustrator’s Units preferences panel.

If the SVG will be used responsively, the dimensions ultimately don’t matter, but it’s important to understand that whatever size you choose for your artboard will become the area of the SVG viewBox by default. Making your SVG “canvas” too large will leave a tremendous amount of whitespace when the file is displayed, no matter what measurement system you’re using.

Your decision at this point is reversible: see “just before export” at the bottom of this article if you need to make any changes to your artboard.

As the SVG will usually be shown on screen, and CSS doesn’t yet support CMYK, it makes sense to select RGB mode for color. Since we are dealing with XML elements, it also makes sense to identify objects by their ID.

Use naming conventions

Remember that when you draw in SVG you’re not just making images: you’re creating data. If you want to manipulate that data later, via CSS, JavaScript, or some other means, you will need a way of identifying the objects you create. For that reason, it’s important that you remember to name each relevant object as you make it. That name – lowercase, without any spaces – will become the element’s ID when the illustration is saved as SVG. If you don’t name the objects now, you can do so later, but it’s usually much easier to create these references during visual editing.

Simplify

As a rule, use the fewest possible number of points to create a shape, which will in turn produce the best vector illustration. It’s a good idea to use the Smooth and Simplify tools (Object / Path / Simplify) as you work, reducing the number of points and keeping things manageable.

Avoid filters, as Adobe Illustrator doesn’t yet translate them well into SVG. Similarly, blending modes aren’t yet supported; don’t use Multiply, Dissolve, etc. Given time you will be able to add blend modes and filters via CSS to SVG, but at the moment Adobe Illustrator doesn’t export the code to do so.

Don’t stroke elements or text if you don’t have to: a stroke (even one that merges with its background) takes twice as long to draw, due to the fact has two edges. Again, it’s possible to fix this later if you’ve forgotten to do so. (See “Merge Shapes”, below).

Try to keep polygons and circles as geometrical objects, and avoid breaking them into paths. A polygon takes up less file space, and will render faster.

Create a background, if necessary

SVG drawings are transparent: they don’t have a root “body” element that you can fill with color. If you want to create the appearance of a background color in a SVG document, you have three choices:

1. If the SVG is used as an image on a web page, provide a background-color for the image in CSS.
2. Draw a rectangular shape that takes up the entire Illustrator artboard and fill it with color. Send the layer to the back of the Illustrator document, making the background part of the SVG itself.
3. If using SVG code directly on an HTML page, you can style the <svg> root element like anything else. For example, in this neat lightbuld SVG by Oliver Knoblich:

svg { border-radius: 50%; background: #999; }

Merge shapes

SVG doesn’t recreate trapping or overprint. So as long as you know that you are not going to need to edit or animate them later, merging elements into a single shape is a very good idea.

To do so, select all the shapes you wish to join, and choose Object / Expand… from the menu. Expand both fills and strokes. With the shapes still selected, bring up the Pathfinder tool (Window / Pathfinder) and choose Unite. This will marge the selected elements into a single shape with a shared color and no stroke.

Decide how you’re going to treat your text.

If you want to keep your text searchable, customizable and easily editable, keep it as real text, but be prepared to work with CSS to get the font correct.

If you value precision over editability – for example, in a logo – select your text and choose Type / Convert to Outline, breaking it into pure vector shapes. You’ll also have the option of converting type when you export the SVG file.

Crop The Artboard

If you find that you haven’t used the entirety of your artboard for your drawing, you should crop out any extraneous white space to reduce the size of the SVG viewBox. Illustrator offers an easy way to do this:

1. Select everything that should be included in your SVG.
2. Select Object / Artboards / Fit to Selected Art from the menu bar.

Alternatively, use the Artboard tool to adjust the size.

Following these guidelines will produce the best results in your SVG files, and enable decent compression settings when you export from Illustrator, which we will look at next.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.