Get a vector path from Photoshop to Inkscape or SVG

Question

I need to extract vector paths from Photoshop into SVG format (or anything else Inkscape can use).

I don't have Illustrator, and buying it just to convert file formats seems silly.

So how can I get paths out of Photoshop into SVG?

If needed, I could write some code to manipulate files directly, but I'm not even sure where to begin to get the paths out.

Answer 1

I realize this is a 2012 question... but in 2018....

Export as SVG from Photoshop.. the paths will be there.

There may be a bunch of raster fills you'll need to remove, but the paths will all be there.

Answer 2

EDIT:

This tutorial seems to work, it's for Mac but you can probably replace the intermediate steps for Win.

---

I haven't try them myself, but these are some resources that might help you:

• SVG Kit 2.0.1 for Adobe Photoshop and Adobe Photoshop Elements - Fully functional free trial

• SVG Import/Export Converter 1.6.7 - Doesn't specify PSD, but it seems free and open so worth a try.

• There is also a Github project called psd.js, but apparently it has been "transferred" to twitpic. The zip file is here.

• And this Image Converter seems tp have PSD and SVG in the list.

If any of them help or you find an alternative way, post it for future reference :)

Answer 3

GIMP can do this. Open the .psd and go to the paths tab, there right click on any path and there is an export option.

Answer 4

Photoshop can export a SVG like @Scott mentioned. However, this may or may not be a good move for your workflow as you might need to find the path from a very large list of stuff. It is also possible to read the path info with a script, in addition to allowing you to select what to export this also allows you to customize the exporter and it works on even older versions of PS.

Since i have already done this here, so i am going tp just paste it verbatim here:

// jooExportSVGScaffold.jsx
#target photoshop

main();

function ppos(point){
    return ""+point[0]+" "+point[1] 
}


function handlePath(path) {
    var out = "";    
    var pnts = path.pathPoints;

    var ipos = pnts[0].anchor;

    var pos = pnts[0].leftDirection;
    var pos2, pos3;
    out="M"+ppos(ipos);
    for (var p=1; p<pnts.length; p++){
       pos2 = pnts[p].rightDirection;
       pos3 = pnts[p].anchor;
       out += "C"+ppos(pos)+" "+ppos(pos2)+" "+ppos(pos3);
       pos = pnts[p].leftDirection;
    }
    if (path.closed){
        pos2 = pnts[0].rightDirection;
        pos3 = pnts[0].anchor;
        out += "C"+ppos(pos)+" "+ppos(pos2)+" "+ppos(pos3)+"Z";
    }
    return out;
}

function main() {
    var sel = app.activeDocument.selection; 
    var file = File.saveDialog('save svg path', 'SVGPath:*.svg');

    file.open('w');

    file.writeln('<?xml version="1.0" encoding="utf-8"?>');
    file.writeln('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">');
    file.writeln('<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"');
    file.writeln('width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">');


    var doc = app.activeDocument;
    var paths = doc.pathItems;

    for (var i=0; i<paths.length; i++){
        var subpaths = paths[i].subPathItems;

        for (var j=0; j<subpaths.length; j++){
            data=handlePath(subpaths[j]);  
            file.writeln('<path fill="none" stroke="black" d="'+data+'"/>');
        }
    }
    file.writeln('</svg>'); 
    file.close();
}

You may change the script as you see fit. Such as, instead of writing to file show it in a textbox or copy to clipboard, put a Id based on path name etc. I don't know its your workflow after all.

Answer 5

Maybe it's not necessary to save as SVG to open the paths in Inkscape. Photoshop/File/Export/Paths to Illustrator... Dialog asks you which one you want to export, and then you can open AI file in Inkscape.