PS scripting: getting all path points that are visible in the layer but not in PathItem.pathPoints

[Pomax]

I wrote a simple paths-to-svg-document script a while back (Converting Photoshop paths to SVG) which iterates through activeDoc.pathItems[].pathPoints, but someone filed an interesting "bug" for it: it doesn't work for the attached .psd file

According to Photoshop there is a path with 20 points:

But according to the scripting API, there are only 4 points in the path. How do I get the _actual_ path shape here for SVG generation?

[Chuck Uebele]

I think this is either a bug, or a feature that was never developed properly. You have never been able to select separate subpaths within Photoshop, only the first one of the array of paths. I've run into this with some scripts that I wanted to write and had to use IA to break down the compound paths and then put the data into an XML file, which I then used to recreate in PS as separate pathItems.

[Pomax]

That part I have zero problems with - I can process as many paths as I want, with as many subpaths as I want. But this particular file has something... weird, going on. For example, if I make a new file, with two path layers, with three subpaths in the first layer and four subpaths in the second layer, then my script deals with that just fine.

Define the paths:

Start the script with "alert" code to report on what it's doing: it sees two paths

It sees that the first layer has 3 subpaths:

It also sees the second layer has 4 subpaths

And then saving it as temp.svg yields exactly what one would expect:

This is _very_ different from what it does with the attachment in the first post. Somehow, that has one path, with one subpath of four points, instead of five subpaths of four points each, or one subpath with 20 points.

[Chuck Uebele]

I tried a new file also, and was able to get the proper number of subpaths. What I noticed about the file you first posted was that the separate file paths have been merged, which seems to mess things up. I took a new file made several paths, and was able to read all the subpaths and points, but once I used "Merge Shape Componets" I was not able to do so. There seems to be some bug with that.

[JJMack]

I can not tell why your script converts  your path you posted the way it does.  All I know it seems to process all the Path in the path palette not just the active path.  It also does not process closed path correctly. All close paths are added to the svg combine with shape. subtract, intersect and exclude do not convert correctly.

 

[Pomax]

The fill was caused by a missing `fill-rule` on the path objects, adding a `fill-rule="evenodd"` should have sorted that part out (I've updated the script on github), but that leaves the original problem: there's a shape that PS renders as five blocks of four coordinates, but the scripting API is unable to properly report what the human is looking at.

Hopefully I'm just missing something obvious, but from what I can tell, no one provisioned the API such that dealing with whatever this resultant-shape is, is even possible

[Pomax]

Also note that all paths are simply filled and stroked in black, so just because it looks like a giant single shape, that doesn't mean it is. The script was written purely as path exporter, so it simply makes no attempts to figure out which colors you used. However, it does generate distinct <path> elements so if I load your SVG file in a browser and update the path fill colors to be distinct colors, the result is this:

[JJMack]

Some tin in the past I purchased a Photoshop extension call "SVG Layers" the extension can import AI SVG  files into Photoshop in vector shape layer and pixel layers. Not all SVG features are supported.  The Exension can also export a Photoshop Document as a SVG vector file.   The reason I write this is the extension seem to be implemented via Photoshop Scripting.  However its saved as a jsxbin file.  I do not usually install Photoshop script save in binary for I can not read what they do and I do not convert the to a readable format foe the author want to keep their source private.  In the case I installed the extension for I paid a few dollars for it.

The Code is slow for it a Script but it seen to work correctly for what it does.  So  running you script on my BirdShapes PSD sort of save a SVG file for my Bird and SVG Layer scripts can also export a SVG file for my Bird Shapes. I will now post links to the two saved SVG files so you can see how well SVG Layer scripting works.

Your birdshapes Conversion

Svg Layers birdshapes Conversion

[Pomax]

Cool, but that's starting to become tangential to the original question about scripting for PS... there's a shape in a psd file that is attached to the original post which shows off the problem I'm asking about: opening that psd file shows you a shape consisting of five "rectangles" made up of four points each in photoshop (as per the screenshot in that first post), but the scripting API reports there are only four points in total, in one subpath, contained as a single path.

Since you have that paid SVG plugin, can you see what it does with the pds file attached to the original post? Does it generate the full set of five shapes, or does it also only generate one?

[JJMack]

OK let get back the the original and I still do not know why you get those results. You script has additional problems.  Your Script and Svg Layers scripts process path in the document in Photoshop.  So lets compare the two with your odd path psd. The problem is SVG Layers saved SVG will not render any Pixels for your PSD other than a white image layer only that and a Path will be in the SVG.  This is what SVG Layers saved.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="555" height="527" viewBox="0 0 555 527">
<path id="Layer-1" d="M-0.000,-0.000 L555.000,-0.000 L555.000,527.000 L-0.000,527.000 L-0.000,-0.000 z" fill="#FFFFFF" />
</svg>

So with your path active I added a solid fill red layer which is added as your Paths shape layer.  So now the psd has one path in the path palette and two layers in the layers palette.  I will now run both scripts.

Your pathtosvg odd SVG with bad path odd pathtosvg 

SVG Layers good SVG odd-path-svglayers 

as xml

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="555" height="527" viewBox="0 0 555 527">
<path id="Layer-1" d="M-0.000,-0.000 L555.000,-0.000 L555.000,527.000 L-0.000,527.000 L-0.000,-0.000 z" fill="#FFFFFF" />
<path id="Color-Fill-1" d="M309.550,429.024 C309.550,429.024 293.943,483.087 289.000,510.000 C200.037,509.973 91.966,509.998 17.000,510.000 C21.335,484.591 28.924,457.257 38.856,428.917 C38.856,428.917 309.550,429.024 309.550,429.024 zM158.185,185.995 L208.452,105.059 L476.129,105.032 C476.129,105.032 441.937,156.362 423.992,186.088 C423.992,186.088 158.185,185.995 158.185,185.995 zM494.247,78.996 L554.000,-0.000 L280.000,-0.000 L225.579,78.885 L494.247,78.996 zM97.157,295.980 C97.157,295.980 126.151,241.197 141.162,215.089 C141.162,215.089 406.976,214.963 406.976,214.963 C406.976,214.963 377.541,267.906 363.772,296.063 C363.772,296.063 97.157,295.980 97.157,295.980 zM48.532,402.831 C48.532,402.831 71.319,348.424 84.665,321.017 C84.665,321.017 351.858,321.157 351.858,321.157 C351.858,321.157 328.178,375.340 318.304,403.085 C318.304,403.085 48.532,402.831 48.532,402.831 z" fill="#FF0000" />
</svg>

I have an other document that has a single shape layer that has three closed sub paths not all are combine].  Your Script does not process that shape layers vector paths correctly nor would it process the path correctly if I saved the vector path in the Path palette and deleted the Shape layer so just the path is in the paths palette.

