Writing a rotate() to PGraphics for SVG output seems to convert to degrees

Processing
1

I have exported a drawing that I create on a PGraphics object for SVG like this:

  p = createGraphics((int)drawingSize.x, (int)drawingSize.y, SVG, filename + ".svg");
  p.beginDraw();
  float angleIncrement = TAU/lineCount;
  
  for (float a=0; a<=angleRange; a+=angleIncrement) 
  {
    p.pushMatrix();
    p.translate(middlePoint.x-200, middlePoint.y-50);
    p.rotate(a);
....
    p.popMatrix();

If I load the resulting SVG into InkScape, it looks fine. However, when I load the SVG into processing using a Shape, the drawing is distorted.

  p = loadShape("2020-07-26 20.16.27.svg");
  shape(p, 0, 0);

loaded in inkscape

loaded in processing
loaded in processing1055Ă—732 231 KB

If I open the svg into a texteditor, I can see that the transform attribute has both the translate and the rotate but the value it writes to the rotate seems way off:

<?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="600" height="600" xmlns="http://www.w3.org/2000/svg"
><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
  /><g
  ><g style="fill:rgb(94,83,74); stroke-width:0.8; stroke-linecap:round; stroke:rgb(94,83,74);" transform="translate(500,350)"
    ><path style="fill:none;" d="M-7 -123 L-123 -3 L-49 122 L97 162 L153 76 L212 -106 L185 -230 L-21 -253 L-213 -200 L-235 70"
    /></g
    ><g style="fill:rgb(17,112,207); stroke-width:0.8; stroke-linecap:round; stroke:rgb(17,112,207);" transform="translate(500,350) rotate(2.9032)"
    ><path style="fill:none;" d="M-7 -123 C-26.3333 -103 -116 -43.8333 -123 -3 C-130 37.8333 -85.6667 94.5 -49 122 C-12.3333 149.5 63.3333 169.6667 97 162 C130.6667 154.3333 133.8333 120.6667 153 76 C172.1667 31.3333 206.6667 -55 212 -106 C217.3333 -157 223.8333 -205.5 185 -230 C146.1667 -254.5 45.3333 -258 -21 -253 C-87.3333 -248 -177.3333 -253.8333 -213 -200 C-248.6667 -146.1667 -231.3333 25 -235 70"
    /></g
    ><g style="fill:rgb(94,83,74); stroke-width:0.8; stroke-linecap:round; stroke:rgb(94,83,74);" transform="translate(500,350) rotate(5.8065)"
    ><path style="fill:none;" d="M-7 -123 C-26.3333 -103 -116 -43.8333 -123 -3 C-130 37.8333 -85.6667 94.5 -49 122 C-12.3333 149.5 63.3333 169.6667 97 162 C130.6667 154.3333 133.8333 120.6667 153 76 C172.1667 31.3333 206.6667 -55 212 -106 C217.3333 -157 223.8333 -205.5 185 -230 C146.1667 -254.5 45.3333 -258 -21 -253 C-87.3333 -248 -177.3333 -253.8333 -213 -200 C-248.6667 -146.1667 -231.3333 25 -235 70"
    /></g
    ><g style="fill:rgb(17,112,207); stroke-width:0.8; stroke-linecap:round; stroke:rgb(17,112,207);" transform="translate(500,350) rotate(8.7097)"
    ><path style="fill:none;" d="M-7 -123 L-123 -3 L-49 122 L97 162 L153 76 L212 -106 L185 -230 L-21 -253 L-213 -200 L-235 70"
    />

It looks as though the SVG export of the PGraphics convertes all the rotate command’s parameters to degrees. Does anyone know what happens here and how to fix the issue? Thanks!!

2

Hello,

Run this code with the background() before and after the rotate and look at the outputs:

import processing.svg.*;

PShape p;
PGraphics svg; 

void setup()
  {
  size(300, 300);  
  svg = createGraphics(300, 300, SVG, "output.svg");
  svg.beginDraw();
  //svg.background(255);
  svg.rotate(TAU/8);
  svg.background(255);
  svg.line(0, 0, 300, 0);
  svg.dispose();
  svg.endDraw();

  p = loadShape("output.svg");
  noLoop();
  }
  
void draw()
  {
  shape(p, 0, 0);
  }

Before:

><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
  /><g
  ><g style="stroke-linecap:round; fill:white; stroke:white;"
    ><rect x="0" width="300" height="300" y="0" style="stroke:none;"
    /></g
    ><g style="stroke-linecap:round;" transform="rotate(45)"
    ><line y2="0" style="fill:none;" x1="0" x2="300" y1="0"
    /></g
  ></g
></svg
>

After:

><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
  /><g
  ><g style="stroke-linecap:round; fill:white; stroke:white;"
    ><rect x="0" width="300" height="300" y="0" style="stroke:none;"
    /></g
    ><g style="stroke-linecap:round;" transform="matrix(0.7071,0.7071,-0.7071,0.7071,0,0)"
    ><line y2="0" style="fill:none;" x1="0" x2="300" y1="0"
    /></g
  ></g
></svg

Just an observation…

:)

1 Like
3

Thanks!
That’s… interesting… it doesn’t export a rotate command but a matrix transformation…
I’ll try this later to see if it solves my issue. My current solution is to simultaneoulsy perform all the vertex and curveVertex commands on another PGraphics object that I then save to png. It works but feels a bit silly.

1 Like
4

I was also opening the exported svg file with Chrome alongside viewing the Processing output. The “after” version displayed as expected.

:)