Tips for Designing and Exporting SVG Icons with Illustrator

These tips and techniques for Illustrator will help you optimize the process of designing vector icons and assist in exporting clean, simple SVG code to use on the web or in mobile apps.

The SVG (Scalable Vector Graphics) file format has many benefits which make it ideal for web and mobile app icons. Traditional bitmap formats such as PNG, JPG and GIF lose quality when viewed larger that their intended size. With SVG this isn't an issue because as the name suggests, they are scalable vectors and they look great when viewed at any size, especially on Retina and HiDPI screens. The other main benefit to SVG files is that they are code-based (similar to HTML) and can be styled with CSS attributes, allowing for lots of flexibility. In the process of creating SVG icons for Medialoot and the upcoming Glyphs Company I have learned some tips and techniques for Illustrator which make the process of designing and exporting icons much smoother.

Align Strokes to the Center

If you are familiar with Illustrator, or any other vector drawing application you will no doubt familiar with stroke alignment. Stroke alignment is the ability to render a stroke either on the center, inside or outside of a given vector path. The SVG specification has lots of options that can be used for strokes, including stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-dasharray and more. But unfortunately stroke alignment is not one of the supported features. This imposes some limitations when designing icons that will be exported to SVG format. It could be one almighty disappointment if you designed hundreds of icons with strokes aligned to the inside and outside of paths, and then when you export them to SVG, you find all of the strokes are aligned to the center instead. The solution, although it may seem obvious is to simply avoid using stroke alignment at all costs except for center alignment.

Use ‘Preview Bounds’

You will notice that in Illustrator by default, the bounding box around objects is associated with the vector path. The problem is that an object isn't always visually the same size as its path, which can make aligning icons to the Artboard bounds tricky. For example, if you apply a 2 pixel center aligned stroke to a vector path, you actually increase the size of the shape by 1px, however the bounding box is still the same size because the actual path never changed. Turning on the Preview Bounds option in Illustrator's general preferences will correct this.

Keep Shapes Simple

It is important when designing SVG icons to keep your vector shapes as simple as possible, because this will result in cleaner outputted SVG code, which is faster to load and less prone to display errors. Always try to keep unnecessary or stray points to an absolute minimum, for example a circle shape should only require four vector points. Any more than that is unnecessary and could cause unwanted display bugs and more complex code. In the image below you can see that we have two circles which appear exactly the same but one of them has additional unnecessary points.. The result of these additional vector points is larger, less coherent SVG files, as can be seen by comparing the the source code required for both shapes: Circle 1:

<ellipse fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" cx="50" cy="50" rx="47" ry="47"/>

Circle 2:

<path fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M270,3c6.5,0,12.7,1.3,18.3,3.7
	c5.6,2.4,10.7,5.8,14.9,10.1c4.3,4.3,7.7,9.3,10.1,14.9S317,43.5,317,50c0,6.5-1.3,12.7-3.7,18.3c-2.4,5.6-5.8,10.7-10.1,14.9
	c-4.3,4.3-9.3,7.7-14.9,10.1c-5.6,2.4-11.8,3.7-18.3,3.7s-12.7-1.3-18.3-3.7c-5.6-2.4-10.7-5.8-14.9-10.1
	c-4.3-4.3-7.7-9.3-10.1-14.9c-2.4-5.6-3.7-11.8-3.7-18.3c0-6.5,1.3-12.7,3.7-18.3s5.8-10.7,10.1-14.9c4.3-4.3,9.3-7.7,14.9-10.1
	C257.3,4.3,263.5,3,270,3z"/>

Combine Shapes When Appropriate

It is not required to merge all paths and shapes, but in some cases you can keep the code simpler by using Pathfinder operations to combine overlapping paths or shapes.

Use Artboards

If you are designing an icon set to sell on marketplaces or designing custom icons for a specific project, you will most likely be creating more than one icon. But creating individual Illustrator files for every single icon would be a nightmare to manage with pretty much anything over 10 icons. Using Artboards in Illustrator allows you to keep icons that belong in the same set together. It also streamlines the process of later saving the production-ready icons to indivual .svg files. Once you have your document set up with each icon on it's own unique Artboard, all you have to do is tick the option to Use Artboards when you save as SVG. If you like to keep things organized and tidy, you can also rename the Artboards using something that describes its icon (ie. star, heart, document, folder etc.).

Understand SVG Save Options

There are lots of options available in the Illustrator SVG Options save dialog (click on the More Options button to see them all). It can be a little intimidating at first but these are the settings that I have found to be the most suitable for web use:

• SVG Profile: SVG 1.1
• Subsetting: None (Use System Fonts)
• Image Location: Link
• Preserve Illustrator Editing Capabilities: No
• CSS Properties: Style Attributes (Optional)

Preserve Illustrator Editing Capabilities can easily add over 400kb to a <1kb SVG file, it is not recommended that you use this option when exporting an SVG for use on the web. If you want to retain Illustrator settings, create a seperate .ai file for private use. The option for CSS Properties is interesting, Style Attributes will add inline styles to paths and shapes in the code, where as Style Elements will place styles within <style> tags in the header. Style Attributes Example:

<path style="fill:#8C3900;" />

Style Elements Example:

<style type="text/css">
	.fill-1{fill:#8C3900;}
</style>
<path class="fill-1" />

This option ultimately comes down to preference, I personally favor Style Attributes because the code is slightly cleaner and it is easier to override styles by manually adding custom styles to <style> tags in the header later on.

Use Solid Colors

When designing SVG icons in Illustrator, it is advisable to be in the mindset that you are drawing code, in a similar way to how WYSIWYG code editors work. Whatever you draw Illustrator will attempt to code it on your behalf. Gradients are supported in SVG, and Illustrator is fully capable of coding gradients, however there are a couple of issues that can arise. Firstly gradients need to be defined separately in SVG which adds to the complexity of the code. For example here is some sample code to a basic linear gradient.

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="gradient-1">
	<stop  offset="0" style="stop-color:#FFFFFF"/>
	<stop  offset="1" style="stop-color:#000000"/>
</linearGradient>
<ellipse fill="url(#gradient-1)" cx="50" cy="50" rx="47" ry="47"/>
</svg>

Compared to a solid color fill:

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse fill="#000000" cx="50" cy="50" rx="47" ry="47"/>
</svg>

The difference is that the code for solid color fills is much cleaner and simpler. And it can also be targeted and styled by CSS. Whenever possible it is better to keep things simple and use color fills, however if a gradient is absolutely necessary it's not going to cause any major issues as long as they are used in moderation. You can even consider adding the gradients into the SVG source code manually after saving to keep the code cleaner.

Conclusion

Following these tips and techniques for Illustrator can help make the process of designing vector icons smoother, and assist in exporting clean, simple SVG code to use on the web or in mobile apps. If you have any tips for designing SVG icons in Illustrator or other vector drawing applications, please share them in the comments!