Your Path To SVG conversion Shape

<svg xmlns="http://www.w3.org/2000/svg" width="371" height="371" viewBox="145 65 371 325">
<path fill="black" stroke="black" d="M 331 133 C 433 133 516 191 516 262 C 516 332 433 390 331 390 C 228 390 145 332 145 262 C 145 191 228 133 331 133 zM 331 197 C 379 197 418 221 418 250 C 418 279 379 303 331 303 C 282 303 243 279 243 250 C 243 221 282 197 331 197 zM 342 65 C 361 65 376 110 376 166 C 376 222 361 267 342 267 C 322 267 307 222 307 166 C 307 110 322 65 342 65 z"/>
</svg>

Svg Lauers ShapeSvgLayers 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="500" viewBox="0 0 700 500">
<g id="Ellipse-1" >
<path id="Ellipse-1-fill" d="M516.000,261.500 C516.000,332.469 432.949,390.000 330.500,390.000 C228.051,390.000 145.000,332.469 145.000,261.500 C145.000,195.619 216.574,141.328 308.792,133.881 C307.636,143.974 307.000,154.767 307.000,166.000 C307.000,177.426 307.658,188.396 308.852,198.638 C270.999,204.474 243.000,225.255 243.000,250.000 C243.000,279.271 282.175,303.000 330.500,303.000 C378.825,303.000 418.000,279.271 418.000,250.000 C418.000,230.195 400.054,212.940 373.487,203.842 C375.102,192.152 376.000,179.386 376.000,166.000 C376.000,155.790 375.478,145.939 374.515,136.649 C455.715,150.339 516.000,201.038 516.000,261.500 zM308.792,133.881 C313.377,93.853 326.283,65.000 341.500,65.000 C357.066,65.000 370.220,95.186 374.515,136.649 C360.405,134.270 345.668,133.000 330.500,133.000 C323.155,133.000 315.914,133.305 308.792,133.881 zM373.487,203.842 C368.371,240.868 355.981,267.000 341.500,267.000 C326.349,267.000 313.489,238.396 308.852,198.638 C315.776,197.570 323.028,197.000 330.500,197.000 C346.129,197.000 360.788,199.494 373.487,203.842 z" fill="#FF0000" />
<path id="Ellipse-1-stroke" d="M514.100,261.102 C514.100,331.241 431.899,388.100 330.500,388.100 C229.101,388.100 146.900,331.241 146.900,261.102 C146.900,195.992 217.741,142.336 309.014,134.975 C307.870,144.951 307.241,155.617 307.241,166.719 C307.241,178.011 307.891,188.853 309.074,198.975 C271.608,204.743 243.896,225.281 243.896,249.737 C243.896,278.666 282.670,302.117 330.500,302.117 C378.330,302.117 417.104,278.666 417.104,249.737 C417.104,230.164 399.342,213.110 373.047,204.119 C374.646,192.565 375.534,179.949 375.534,166.719 C375.534,156.628 375.017,146.893 374.064,137.712 C454.432,151.241 514.100,201.348 514.100,261.102 zM309.014,134.975 C313.552,95.416 326.327,66.900 341.387,66.900 C356.794,66.900 369.813,96.733 374.064,137.712 C360.098,135.360 345.512,134.105 330.500,134.105 C323.230,134.105 316.064,134.407 309.014,134.975 zM373.047,204.119 C367.983,240.711 355.720,266.538 341.387,266.538 C326.392,266.538 313.663,238.268 309.074,198.975 C315.927,197.920 323.104,197.357 330.500,197.357 C345.969,197.357 360.478,199.821 373.047,204.119 z" fill="none" stroke="#000000" stroke-width="4" />
</g>
</svg>

