Optimizing SVG through Illustrator

Adobe® Illustrator® allows customization of exported SVG in order to optimize file size through such controls as "Simplify," font embedding, and gzip compression. These controls should be used to produce the most streamlined files possible from Illustrator.

Complex images (particularly auto-traced or imported images from other applications such as Adobe Streamline™ or Adobe Dimensions®) should be passed through the Path Simplify filter before exporting. Fewer vector points mean smaller character count in the overall SVG file.

Font embedding should be used when you require the display of a specific font that the user may not have installed on their system. Otherwise, as in the case of logos, the text should be converted to outlines. In creating embedded fonts, you should always select the smallest possible option (see text lesson for details). The "All Glyphs" option should be used only rarely. Also, when creating multiple SVG files that use the same font, instead of creating multiple subsetted fonts, create one font that can be referenced by all of the files. The font becomes cached on the client side, and so once downloaded, will apply to all documents quickly.

Gzip compression is a new option in the current release of the Illustrator SVG Format plug-in, and can cut down SVG file size significantly. Here are some statistics from the current specification:

Other methods of optimization

There are many ways of optimizing your SVG files by hand outside of Illustrator.

• Use default values whenever possible rather than defining all attributes and properties explicitly.
• Take advantage of the path data compaction facilities — use relative coordinates; use h and v for horizontal and vertical lines; use s or t for cubic and quadratic Bezier segments whenever possible; eliminate extraneous white space and separators.
• Use symbols if the same graphic appears multiple times in the document.
• Use CSS property inheritance and selectors to consolidate commonly used properties into named styles or to assign the properties to a parent <g> element.
• Use filter effects to help construct graphics via client-side graphics operations.

Non-optimized SVG 3.64 kb	Optimized SVG (<use>, gzip) 0.99 kb
JPEG (medium quality) 9.62 kb	GIF (256 colors) 12.77 kb

Next lesson: Viewer Auto-Install