Copy link to clipboard
Copied
You seem to understand Photoshop Path items and can create path an stroke the with patterns. I saw you help someone here draw weather fronts.
I use a program that creates simple SVG files that only contain the SVG header information that has the document width and height and option to preserve aspect ratio. followed be a group transform information the contains a fill color. In the group the can be many Path. That is all the items in the XML file. The Paths I see in the data look strange to me. That is its not pairs of x and y points. It seems to be a sting of blank delimited values. Starting I believe with a Path Name or starting point like M10366 the blank delimited values for most are a numeric value or -value. However, some have a character prefix c or m and others have a suffix character z.
Photoshop cc2018 has no problem opening these SVG file as a single raster layer with transparency and place can create vector smart object for the files.
Ideally I would like to be able to get all the Path into Photoshop Path palette or path be added to Photoshop as filled shape layers.
Here is a sample xml file doe you have any idea of how one would add the path into a Photoshop Document?
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1280.000000pt" height="1024.000000pt" viewBox="0 0 1280.000000 1024.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
fill="#ff0000" stroke="none">
<path d="M10366 954 c-264 -52 -406 -162 -406 -311 0 -26 9 -67 20 -91 47
-105 203 -107 343 -5 26 19 45 29 42 21 -16 -45 -125 -414 -125 -425 0 -20 38
-16 44 5 101 338 228 759 242 805 5 15 -1 17 -43 16 -26 0 -79 -7 -117 -15z
m104 -31 c0 -19 -60 -204 -75 -233 -25 -48 -103 -120 -160 -146 -36 -17 -68
-24 -113 -24 -78 0 -107 23 -117 93 -21 140 103 243 363 297 104 22 102 22
102 13z"/>
</g>
</svg>
Copy link to clipboard
Copied
Take a closer look at the SVG format...
Copy link to clipboard
Copied
I'm not sure about SVG files, the link that Tom provided looks like a good start, but I'd really have to look at it to see if those values could be converted to normal PS path data.
Copy link to clipboard
Copied
I searched the web for a script to convert to a Photoshop path but could not find one. There is a Photoshop extension SVG Layers that seems to be able to import SVG Files into Photoshop as layers called SVG Layers that is $19 supports most of what can be is a SVG file. There is no trial version most likely done via scripting. For I found an old free version on the web but it does not import the simple svg I posted and its scripts are saved as jsxbin. Browsers can display the svg I posted Photoshop can open it as a raster layer and place can create a vector smart object layer no vectors in Photoshop. I may spend the $19 to see if the updated version can import the svg as paths or shape layers.
Copy link to clipboard
Copied
Maybe it will help.
You can play around with the "layerVectorPointData" and "layerSVGdata" properties. They can only be read. Create a Shape Layer with a mask of three points. Run the script. You see that the data collected from the points and from the layerVectorPointData are the same.
It remains to achieve a match with layerSVGdata, and also to find an inverse transformation algorithm. ))
var p = app.activeDocument.pathItems[0].subPathItems[0].pathPoints;
var ppp =
"M"+
p[0].anchor[0].toFixed(3) + "," +
p[0].anchor[1].toFixed(3) + " " +
"C"+p[0].leftDirection[0].toFixed(3) + "," +
p[0].leftDirection[1].toFixed(3) + " " +
p[1].rightDirection[0].toFixed(3) + "," +
p[1].rightDirection[1].toFixed(3) + " " +
p[1].anchor[0].toFixed(3) + "," +
p[1].anchor[1].toFixed(3) + " " +
"C"+p[1].leftDirection[0].toFixed(3) + "," +
p[1].leftDirection[1].toFixed(3) + " " +
p[2].rightDirection[0].toFixed(3) + "," +
p[2].rightDirection[1].toFixed(3) + " " +
p[2].anchor[0].toFixed(3) + "," +
p[2].anchor[1].toFixed(3) + " " +
"C"+p[2].leftDirection[0].toFixed(3) + "," +
p[2].leftDirection[1].toFixed(3) + " " +
p[0].rightDirection[0].toFixed(3) + "," +
p[0].rightDirection[1].toFixed(3) + " " +
p[0].anchor[0].toFixed(3) + "," +
p[0].anchor[1].toFixed(3) + " " +
"Z" +
"";
var r = new ActionReference();
r.putProperty(charIDToTypeID("Prpr"), stringIDToTypeID("layerVectorPointData"));
r.putEnumerated(charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt"));
var sss = executeActionGet(r).getString(stringIDToTypeID("layerVectorPointData"));
alert("Equal = " + (sss == ppp) + "\n\n\n" + sss + "\n\n" + ppp, "layerVectorPointData");
var r = new ActionReference();
r.putProperty(charIDToTypeID("Prpr"), stringIDToTypeID("layerSVGdata"));
r.putEnumerated(charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt"));
var svg = executeActionGet(r).getString(stringIDToTypeID("layerSVGdata"));
alert(svg, "layerSVGdata");
Copy link to clipboard
Copied
The problem is. There is no open document no layers no paths. I have generated SVG files they are XML files. Basic three record types <svg>, <g> and <path>. I want to read the xml text data parse the text and open a new document the correct size for the svg image in the XML size data:
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1280.000000pt" height="1024.000000pt" viewBox="0 0 1280.000000 1024.000000"
preserveAspectRatio="xMidYMid meet">
I then want to creat create shape layer with the correct fill color that is specified in the XML data for the group of path shapes. In the following case red fill.
<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
fill="#ff0000" stroke="none">
Create Shape layers for the Paths that are in the SVG XML data. They have syntax like this:
<path d="M10366 954 c-264 -52 -406 -162 -406 -311 0 -26 9 -67 20 -91 47
-105 203 -107 343 -5 26 19 45 29 42 21 -16 -45 -125 -414 -125 -425 0 -20 38
-16 44 5 101 338 228 759 242 805 5 15 -1 17 -43 16 -26 0 -79 -7 -117 -15z
m104 -31 c0 -19 -60 -204 -75 -233 -25 -48 -103 -120 -160 -146 -36 -17 -68
-24 -113 -24 -78 0 -107 23 -117 93 -21 140 103 243 363 297 104 22 102 22
102 13z"/>
I did a little reading about SVC 1.0 Path data Paths - SVG 1.0 - 20010904 However reading the XML SVG file and Parsing the xmp statement is beyond my skill level. The XML I see generated also appears to be a subset of what is possible in a path. All I see the is "M" absolute move to, "c" relative curve, "l" relative line and "z" close path.