: Photoshop to SVG path? I'm working under the following constraints: I have Photoshop CS3 only I don't have a budget to buy anything I need to get a Photoshop shape converted into an SVG path.

@Annie732

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

Vote Up Vote Down

@Gail6891361

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).

Vote Up Vote Down