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/


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/

When Photoshop opens a SVG file you can have Photoshop scale it to some size you want. Photoshop will scale the SVG file to a raster layer that size no paths, vector mask or anything resembling a vector will be in the document opened. If you have Photoshop export out a SVG file the file will not contain path or any vector graphics as far as I know.


  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.

Please refer to the Photoshop Custom Shapes File Format document for detailed information about the structure of a custom shapes file. The SVG files use the same format than the SVG code generated by the script Get SVG Code from Path.


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

I need to get a Photoshop shape converted into an SVG path. How can I export or save from Photoshop CS3, and convert the shapes within to SVG paths, for use like this: <path d="M10 10 H 90 V 90 H 10 L 10 10" />


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

We’ll need to create the paths from the image, fill it with color and convert it to shape before we can export it as SVG. Let’s Start! 1) Open the image in Photoshop and use quick selection tool to select all the black area. 2) Once selected, right click and select “Make Work Path…”


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.

à partir de Photoshop 14.2 CC, vous pouvez créer des fichiers SVG directement à partir de Photoshop: Créer un fichier nommé generator.json avec le contenu ci-dessous dans votre dossier utilisateur. redémarrez Photoshop et ouvrez votre fichier PSD. activez le générateur: File > Generate > Image Assets. renommez votre calque en <something


No need to buy or install Photoshop. Open and export assets from layered Photoshop designs on macOS, Windows, Linux or in the browser with Avocode. Just double click on a single vector shape layer or select multiple layers with the SHIFT key and press EXPORT, set image format as SVG and press Export again. Export images from PSD without Photoshop


With your selection made go to the paths panel and click on the symbol at the bottom to make path from selection Then go to menu Edit > Define Custom Shape. In the dialogue, name your shape It is now available to use as a custom shape


Open a new Photoshop document and select the “Custom Shape Tool.” (under the rectangle tool popout menu) Select which custom shape you want to create: If you don't see a shape you are looking for, you can load more of Photoshops Default Custom Shape Libraries, and look around. Or you can download and install your own as I mentioned earlier.