How to Save & Export SVG from Photoshop [4 EASY Methods!]

with No Comments

SVG files are perfect for transferring vector images from Photoshop to Illustrator or any other vector-based editor for further work. But with Adobe moving away from letting you save SVGs in Photoshop, it’s no longer obvious how to save an SVG file.

This article gives you a quick overview of how to save vectors in Photoshop, and also has some troubleshooting steps if your Photoshop SVG export is not working.

Can Photoshop Open SVG Files?

Photoshop can open SVG files as Smart Objects through File -> Place Embedded or Place Linked, although as Photoshop is a raster-based editor, not a vector-based editor, it is more limited in its vector editing capabilities so not all of your edits will necessarily show within Photoshop.

export svg from photoshop

How to Export SVG from Photoshop

To save and export SVG files from Photoshop, go to Edit -> Preferences -> Export and check the “Use Legacy ‘Export As'” option, then use File -> Export As, select an SVG format from the dropdown menu and then click Export.

1. Use Legacy “Export As” for SVG Files

Starting with the version of Photoshop released in August 2021, “Export As” for SVG files is no longer natively supported.

For most users it will be possible to switch it back on using the below steps, although if you have an M1 Mac, then you will need to slightly modify this – see the troubleshooting section at the bottom of this article for more details on this.

For all other users:

1. Go to the Edit -> Preferences -> Export menu, and then click Use legacy “Export As”.

photoshop export as legacy option

2. Go to File -> Export -> Export As or use the keyboard shortcut Alt+Shift+Ctrl+W (Windows) or Opt+Shift+Cmd+W (Mac).

export svg in photoshop

3. From the Format box in the File Settings section of the Export As popup, choose a Format of SVG.

set SVG format for export

4. Then once you have confirmed that you are using an SVG format, you can click Export.

save svg in photoshop

Note that this will export every layer in your document. If you only want to export a single layer, then see below.

2. “Export As” for a Single Layer

If you have something like a PNG logo that you want to convert to SVG, then exporting only a single layer is a good option.

As for the steps above, you must first ensure that Use Legacy “Export As” is activated in your Export preferences. Then:

1. Right-click on the layer that you wish to export in the Layers Palette.

2. Then choose Export As.

export svg layer

3. You will see the same Export As popup, where you need to choose a Format of SVG, then click Export to save the single layer as an SVG file.

export single layer as SVG in Photoshop

3. Save An SVG File in Photoshop with Image Assets

Saving SVGs with Image Assets allows you to save multiple image types at once, and also provides the most flexibility of any method of saving, although it is not in itself intuitive to use.

1. Rename the layer/s that you wish to export by adding a .svg to those that you want to export as SVG files. If you want to export all layers combined into one SVG file, then first use Ctrl/Cmd+Alt+E to copy all visible layers to a new layer. You can then add a .svg to the name of this layer.

rename svg file

2. Go to File -> Generate -> Image Assets.

generate image assets photoshop

Nothing will appear to happen, but if you re-open the Generate menu, you will see that Image Assets is now ticked.

image assets ticked

3. Go to File -> Save As or use the keyboard shortcut Shift+Ctrl/Cmd+S, and save your file as a PSD file type.

save as psd

4. If you now look in the folder where you saved you SVG file, you will see the PSD document, plus a folder which contains your layer/s saved as SVG files.

svg folder

This folder contains your SVG file, to do with as you wish.

svg file

4. Copy SVG Source Code

If you are wanting an SVG file for web-based use, then it is possible to take the data in HTML markup, although this is not suitable for any other uses.

1. Simply Right-click on the layer and choose Copy SVG.

copy svg

2. You can then paste the SVG code into your HTML editor.

svg data

Note that this will not work if your layer is a Smart Object. In this case, first Rasterize the layer from the menu you see when Right-clicking on the layer.

Photoshop SVG Export Not Working?

The most common reason why Photoshop SVG Export is not working is because Adobe have now discontinued the use of the SVG export function, you need to use the legacy export feature in order to access it. Do this by going to Edit -> Preferences -> Export and choosing the Use legacy “Export As” option.

legacy export as

If you are using an M1 Mac on the other hand, there is currently a known issue with exporting SVG files.

To get around this, you must:

  1. Open Photoshop using Rosetta.
  2. Go to Preferences -> Tech Preview and ensure that Optimized Export As is unchecked.

Learn more about Adobe’s current issues with Apple Silicon at the link.

SVG Export Limitations

There are some known limitations to exporting SVG files in Photoshop, including text and layer / clipping masks not rendering as expected, and the background layer exporting as transparent.

Text Not Rending As Expected

It is suggested that you convert text to a shape before saving it to SVG, as this will allow the text to be rendered correctly.

To do this, simply Right-click on your text layer, then choose Convert to Shape in the options menu that appears.

convert text to shape

After converting a text layer to a shape, it will no longer be editable as text, so make sure that this is your last step prior to saving as SVG.

Background Layer Exports as Transparent

To prevent the background layer from exporting as transparent in the SVG file, duplicate it in the layers panel. This will make it visible in the SVG.

To do this, Right-click on the Background Layer and choose Duplicate Layer from the popup menu. Alternatively, use the keyboard shortcut Ctrl/Cmd+J.

duplicate background layer

Press OK in the Duplicate Layer window that appears, and you will have successfully duplicated the background layer, and made it visible when exported to SVG.

duplicate background

Final Thoughts on Saving to SVG in Photoshop

There are a variety of ways to save to SVG in Photoshop, including:

  • “Export As” for the entire file
  • “Export As” for individual layers
  • Saving SVG using Image Assets
  • Copying the SVG source code

If your save to SVG is not working, then make sure to apply the Legacy “Export As” in Photoshop’s Export preferences. Remember that as Photoshop is a raster-based program, it can be tricky to fully capture every vector-based edit in an exported file, so it can still be better to use PNG, unless you are have a very specific reason to use SVG.

Free Photoshop Tutorials:

How to stretch an image in Photoshop

How to unmerge layers in Photoshop

How to wrap text in Photoshop

Follow Tim Daniels:

Hi, I'm Tim Daniels, photographer and photo trainer, founder of Lapse of the Shutter and creator of the totally free Lightroom Develop System. I've travelled to (probably) 30 countries over the last few years, taking photos and licensing them around the world, and creating lots of free photography learning resources. Read More ...

Leave a Reply