How to save files from Adobe Illustrator to SVG for web production use. Goals:
- Maintin Usable Groups and Naming
- Package for responsive use
- Reduce File Size
Set units to pixels and use RGB color (CSS does not support CMYK).
Use the Identify Objects by XML ID setting.
Each object name will be used as the SVG elements ID.
- Use the fewest possible number of points to create a shape
- Avoid filters
- Dont stroke elemnts or texts if avoidable (its two edges to draw)
- Try to keep polygons/circles as geometric objects
Select all shapes you wish to join and Object / Expand... then bring up the Pathfinder tool (Window / Pathfinder) and choose Unite.
Keep the object as real text if it needs to be searchable and editable.
If precision is more important that editability - eg. a logo - select the text and chooose Type / Convert to Outline.
Select the objects to include in the SVG file. Then use Obejct / Artboards / Fit to Select Art
Choose File / Save As and choose the SVG format. Basic export options remain consistent across all Illustrator versions.
As a general rule, should your settings:
- SVG 1.1 Profile
- SVG Font type
- No subsetting
- Linked images
- CSS Properties: Style Elements
- Decimal Places - 1 (3 if artboard in inches)