[Pomax]

I'm struggling to understand the actual text you wrote; can you please rephrase it to explain what CC Scripting objects and/or data types I need to start accessing? Right now, you're pointing out that my script doesn't work by explaining how it's failing from a user perspective, but that doesn't help me fix the actual problem. To do that, I need to know how it's failing from a programming perspective.

As much as I appreciate you taking the time to respond, I'm having a very hard time understanding how to turn your responses into code improvements.

I'm also trying to understand that first paragraph, but I'm not sure I do, it feels like a lot of the punctuation and words are missing and I don't understand the resulting text. As reminder, the file from the first post is not my file, it is a PSD contributed to me by someone and I have no idea how they made it, so all I have to go on is what the CC scripting engine lets me query: in addition to accessing PathItems, do you know what else I should be accessing/processing in order to get the full path that PS displays?

[JJMack]

I only hack at Photoshop Scripts.  I actually don't know JacsScript of Adobe Photoshop Scripting DON and Action Manager code. Before I retired some 18 years ago I was a Programmer. So I know a little about programing and my Photoshop knowledge is good I used over 20 years.  So I hack at some thing I want to do like stave off senility.  I saw that you code always add a black fill and stroke but it also does not process the  close path types the Fill therefore is incorrect.  All the Paths in my bird are combine. My single shape layer has  three Oval closed paths the first new fill oval second subtract third exclude.  The SVG fill is bad. 

[Pomax]

Can you try that plugin with the PSD file attached to the first post? I'd be curious to know whether it sees 5 shapes comprising 20 points, or whether it also only sees one path with one subpath with 4 points and nothing else.

[r-bin]

In the DOM model, there is a division into PathItems-> SubPathItems-> pathPoints

Realistically (and in the AM version) everything is more complicated

There are Paths (PathItems) -> pathComponents (SubPathItems) -> subpathListKey-> points (pathPoints).

Missed subpathListKey element. DOM believes that he is always alone.

Creating such a situation can be very simple.
It is enough to remove several points from pathComponent (SubPathItem), i.e. split it into two or more unconnected segments, which can then be turned into self-contained closed parts (but this is not necessary).

In the DOM version it is necessary to make the concept of something like SubSubPathItems.

You can get all the pathpoints using the AM code.

If your path is a shape (vector mask of the fill layer) and you use Photoshop CC,
you can take advantage of this

Extract SVG vector from PSD file

[JJMack]

The action manager code does not always return the fill correctly for gradient fill and pattern fill shape layers the svg path fill returned is set to a solid black.  I wrapped a  SVG xml tag around the Action Manager code r-bin posted, and hacked your writeToFile function to save to the desktop so documents need not be saved first to test shape layers. So I added a Shape to your  posted odd-path.psd using the path and tested the action manager code. The action manager code return the correct SVG path data for the shape layer made with you odd-path. Stroke, color fill and no fill also were correct. Pattern fill and gradient fill become Black Solid fills though.

var orig_ruler_units = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;	// Set the ruler units to PIXELS
var width = app.activeDocument.width.value;
var height = app.activeDocument.height.value;
// R-bin  AM Code
var layer = app.activeDocument.activeLayer;
var r = new ActionReference();
r.putProperty(stringIDToTypeID("property"), stringIDToTypeID("layerSVGdata"));
r.putIdentifier(stringIDToTypeID("layer"), layer.id);
var svg = executeActionGet(r).getString(stringIDToTypeID("layerSVGdata"));  
//alert(svg);

var SVGimage = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="' 
+ width + '" height="' + height + '" viewBox="0 0 ' + width + ' ' + height + '">\n'
+ svg + '\n</svg>';
writeToFile(SVGimage);

app.preferences.rulerUnits = orig_ruler_units;	// Reset units to original settings

// filewrite function
function writeToFile(data) {
  var path ='~/Desktop/';
  var dir = Folder(path);
  var file = dir.saveDlg('', '.svg', true);
  if (!file) return false;

  var mode = 'w';
  file.open(mode);
  file.write(data);
  file.close(mode);
  return file.toString();
}

Photoshop Export As SVG will export SVG with Gradient fill and Pattern fill birdshapes to SVG 

However, I do not see any Paths for the gradent fill or pattern fills in the SVG file I do see  images for the two patten fills in the file.  I do not know what AI would do.] I do not install AI.