Photoshop Custom Shape to SVG path string

Question

Is there any way to get the SVG path string off a Photoshop custom shape or path? Or is there another way to get/construct similar data? I'm looking to do something similar to this:

http://raphaeljs.com/icons/

Kink

Answer 1

Update: in recent versions of Photoshop, there is a built-in option to export the image as SVG, which works well on paths and custom shapes. Just do:

File -> Export -> Export as... and select SVG in the file settings.

Original Answer:

Starting from Photoshop CC 14.2, you can create SVG files directly from Photoshop:

1. Create a file named generator.json with the content below in your user home folder.
2. Restart Photoshop and open your PSD file.
3. Activate the generator: File > Generate > Image Assets.
4. Rename your layer to <something>.svg.
5. The svg file will be created in the assets directory next to your PSD file.

Content for generator.json:

{
    "generator-assets":  { 
        "svg-enabled": true
    }
}

Source: http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/

Stahl

This answer should have been selected as the correct one. No need of external tools. Works great. Thanks @Tzach! – Tredecillion

Updating this as the selected answer. Thanks! – Kink

Nice work. Thanks for staying up-to-date and changing the accepted answer. – Wheelock

Related wiki document: github.com/adobe-photoshop/generator-core/wiki/… – Skewbald

@Stahl How to generate string for vector drawable from svg image – Karolynkaron

Answer 2

1. Select and copy the path in Photoshop
2. Launch Adobe Illustrator
3. Create a new Document
4. Paste
5. Save as SVG

If you have Illustrator and have not created all the paths, however, it is probably easier to create them directly in Illustrator.

If you do not have Illustrator, you are probably better off using the free Inkscape SVG editor to draw your paths.

If you do already have the paths in Photoshop, and do not have Illustrator, the best I can think of is to turn on the Info palette in Photoshop select the path points one at a time and manually record the positions of the point itself as well as its handles, and from those manually create the path using absolute curveto commands, 'C' (for the points with handles) and absolute lineto commands, 'L' for those points that have no handles.

Wheelock

Thanks! I don't currently have illustrator loaded, but I might have access to it. after saving as SVG, it would give me the shorthand string command? – Kink

@WillHaynes Yes, Illustrator saves out valid SVG, and for paths will create a <path> element with the d attribute using the terse curveto and lineto commands. – Wheelock

I got annoyed doing this manually, so I created a PS script that will automatically export your layers to SVG for you (provided you have Ill. installed). hackingui.com/design/export-photoshop-layer-to-svg – Humidity

Answer 3

Another option is to save the file as EPS in photoshop making sure to have export vectors checked, and then loading that into illustrator and saving as SVG

Lefthand

This worked for me, thanks! Specifically, for what I was working on, I was able to take a layer with vectors, right click -> Convert to Smart Object, right click -> Edit Contents, which opened in a new photoshop document tab, and then Save As... to an EPS. – Kataway

Answer 4

All answers were good, but for me they were too much, there is an online tool provided by Adobe:

http://adobe.com/go/extract_tryitnow_en

All you have to do is upload /drag & drop/ your .psd file, choose the path layer and download as svg. And you can extract the svg path, d attribute in particular.

Then what I did is put the path into a g element, then scaled g and translated the path

Piggery

Answer 5

For custom shapes, you may want to have a look at the recently released open-source script called Convert Custom Shapes File to SVG Set (for Photoshop CS3 or later), used to convert a custom shapes file (.csh) or a custom shapes preferences file (CustomShapes.psp) into a set of SVG files.

Garrygarson

This answer was extremely helpful to me! – Doxia