How to export an SVG from Illustrator: the options
Export an SVG from Illustrator with File, Export, Export As. What each SVG option does, and the settings to choose for a website or for a cutting machine.
Published
To export an SVG from Adobe Illustrator, choose File, Export, Export As, pick SVG as the format, choose Export, set the options in the SVG Options window and choose OK. Illustrator can also write SVG from File, Save As, which offers different options and can keep a full Illustrator copy inside the file. Export As gives the leaner file and is the one to use for websites and cutting machines.
The steps
- Convert lettering to shapes if the file is going to other software: select the text and choose Type, Create Outlines.
- Choose File, Export, Export As.
- Choose a folder and a name, and set the format to SVG.
- Tick Use Artboards to make the artboard the edge of the SVG. Left unticked, the file is fitted to the artwork instead.
- Choose Export. The SVG Options window opens.
- Set the options, described below, and choose OK.
The SVG options
These are the options Adobe’s help pages list for Export As.
| Option | Choices | What it changes in the file |
|---|---|---|
| Styling | Internal CSS, Inline Style, Presentation Attributes | Where colours and strokes are written. Internal CSS puts them in one <style> block with class names. Inline Style writes a style attribute on each shape. Presentation Attributes writes separate attributes such as fill on each shape |
| Font | Outlines, or SVG | Outlines turns letters into paths. SVG keeps them as text that needs the font |
| Images | Preserve, embed, or link | Whether placed pictures go inside the SVG or stay as separate files beside it |
| Object IDs | Layer Names, Minimal, Unique | How ids are made for objects |
| Decimal | A number of decimal places | The precision of coordinates. More places, larger file |
| Minify | On or off | Removes empty groups and spaces. Smaller, harder to read |
| Responsive | On or off | On: no fixed size is written, so the SVG scales to its container on a web page. Off: the size is written into the file |
Two buttons at the bottom help with checking: Show Code opens the result in a text editor, and the browser button shows it in a web browser.
Settings for a website
| Option | Setting | Why |
|---|---|---|
| Styling | Presentation Attributes, or Internal CSS | Presentation Attributes are the easiest to override from the page’s own CSS. Internal CSS can give a smaller file |
| Font | Outlines for a logo. SVG for text that must stay selectable | Text kept as text needs its font to be loaded by the page |
| Object IDs | Unique, when several SVGs will sit inline on one page | Ids that repeat from file to file collide on a shared page |
| Decimal | 2 | Enough for most artwork. Use 3 for small icons with fine detail |
| Minify | On | |
| Responsive | On | The SVG fills whatever width the page gives it |
Settings for a cutting machine, laser or plotter
| Option | Setting | Why |
|---|---|---|
| Styling | Presentation Attributes | Colours are written plainly on each shape, which the widest range of software reads |
| Font | Outlines | Adobe describes outlines as the most compatible choice. Cricut Design Space reports “unsupported items” for an SVG with editable text |
| Images | Leave no pictures in the file | Design Space also flags pictures, linked or embedded |
| Decimal | 3 | Keeps curves accurate at large sizes |
| Minify | Off | No benefit for a machine, and the file stays readable |
| Responsive | Off | The width and height are written, so the file has a size |
Before exporting, bring the artwork down to plain filled shapes. Cricut’s own help pages suggest the Pathfinder panel for turning clipping paths into single shapes, and list gradients and patterns among the things Design Space flags. How to make an SVG file has a fuller checklist.
A note on size. Illustrator measures in points, 72 to the inch, and writes those numbers into the SVG as pixels. Software that counts 96 pixels to the inch then opens the design at three quarters of its intended size. The proportions are right, so the cure is to set the width after importing. SVG size and units explains the mismatch, and resize SVG writes a size in millimetres or inches into the file.
Export As or Save As?
| File, Export, Export As | File, Save As | |
|---|---|---|
| Result | A lean SVG | An SVG that can also carry Illustrator’s own data |
| Artboards | One file for each artboard with Use Artboards | Check the Use Artboards box in the Save As window |
| Options | The seven above | SVG Profiles, Font Type and Subsetting, Image Location, CSS Properties, Decimal Places, Encoding and more |
| Compressed .svgz | No | Yes |
| Best for | Handing the file to a website or a machine | A working file that will be reopened in Illustrator |
The option that matters most in Save As is Preserve Illustrator Editing Capabilities. It embeds an Illustrator file inside the SVG, which makes the file larger. Adobe notes a side effect: when such a file is reopened, Illustrator reads the embedded copy, not the SVG code, so changes made to the code by hand are not seen. Turn it off for any file that is leaving Illustrator.
Save As also lists Font Type choices. Convert to Outlines there does the same job as Outlines in Export As.
A third command, File, Export, Export for Screens, writes many artboards or collected objects in one go, in SVG and other formats, and suits sets of icons.
Getting the SVG code
Choose Show Code in the SVG Options window, or open the exported file in any text editor. The code can then be pasted into an HTML page. Paste it into the SVG viewer to see it drawn with its size, its viewBox and a count of what it contains.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| Empty space around the artwork | Use Artboards was on and the artboard is larger than the design | Fit the artboard to the artwork, export with Use Artboards off, or trim the file with crop SVG |
| The design imports at three quarters of its size | 72 units to the inch read as 96 | Set the width after importing |
| No width or height in the file | Responsive was on | Export again with Responsive off |
| Lettering changes or goes missing elsewhere | Text was exported as text | Font: Outlines, or Type, Create Outlines first |
| Cricut Design Space reports unsupported items | Text, pictures, clipping paths, gradients or patterns | Outline text, remove pictures, and merge clipped shapes with Pathfinder |
| Colours are lost in another program | It does not read the <style> block | Styling: Presentation Attributes |
| Styles clash between two inline SVGs on one web page | Both define the same class names in their <style> blocks | Styling: Presentation Attributes or Inline Style |
| The file is far larger than expected | Preserve Illustrator Editing Capabilities, or an embedded picture | Use Export As, and remove pictures |
| A thick outline is cut as a single line | Cutting software follows the path, not the stroke’s width | Object, Path, Outline Stroke before exporting |
| Part of the artwork became a picture | Mesh objects and some effects are rasterised on export | Simplify those objects before exporting |
Questions
Does the artboard colour export? No. Adobe’s help says the artboard background is not part of the SVG, so empty areas are transparent. A background in the exported file comes from a filled shape covering the artboard.
Can Illustrator open the SVG again? Yes, with File, Open. A file from Export As comes back as plain paths and groups, without Illustrator-only features such as live effects. Keep the .ai file as the master.
What is SVGZ? A compressed SVG, offered in Save As. Adobe says it can be 50 to 80 per cent smaller but cannot be edited in a text editor. Not every program that reads .svg reads .svgz, so use it only where it is asked for.