SVG Shape End caps rendered wrong

[matiasw]

Description

In my code, I have set strokeCap(PROJECT); and strokeJoin(MITER); and then drawn a shape, which is a looping path. It renders correctly in Processing 4.3, but when saved as SVG with processing.svg and opened in Inkscape, it is shown incorrectly. Have a look at the images to see what I mean.

Expected Behavior

Processing - this is correct. Inkscape - this is wrong.

I am not sure if this is a Processing issue or an Inkscape one, so I am reporting it here, first.

Steps to Reproduce

1. Draw the infinity knot. Here is my code:

import processing.svg.*;

boolean record;

class Point {
 public float x, y;
 
 Point(float x, float y)
 {
   this.x = x;
   this.y = y;
 }
}

class LineSegment {
   PVector[] points;
}

class Knot {
   float d = 80;
   public final int points = 14;
   Point[] p = new Point[points];
   
   Knot()
   {
     p[0] = new Point(-4, 0);
     p[1] = new Point(-3, -1);
     p[2] = new Point(1, 3);
     p[3] = new Point(2, 2);
     p[4] = new Point(-2, -2);
     p[5] = new Point(-1, -3);
     p[6] = new Point(3, 1);
     p[7] = new Point(4, 0);
     p[8] = new Point(3, -1);
     p[9] = new Point(-1, 3);
     p[10] = new Point(-2, 2);
     p[11] = new Point(2, -2);
     p[12] = new Point(1, -3);
     p[13] = new Point(-3, 1);
   }
   
   Point getPoint(int i)
   {
     return new Point(p[i].x * d, p[i].y * d);
   }
}

PImage bg;

PVector intersection (float x1, float x2, float x3, float x4, float y1, float y2, float y3, float y4)
{
  float uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
  float uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));  
  return new PVector(uA, uB); 
}

void setup()
{
  fullScreen();
  strokeCap(PROJECT);
}

void draw()
{
   if (record) {
   // Note that #### will be replaced with the frame number. Fancy!
     beginRecord(SVG, "frame-####.svg");
   }
   Knot k = new Knot();
   translate(width/2, height/2);
   noFill();
   strokeWeight(45);
   stroke(0);
   strokeJoin(MITER);
   beginShape();
   for (int i = 0; i < k.points; i++) {
     vertex(k.getPoint(i).x, k.getPoint(i).y); 
   }
   vertex(k.getPoint(0).x, k.getPoint(0).y);
   endShape();
   if (record) {
    endRecord();
    record = false;
  }
}

// Use a keypress so thousands of files aren't created
void mousePressed() {
  record = true;
}

2. Click the mouse to save as SVG.
3. Open the SVG in Inkscape 1.3.

Your Environment

• Processing version: 4.3
• Operating System and OS version: Windows 11 22H2

Possible Causes / Solutions

Maybe the problem is in the Batik library, which I understand Processing uses, but I thought I'd start downstream before escalating. It could also be with Inkscape, in the way that they open the resulting file. If it is, however, then it is also in whatever Vivaldi uses for SVG handling, as it's rendered with the rounded (incorrect) cap join in my browser as well. Here is the file as saved from Processing:

[behreajj]

I moved strokeCap(PROJECT); out of setup and into the same spot in your code as strokeJoin(MITER);. That changed the result. Inkscape has an XML Editor where you can inspect the SVG's code. Code editors also have SVG extensions.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
          'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; text-rendering:auto; stroke:black; stroke-linecap:square; stroke-miterlimit:10; shape-rendering:auto; stroke-opacity:1; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:'Dialog'; font-style:normal; stroke-linejoin:miter; font-size:12px; stroke-dashoffset:0; image-rendering:auto;" width="1366" height="768" xmlns="http://www.w3.org/2000/svg"
><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
  /><g
  ><g style="stroke-linecap:round; stroke-width:45;" transform="translate(683,384)"
    ><path style="fill:none;" d="M-320 0 L-240 -80 L80 240 L160 160 L-160 -160 L-80 -240 L240 80 L320 0 L240 -80 L-80 240 L-160 160 L160 -160 L80 -240 L-240 80 L-320 0"
    /></g
  ></g
></svg
>

Based on the markup generated by your original, it looks to me like Vivaldi and Inkscape are rendering the SVG correctly. The group's style attribute, with a round line cap, overrides the SVG's style attribute.

[matiasw]

Ah alright; I didn't think to try that. So, it seems to confirm that it's a Processing issue.

As for my use case, I already fixed it in Inkscape. This is the resulting knot, after applying the Inkscape Knot Live Path Effect:

Just thought you might like to see that. Thank you for the help!