5 Replies Latest reply on Mar 9, 2018 8:43 PM by JJMack

    Chuck Uebele a favor please

    JJMack Most Valuable Participant

      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>

        • 1. Re: Chuck Uebele a favor please
          Tom Winkelmann Level 2

          Take a closer look at the SVG format...

           

          Paths – SVG 1.1 (Second Edition)

          • 2. Re: Chuck Uebele a favor please
            Chuck Uebele Adobe Community Professional & MVP

            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.

            • 3. Re: Chuck Uebele a favor please
              JJMack Most Valuable Participant

              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.  

              • 4. Re: Chuck Uebele a favor please
                r-bin Level 5

                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");
                
                • 5. Re: Chuck Uebele a favor please
                  JJMack Most Valuable Participant

                  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.