2

I'm working under the following constraints:

  1. I have Photoshop CS3 only
  2. I don't have a budget to buy anything

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

  • Sorry, there is not much to work with. My suggestion was to use Illustrator, but since you do not have it, you may have to get yourself an InkScape (it's free) and just have to trace each of your paths anew - after you have exported them out of your Photoshop with fills or strokes applied in separate image files. – Silly-V Feb 21 '17 at 16:10
1

This open-source script for Photoshop CS3 or later will convert the currently selected path to SVG code and display it in a dialog text field where you can either save it to a file or copy all or part of it to the clipboard:

Get SVG Code from Path

2

I adapted the script I had posted here for illustrator to iterate over all paths in paths panel (but not layer bound masks sorry you need to iterate those separately).

// 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();
}

This should work in CS3 but i haven't tested. Put script in a file with jsx ending and either execute in extendscript toolkit or drag the text file into the toolbar of Photoshop to execute. (do not drag on top of document).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.