SVG in Adobe Illustrator: Complete Workflow Guide
Illustrator is the industry standard for SVG creation and editing — master the complete SVG workflow from import to export.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Opening and Placing SVG in Illustrator
File > Open places an SVG as a new document with fully editable vector paths. File > Place embeds or links an SVG into an existing project.
- File > Open (Ctrl+O) → SVG imports as editable vectors
- File > Place (Shift+Ctrl+P) → places SVG in current document
- After placing: click Embed in Properties panel to embed (or leave linked)
- Placed SVGs: edit by opening the linked file separately
Converting PNG/JPG to SVG with Image Trace
Image Trace is Illustrator's vectorization engine — the professional tool for converting raster to SVG.
- Place your PNG/JPG (File > Place)
- Select the image, open Window > Image Trace
- Choose preset: 'High Fidelity Photo', '16 Colors', or 'Black and White Logo'
- Click Trace then Expand → now editable vector paths
- Delete white background paths, simplify, and export
Exporting SVG from Illustrator
File > Export As > SVG. Uncheck 'Preserve Illustrator Editing Capabilities' for smaller, cleaner output.
- File > Export > Export As
- Format: SVG (svg)
- SVG Profiles: SVG 1.1 (most compatible)
- Fonts: Convert to Outline (if text present)
- Images: Embed (for self-contained SVG)
- Decimal Places: 2 (reduces file size significantly)
Illustrator SVG Export Settings for Web
Use 'Save for Web' (Shift+Alt+Ctrl+S) for more web-optimized SVG output. Alternatively use File > Export As then manually run SVGO on the result.
Frequently Asked Questions
What is the best SVG export setting in Illustrator?
For web: File > Export As > SVG, uncheck Preserve AI Editing, set Decimal Places to 2, Fonts to Outline. Then run through SVGO for further cleanup.
Can Illustrator open SVG files from Figma?
Yes. Figma-exported SVG opens in Illustrator as fully editable vectors. Check that text is outlined if font compatibility is a concern.
How do I create a multi-artboard SVG in Illustrator?
Use multiple artboards. When exporting to SVG, check 'Use Artboards' — Illustrator exports each artboard as a separate SVG file.
Why is my Illustrator SVG file so large?
AI-preserved data, high decimal precision, and embedded fonts bloat SVG files. Uncheck 'Preserve Illustrator Editing Capabilities' and reduce Decimal Places to 2 when exporting.
Can I save Illustrator files as SVG without losing editability?
Save as AI (native) to preserve editability. Then use File > Export As > SVG for the distribution copy. Never use SVG as your master editing file — use AI.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free