can I use an SVG path file ?

[stephanschulz]

My embroidery machine has a bunch of fonts build in and I am able to save on-machine designs as .JEF to my USBV stick. I then used this tool to convert them to SVG: http://svg2embr.wasbo.net/index.php?page=step2 This enabled me to open them in Adobe Illustrator to verify that the paths are correct. (This step is not really needed)

I am now wondering if the "PEmbroider_svg_image" example code can be adapted to simply follow the existing path stored in the SVG? Tis goal is to use P5 to combine multiple such letters. These letters are nice because they already have the proper stitch order and create very clean words. Here a screenshot of the SVG in illustrator and the output of P5

Thanks for your advice.

[golanlevin]

Hi @stephanschulz — your idea of loading up machine-made paths stored in SVGs is a good one. The quick answer is that what you want to do is possible, but doing so requires a different workflow. Currently you have a (very reasonable, but) mistaken understanding of how PEmbroider handles SVGs.

You may have seen our SVG example. What's going on here is that the SVG duck is treated as a fillable shape, which is then hatched. What's going on in the backend (@LingDong- , correct me if I'm wrong) is that the duck is being rasterized as a blob and then hatched as normal.

@stephanschulz, to do what you would want to do, you would do the following:

• Don't load the SVG into Processing using loadShape()
• Instead, load the SVG into Processing as an XML file
• Find the XML child that represents the path you want to extract
• Feed the points from that path into PEmbroider, as a series of lines or stitches, as in the PEmbroider_lines_2 example.

hope this is helpful! Golan

[stephanschulz]

Thanks for the tip.

The main task here is to find a way to parse the path line commands. Here is a good link for what all those letters means: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Here path string from the SVG xml content:

M7,197l29,6l28,6H34l-30,1l20-3l20-3l20-3H34H4l20-4l20-4l20-5l-28,1l-29,1l26,2l27,2l8,20h1v-29l-5,29v-29  l-4,29v-29l-4,29v-29l-5,29v-29l-34,15L2,214v-29l4,29v-29l4,29v-29l5,29v-29l4,29v-29l4,29v-29l4,29v-29l5,29v-29l4,29v-29l4,29  v-29l4,29v-29l5,29v-29l4,29v-29l-8-17l10-6h1l17-2l-16-2l18-2l-16-2l17-1l-15-4h17l-16-4h18l-16-4h18l-16-4h17v12h27h26l-7-11l1-1  l-15,2l16,2l-15,1l16,3l-14,1l15,3l-14,1l15,3l-14,1l16,2l-15,2l16,2l-15,2l9-7l11,10h1l-2-32l-2,32l-2-32l-2,32l-2-32l-3,32l-1-32  l-3,32l-1-32l-3,32l-1-32l-3,32l-1-32l-3,32l-1-32l-3,32l-1-32l-3,32l-1-32l-3,32l-1-32l-3,32l-1-32l-3,32l-1-32l-3,32l-1-32l-3,32  l-1-32l-3,32l-1-32l-4,32v-32l-4,32v-32l-4,32v-32l-4,32v-32l-4,32v-32l-4,32v-32l20-17l9-20l9-19l9-20l9-19L86,62l-8,19l-8,19  l-8,20l-8,19l-8,19l-8,19l13-2l0,0l-4,14v-14l-4,14l1-14l-6,14l2-14l-6,14l2-14l-6,14l2-14l-7,14l3-14l-7,14l-4-2l1-1h33l-31-3h33  l-31-4h33l-32-4h33l-31-3h33l-31-4h32l-30-4h32l-31-3h33l-31-4h32l-30-4h32l-30-3h32l-31-4h32l-30-3h32l-30-4h32l-30-4h31l-29-3h31  l-30-4h31l-29-4h31l-29-3h31l-29-4h30l-29-4h31l-29-3h31l-29-4h30l-28-4h30l-28-3h29l-28-4h30l-28-4h30l-28-3h29l-27-4h29l-28-4h30  l-28-3h29l-27-4h29l-27-4h29l-27-3h28l-27-4h29l-27-4h28l-26-3h28l-26-4h28l-27-4h28l-26-3h28l-26-4h28l5-10l13-10l6,22l6,21l7,21  l6,22l6,21l6,21l6,22l22,7l1-1l5,19l-10-19l6,19l-10-19l6,19l-10-19l6,19l-11-19l7,19l-11-19l7,19l-11-19l7,19l-12-19l7,19l-11-19  l7,19l-11-19l7,19l-12-19l8,19l-12-19l8,19l-13-19l9,19l-13-19l9,19l-13-19l8,19l4-20l5-21l4-21l-17,34l-7-19l-6-20l-7-19l-6-19  l-7-19l-7-19l16-17l27-19v-1l-16-3l17,6l-22-2l23,5l-27-2l28,5l-33-2l34,5l-39-2l40,5l-44-1l45,4l-50-1l51,4l-56-1l57,4l-61-1l62,3  H89l68,4H90l69,4H92l68,4H93l68,4H94l69,3H96l68,4H97l69,4H98l69,4h-67l68,4h-67l69,3h-68l69,4h-67l69,4h-68l69,4h-68l69,4h-67l69,3  h-68l69,4h-68l70,4h-68l69,4h-68l70,4h-69l70,3h-68l69,4h-68l70,4h-69l70,4h-68l70,3h-69l70,4h-69l70,4h-68l70,4h-69l70,4h-69l71,3  h-69l70,4h-69l70,4h-69l71,4h-69l70,4h-69l71,3h-69l70,4h-69l71,4h-70l71,4h-69l70,4h-69l71,3h-70l-8,4h22l22,1l22,1l21,1l-22,2  l-23,3l-23,2l-23,3h22h22h21h22l-20-2l-20-2l-21-2l-20-1l-10-14l0,0v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29  l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29v29l4-29  v29l4-29v29l4-29v29v-8v-6v6v8

[stephanschulz]

The ShapeVertices.pde example seems to be a good start.

/**
 * Shape Vertices. 
 * 
 * How to iterate over the vertices of a shape.
 * When loading an obj or SVG, getVertexCount() 
 * will typically return 0 since all the vertices 
 * are in the child shapes. 
 *
 * You should iterate through the children and then
 * iterate through their vertices.
 */

// The shape
PShape letter;
int count;

void setup() {
  size(640, 360);
  // Load the shape
  letter = loadShape("A_big.svg");
}

void draw() {
  background(51);
  // Center where we will draw all the vertices
  //translate(width/2 - letter.width/2, height/2- letter.height/2);
  translate(10, 0);
  // Iterate over the children
  int children = letter.getChildCount();

  PVector last_v;
  last_v = new PVector(0, 0);
  for (int i = 0; i < children; i++) {
    PShape child = letter.getChild(i);
    int total = child.getVertexCount();

    // Now we can actually get the vertices from each child
    for (int j = 0; j < total; j++) {
      PVector v = child.getVertex(j);
      // Cycling brightness for each vertex
      //stroke((frameCount + (i+1)*j) % 255);

      // Just a dot for each one

      if (count == j){
      stroke(255, 255, 0);
      strokeWeight(3);
      }else{
        stroke(127);
        strokeWeight(1);
      }
      if (j > 0) {
        line(last_v.x, last_v.y, v.x, v.y);
      }
      last_v = v;
    }
     // Now we can actually get the vertices from each child
    for (int j = 0; j < total; j++) {
      PVector v = child.getVertex(j);
      stroke(255);
      point(v.x, v.y);
    }

count = int( map(frameCount%2000,0,2000,0,total-1));
    //count++;
    //count %= total;

    text(count +"/"+total,10,10);
  }

}

[golanlevin]

Yes! Sorry, that was the example I was thinking of!!! I couldn't find shape.getChild() in the Processing reference so I mistakenly thought you had to parse it as an XML. You're doing it the right way!