Photoshop Custom Shape to SVG path string
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:
- Create a file named
generator.json
with the content below in your user home folder. - Restart Photoshop and open your PSD file.
- Activate the generator: File > Generate > Image Assets.
- Rename your layer to
<something>.svg
. - 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/
- Select and copy the path in Photoshop
- Launch Adobe Illustrator
- Create a new Document
- Paste
- 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.
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