Architecture Note: SVG Export From Illustrator for Web Pipelines

Problem and takeaway

Designers export SVG from Adobe Illustrator, but the default dialogs often embed editing data, use too many decimal places, and attach styling in ways that are hard to override with page CSS. The result is oversized files, leaked internal layer names, and icons that cannot be themed without re-exporting.

Treat the export as a pipeline step, not a one-time save. The smallest workable approach is to export minified, responsive SVG with presentation attributes, one or two decimal places, no preserved Illustrator data, and outlined text for final artwork. Third-party or user-supplied SVG should be sanitized before it reaches a browser.

Requirements

Before choosing settings, define what the web pipeline needs:

• Files must scale predictably in supported browsers.
• Fills and strokes must be overridable by page CSS or design tokens.
• File size must stay within a budget for icons and illustrations.
• Exported markup must not expose internal Illustrator layer or object names.
• Assets must be checked for embedded raster fallbacks, scripts, or external references.

Smallest suitable design: export settings

Use these settings as a starting point for production icons and simple artwork. Exact menu names vary by Creative Cloud release, so verify against the installed version.

Setting	Recommended value	Reason
Styling target	Presentation attributes	Writes fill, stroke, and similar attributes directly on elements so page CSS can override them without re-exporting.
Decimal precision	1-2 places	Reduces file size while keeping curves visually accurate for screen sizes. Choose per asset type; very low precision can distort paths.
Responsive / viewBox	On	Retains a viewBox so the SVG scales with its container instead of locking to a fixed pixel size.
Minify	Yes for production	Removes whitespace and comments. Keep an unminified source in version control for review and diffs.
Preserve Illustrator Editing Capability	Off	Stops proprietary Illustrator data from being embedded, which reduces size and avoids leaking internal naming.
Text	Convert to outlines for final assets	Avoids font-substitution problems. Keep live text only in archival files or when using a reliable webfont stack.

Presentation attributes are SVG attributes such as fill="#000" written directly on elements like <path> or <circle>. A viewBox defines the coordinate system and aspect ratio, allowing the graphic to resize fluidly.

Trust and data boundaries

SVG is XML, which means it can carry scripts, event handlers, and external references. Artwork exported from your own Illustrator files is low risk, but treat any SVG from outside your team as untrusted input.

Before serving third-party SVG:

• Run it through an SVG sanitizer that strips <script>, inline event handlers, and external resource references.
• Serve it with restrictive headers such as Content-Security-Policy: script-src 'none' and consider serving from a separate origin.
• Do not embed user-supplied SVG inline in your page unless it has been sanitized; use <img> or an object tag with a sandboxed context as a safer alternative.

Operational checks

Add a CI step that runs after export and before an asset is accepted into the design system:

1. Run an SVG optimizer such as SVGO on the exported file.
2. Validate the markup against SVG structure rules.
3. Enforce a size budget per asset type.
4. Confirm the file still contains a viewBox and no <script> tags.
5. Run visual regression against the Illustrator reference render in the browsers you support, at 1x and at scaled sizes.

Example command to run in a local terminal or CI job:

npx svgo --input=source/icon.svg --output=public/icon.svg --precision=2 --remove-view-box=false

Placeholders: source/icon.svg is the exported Illustrator file; public/icon.svg is the optimized destination. Required permissions: read access to the source and write access to the output directory. Expected checks: the output file exists, is smaller than the source, retains viewBox, and contains no <script> elements. Risk: an optimizer can strip accessibility attributes or transform paths in ways that change appearance, so compare the rendered result before accepting the optimized file.

Failure modes to inspect in exported markup

Open the exported file in a text editor and look for these issues:

• Embedded <image> elements or Base-64 raster data, which indicate an Illustrator effect was rasterized instead of exported as vector.
• Missing viewBox, which causes fixed-size rendering and breaks responsive layouts.
• Text left as font references rather than outlines, which can substitute incorrectly across operating systems.
• Internal layer names, groups, or Illustrator-specific namespaces left in the markup.
• Decimal counts higher than needed, which inflate file size without visual benefit.

If any of these appear, return the file to Illustrator, adjust the artwork or export settings, and re-export. Do not accept an asset into the design system until the markup matches the documented convention.

Conditions that should change the design

Revisit the export strategy when any of the following is true:

• Assets need runtime recoloring through CSS custom properties. Post-process fills into variables instead of hardcoding presentation attributes.
• Artwork depends on gradient meshes, complex blend modes, or photographic raster effects. Switch to PNG/WebP or a hybrid vector-raster approach.
• You are exporting dozens of artboards by hand. Script the export through Illustrator automation rather than driving dialogs manually.
• You need to preserve editability for future design changes. Keep an archival copy with editing capability enabled, stored outside the web pipeline.

Limitations and verification

Export dialog names and defaults differ across Illustrator versions. SVG font embedding behaves inconsistently across modern browsers, so outlines or webfonts are safer for production. Minified output is difficult to review in diffs, which is why the unminified source should remain in version control.

Practical check: export a sample icon with the candidate settings, open the file in a text editor, and confirm the styling form, decimal precision, and viewBox match your documented conventions. Then render it in your supported browsers at 1x and scaled sizes and compare against the Illustrator artboard. Run the file through an optimizer and markup validator before accepting it.