How to open an SVG in Illustrator and edit it

Yes, Adobe Illustrator opens SVG files. Choose File, Open, pick the .svg file, and it opens as a normal document made of editable paths, groups and text. Nothing has to be converted or traced, because SVG is a vector format like Illustrator’s own. Older versions such as CS6 open SVG too. To add an SVG to a document that is already open, use File, Place, or paste it.

Three ways in

Method	How	Use it when
Open	File, Open, or drag the file onto the Illustrator icon	The SVG is the thing to be worked on
Place	File, Place, pick the file, then click on the artboard	The SVG is one part of a larger design
Paste	Copy the SVG code as text, then Edit, Paste in Illustrator	The SVG is code on a web page or in an editor

Open makes a new document, with an artboard that generally takes its size from the SVG’s width and height, or from its viewBox when those are absent.

Place brings the SVG into the document that is open. If its shapes cannot be selected afterwards, it has been placed as a linked file. Place it again with Link unticked in the Place window, or select it and choose Embed, and the artwork becomes editable shapes.

Paste works in recent versions of Illustrator. Copy the whole of the code, from <svg to </svg>, and paste: Illustrator draws it as shapes. If the words of the code appear as a block of text instead, the version is too old for this, or the code is incomplete. Save the code as a .svg file and open that. A file needs xmlns="http://www.w3.org/2000/svg" on its opening tag, as the xmlns attribute in SVG explains.

Editing the SVG once it is open

An SVG usually arrives as one group, sometimes inside a clipping mask the size of the page. That is why a first click selects everything.

1. Look at the Layers panel (Window, Layers) and open the arrows. The structure is shown as groups, clip groups and paths.
2. Ungroup. Select the artwork and choose Object, Ungroup. Repeat until single shapes can be selected, since groups are often nested.
3. Release a clipping mask if there is one: Object, Clipping Mask, Release. The mask is left behind as an empty rectangle with no fill or stroke, which can be deleted.
4. Recolour. Select a shape with the Selection tool and set Fill and Stroke in the Properties panel or the toolbar.
5. Reshape. The Direct Selection tool, the white arrow, selects single points and handles.
6. Double-click a group to work inside it without ungrouping. Press Esc to come out.

Lettering depends on how the file was made. Text that was converted to outlines is shapes and cannot be retyped. Live text opens as text, but Illustrator may break a paragraph into separate lines or pieces, and it asks about any font that is not installed.

Saving it again

File, Save writes the document back as an SVG and shows the SVG options. File, Export, Export As gives a leaner file for websites and cutting machines. How to export an SVG from Illustrator goes through the options in both. To keep Illustrator-only features such as live effects, save a copy as .ai as well.

Why it looks different in Illustrator

The size is a third too big. When an SVG gives its size in pixels or bare numbers, Illustrator counts each as one point, 72 to the inch, while browsers and most cutting software count 96 pixels to the inch. A file meant to be 4 inches wide at 96 pixels to the inch opens 5.33 inches wide. The proportions are right. Check the width in the Transform panel and scale to the size intended. SVG size and units covers how sizes are stated.

Everything is black. The colours were probably set in a way Illustrator does not read: by a stylesheet that is not in the file, by CSS variables, or by currentColor, which means “the text colour of the page” and has no page to refer to. Shapes with no usable fill are drawn black, the SVG default. Recolour them in Illustrator, or first write real colours into the file with change SVG colours, which handles currentColor and missing fills. A colour given as var(--name) has to be replaced by hand.

Shapes are missing or the picture is cropped. Look for a clipping mask and release it. Shapes outside the SVG’s viewBox are still in the file and appear once the mask is gone.

A font has changed. The SVG names a font and does not contain it. Install the font, or ask for a copy with text converted to outlines.

Effects look different. Blurs and shadows made with SVG filters generally arrive as effects listed in the Appearance panel, and may not match a browser exactly.

Common problems

What you see	Cause	Fix
Illustrator reports an error and will not open the file	The file is not valid SVG: broken code, and possibly a missing xmlns	Open it in the SVG viewer, which says whether the code is valid and whether xmlns is missing
Clicking selects the whole design	It is grouped	Object, Ungroup, or double-click into the group
A shape will not select at all	It is inside a clipping mask, or the file was placed as a link	Release the mask, or choose Embed
An empty rectangle surrounds the art	The released clipping mask	Delete it
Pasted code appears as text	An older version, or part of the code is missing	Save it as a .svg file and use File, Open
The artboard is huge or tiny next to the art	The SVG’s size and viewBox do not match its artwork	Object, Artboards, Fit to Artwork Bounds
Lines have turned into filled outlines	The program that made the file exported strokes as shapes	Nothing to fix in Illustrator. Export again from the source with strokes kept

Questions

Does Illustrator open an Inkscape SVG? Yes. Save it from Inkscape as Plain SVG for the cleanest result, since Inkscape SVG carries extra data that only Inkscape uses. Check the size after opening: a file that states its size in mm or inches generally opens at that size, and one in pixels a third too large, for the reason given above.

Is there a free way to edit an SVG? Inkscape is free and uses SVG as its own format. How to edit an SVG file compares the choices.