How to produce an SVG in Adobe Illustrator
These days the vector format SVG is the best format there is for website icons.
SVG icons weigh very little, scale without any loss of quality, and are easy to animate or to make respond to events — hover, click andthe rest.
To get a final SVG that is as small as possible and comfortable for a web developer to work with, follow these rules while you are still in Adobe Illustrator.
- Name your layers meaningfully — after the icon — and delete the ones you do not need.
- Make the artboard the same size as the image:
Object→Artboards→Fit to Artwork Bounds. The exception is an object built not from filled paths but from lines with a stroke weight, where the stroke can extend past the artboard. In that case fit the artwork to the artboard instead. - Simplify the curves:
Object→Path→Simplify - Merge the paths:
Window→Pathfinder(Ctrl-Shift-F9) →Unite - Convert stroked lines into filled paths:
Object→Expand…. This makes the SVG slightly heavier and slightly less convenient to animate, but considerably more compatible — it will look the same across browsers and at any size.
Save out of Illustrator through export rather than “Save As”: File → Export → Export As….
In SVG Options, choose:
- Styling: Internal CSS
- Object IDs: Layer Names
- Decimal: 1 — the lower the number the smaller the file (1 is the minimum); the higher it is, the more precisely elements are positioned.
- If a developer is going to change colours or animate the icon afterwards, untick Minify. The SVG comes out slightly heavier but far more readable and easier to work on.
See also: