How to save as SVG in Photoshop, and what you get
Photoshop saves SVG from File, Export, Export As, not from Save As. Only shape layers become real vector shapes: pixel layers are embedded as a picture.
Published
To save an SVG from Photoshop, choose File, Export, Export As, pick SVG in the Format menu and choose Export. SVG is not in the Save As list. What ends up in the file depends on the layers: shapes drawn with the shape tools or the Pen become real vector paths, but anything made of pixels, such as a photo or a painted layer, is placed in the SVG as an embedded picture. A file like that has an .svg ending and no shapes in it, so it blurs when enlarged and a cutting machine has nothing to follow.
The steps
- Choose File, then Export, then Export As.
- In the Format menu, choose SVG. If SVG is not in the list, see the next step.
- Choose Export, then name the file and pick a folder.
To export only certain layers or a group, select them in the Layers panel, right-click, and choose Export As from that menu. Each selected layer, group or artboard is saved as a file of its own.
If SVG is not in the Format menu, the version of Photoshop in use may offer it only in the older export window. Photoshop’s Export preferences, under Edit, Preferences on Windows or Photoshop, Preferences on a Mac, have a “Use legacy Export As” option: turn it on and look again.
What Photoshop puts in the file
| In the Photoshop document | In the exported SVG |
|---|---|
| A shape layer: rectangle, ellipse, custom shape, or a path drawn with the Pen in Shape mode | A vector shape. Sharp at any size |
| Text converted to a shape | Vector shapes |
| A live text layer | Text that depends on the font being available wherever the file is opened |
| A pixel layer: a photo, a scan, brush strokes, anything rasterised | A picture embedded in the file. Not shapes |
The export does not trace. It will not find the outline of a painted logo and turn it into a path: pixels stay pixels, whatever the file is called.
To see which kind of file came out, open it in the SVG viewer. It counts the paths, shapes, text elements and images inside. A file with one image and no paths is a picture in an SVG wrapper.
Making a real vector SVG in Photoshop
It can be done when the artwork is built from vector layers from the start.
Draw with shape layers. Choose a shape tool or the Pen, and set the mode in the options bar to Shape. Adobe’s help pages describe three drawing modes: Shape makes a vector shape layer, Path makes an outline that adds nothing visible by itself, and Fill Pixels paints the shape straight onto a pixel layer. Only the first makes something the SVG export can write as a shape.
Convert lettering. Select the text and choose Type, then Convert to Shape. The text layer becomes a shape layer and no longer depends on the font. It also can no longer be retyped, so keep a copy of the text layer, hidden.
Keep effects simple. Flat fills and strokes travel well. Layer effects, blend modes and filters are Photoshop features with no promise of looking the same in an SVG. Check the exported file in a browser.
When the artwork is pixels
A photo, a scanned drawing or a painted design has to be traced to become an SVG of shapes. Three ways:
- Trace the exported picture. Save the artwork from Photoshop as a PNG, on a white or transparent background, then open it in PNG to SVG. It follows the edges and writes paths, in black and white or in flat colours. The larger the PNG, the cleaner the trace.
- Use a vector editor’s tracer. Illustrator and Inkscape both have one. Inkscape Trace Bitmap walks through the free option.
- Send a path to Illustrator. If the outline already exists as a saved path in the Paths panel, File, Export, Paths to Illustrator writes an Illustrator file holding that outline, which Illustrator can then save as SVG.
How to convert a picture to SVG compares tracing methods and explains what makes a picture trace well.
SVGs from Photoshop and cutting machines
Cutting software reads paths. An SVG that holds an embedded picture gives it nothing to cut. Cricut’s help pages say Design Space shows an “unsupported items” message for SVG files that contain embedded pictures, and for files that contain editable text. For a Cricut, Silhouette or laser, the file needs to be paths with flat fills: trace the artwork as described above, or draw it in a vector editor. If the design is to be printed and then cut around, a PNG uploaded for Print Then Cut is the simpler route.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| No SVG in Save As | SVG is an export format in Photoshop | Use File, Export, Export As |
| No SVG in the Export As format menu | The version in use offers it only in the older window | Turn on “Use legacy Export As” in the Export preferences |
| The SVG is blurred when enlarged | It holds an embedded picture, not shapes | Trace the artwork, or rebuild it with shape layers |
| Cricut Design Space reports unsupported items | The file holds a picture or live text | Trace to paths, and convert text to shapes |
| The lettering changes on another computer | Live text and a missing font | Type, Convert to Shape before exporting |
| The file is very large | A picture is embedded in it | Export a PNG instead, or trace |
| Colours or shadows look different in a browser | Layer effects did not carry over | Flatten the look into plain fills, or export a PNG |
Questions
Is Photoshop a good program for making SVG files? For a few simple shapes, it will do. For anything more, a vector editor is the right tool, because every object in it is already a shape. How to make an SVG file lists the free and paid options.
Can Photoshop convert a JPG or PNG to SVG? It can export one inside an SVG file, but the picture is not converted to shapes. Tracing does that.