Learn how to export an svg in Photoshop using my quick and simple tutorial, and have either your document, your individual layers, or both, saved as svg files in no time at all.
Export SVG in Photoshop
Video Tutorial
I’ve got two techniques to show you here, and if you’d like to watch me do it first before you try it yourself, the video tutorial below has everything you need to become an svg exporting fiend in a matter of minutes!
Step-by-Step Tutorial
Open in Rosetta Mode (if Required)
Step 1 – If you cannot find the legacy option, you will need to open Photoshop in rosetta mode, which will likely be a problem for new M1 Macbook users.
Go to Applications, locate your installed Photoshop folder, then right-click the launch app and go to get info. From there, you can open Photoshop in rosetta mode and access the legacy options.
Export Document as SVG
Step 2 – Check all your layers are vector. For example, below, I have a vector smart object layer, an editable text layer, and a vector rectangle layer created in Photoshop that hasn’t been rasterized. All three of these states are fully scalable.
While you can still save an svg with raster elements within it, those elements will not scale and may pixelate or not produce the crisp graphics vector state does when used in different formats.
Step 3 – Convert any type to a shape. Right-click the type layer and go to convert to shape. This is to stop any potential issues with the svg export.
If an editable font is present in the svg, while it will often still work, sometimes the file will try to locate the source font, and if it can’t find it instead substitute in a different font. By converting the type to a vector shape, the type will always look that way.
Step 4 – Once your file is ready, go to Photoshop > preferences on Mac or File > preferences on Windows, then export.
Step 5 – Check the use legacy ‘export as’ box and click ok. If you can’t see this option refer to step 1 in this tutorial.
Step 6 – Go to file > export > export as.
Step 7 – Select the svg format under file settings in the export as box.
Step 8 – Apply any image settings you would like.
Export As Options
Image Size and Scale – You can change the size of the image here, but I personally don’t see any point in this, as you should have already set your desired image when you set up your document.
Resample – Leave this as bicubic automatic. There are options here for sharper or smoother outputs, but as we are exporting simple web documents, it isn’t going to make a massive difference.
Canvas Size – As with image size, I don’t need to adjust this as I already have this set up. You may want to trim the canvas if you have a large space between your artwork and the image size.
Metadata – The Photoshop export will allow you to apply copyright and contact info metadata, but I always leave this as none.
Once ready, click export.
Step 9 – In the save as menu, set your file name, select your desired destination to save, and once ready, click save. Your svg file has now been saved.
Export Layers as SVG Files
Step 10 – If you have a document with multiple layers, and you want all layers to export as separate svg files, there is a smart way to do this in Photoshop.
With your document open, first, rename all layers to have an svg extension by simplying double-clicking and typing ‘.svg’ at the end of the name.
Step 11 – Repeat for all layers.
Step 12 – Make sure image assets is turned on. Go to file > generate and click image assets if it hasn’t been turned on.
Step 13 – Go to file > save as.
Step 14 – As you can see, with image assets turned on, as long as you are saving a Photoshop (.psd) file, an assets folder will appear in your save destination, ready to hold all the exported layers. Set your file name, make sure your format is set to Photoshop, and click save.
Step 15 – When the Photoshop format options dialogue box appears, click ok.
Step 16 – Locate your save destination to see your files. I saved both versions in my Images folder. As you can see, I have the first svg file saved, a psd file saved, and then an assets folder containing all the named layers saved as separate svg files, ready to be used.
While Photoshop isn’t often the first place you would go to export svg files, if you are working in Photoshop, it does have some pretty quick and nifty export options to generate svg files in a simple way.
I hope this tutorial helps you out. Especially if you are working with a large number of vector files in one Photoshop document, the generate assets option can be a real timesaver when working with lots of images on different layers.