Photoshop Custom Shape to SVG path string

Will Haynes picture Will Haynes · Mar 24, 2011 · Viewed 54.8k times · Source

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/

Answer

Tzach picture Tzach · Apr 28, 2014

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/