I have a set of Photoshop files which consist of a base image with a series of layers with colored overlays. The overlays are labeled using the layer names.

My task is to get these overlays as SVG paths, somehow preserving the labels. (If I can preserve the fill colors as well, that would be cool, but we can define arbitrary fill colors if needed.)

So far we have tried exporting the layers as Illustrator paths, and then exporting to SVG from Illustrator. This gets us reasonable SVG paths, but (a) we lose the labels, and (b) if a layer has more than one discrete section in its overlay, it is separated into several paths.

Is there a way to get these layers into SVG while retaining the labels? Or should we do our Export > Illustrator > SVG route on a layer-by-layer basis?

We're working with CS5, if that's important.

ETA to answerers: We've long since finished this project and delivered the job, so I can't accept an answer, but feel free to pitch in your potential solutions for others.

5 Answers 5


I wrote a free PS script that lets you do this automatically. Just name the PS layers you want to export with'.svg' at the end and they will be converted to SVGs, keeping the colors. the file name will also be the name of the layer. http://hackingui.com/design/export-photoshop-layer-to-svg/

The script works with CS5, CS6 and CC disclosure: this links to my site

  • 3
    Just a heads up: this doesn't work unless you have Illustrator, so it doesn't magically add SVG export functionality to Photoshop. You'll also need to sign up for a newsletter. If you really don't want to sign up for their e-mail list, go here to download the file directly.
    – Pieter
    Jun 28, 2014 at 9:49
  • I Had issues with this script. It was simply doing nothing (on mac OSX and photoshop CS6). No .svg generated, no .ai generated, no message. Just a loading icon then nothing. Any thought ?
    – svassr
    Feb 25, 2015 at 14:42
  • @svassr check out the discussion here: hackingui.com/design/export-photoshop-layer-to-svg and here: hackingui.com/design/… The script does work with CS6 and OSX. Are your shapes actually closed? It doesn't work on text layers. If you can provide more details I can try to help more
    – DMTintner
    Apr 24, 2015 at 10:27

Are these provided by a vendor? If so, maybe it's not doable now, but for future reference, I'd have them deliver the buttons in a format that makes the conversion much more practical. Adobe Illustrator would be better, or Inkscape would be perfect (given its native format is SVG to begin with).


Ultimately the (tedious) path we used was:

  • Photoshop has an "export layers" command. (I think it was a script.) This generates a file for each layer in the document.
  • Then we opened the files in Illustrator, selected the path, and exported that as SVG.

This was painful and work-intensive but seemed to be the only way through.


In a similar situation (trying to export Vector Smart Objects to SVGs from Photoshop), what worked for me was:

  • Double-click on the Smart Object layer to open in Illustrator
  • In Illustrator, Select All (Ctrl-A), then right-click on selection and "Export Selection..."

If I tried to export them directly from Photoshop I always ended up with PNG image data embedded in an SVG, but the above steps allowed me to produce proper vector images with paths.


Script export-photoshop-layer-to-svg offered by Hacking UI didn't work for me.

There are also these photoshop plugins which offer a better integration in photoshop UI (and export options menu). They also allow to export grouped layers.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.