vectorsvgraphaelphotoshop

Photoshop Custom Shape to SVG path string


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/


Solution

  • 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/