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?

4 Answers
4

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

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.
–
PieterJun 28 '14 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 ?
–
svassrFeb 25 at 14:42

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).

Mostly better integration to photoshop ui. Look at it if you see no advantage, then it's not for you.
–
svassrFeb 20 at 17:52

That's not the reason for my comment. Please suppose the link you gave is broken. Then your answer is useless. Or you explain in your own words and the link is to complete the given informations ...
–
KurtFeb 20 at 19:49