SVG export fails to produce wanted output

Processing Coding Questions
1

Hi,
I am trying to export an image drawn by my sketch as SVG. The export runs through, but the result is wrong.
Here is the output of the sketch in the render window:
tricycle_rgb
…and here is the exported image as rendered by both Inkscape and Vivaldi:

image
image595×526 39.4 KB

Now, the w3 validator passes the generated SVG document, with only the warning

Character encoding declared at document level

However, the rendered image is clearly different from what I expect and want.

Here is the code to draw the image:

void draw()
{
  beginRecord(SVG, "gankyil.svg");
  float R = 200;
  //clear();
  pushMatrix();
  translate(width/2, height/2);
  strokeWeight(5);
  for (int i = 0; i < 120; i++)
  {
    stroke(255, i*(255/120), i*(255/120));
    arc(-R/2, 0, R/2, R/2, 0, PI);
    rotate(TWO_PI/(1*360.0));
  }
  for (int i = 0; i < 120; i++)
  {
    stroke(i*(255/120), 255, i*(255/120));
    arc(-R/2, 0, R/2, R/2, 0, PI);
    rotate(TWO_PI/(1*360.0));
  }
  for (int i = 0; i < 120; i++)
  {
    stroke(i*(255/120), i*(255/120), 255);
    arc(-R/2, 0, R/2, R/2, 0, PI);
    rotate(TWO_PI/(1*360.0));
  }

  popMatrix();
 
  // Segment into three sections with very thick black lines.
  strokeWeight(8);
  stroke(0, 0, 0);
  ellipse(width/2, height/2, R, R);
  translate(width/2, height/2);
  arc(-R/2, 0, R/2, R/2, 0, PI);
  rotate(2*PI/3.0);
  arc(-R/2, 0, R/2, R/2, 0, PI);
  rotate(2*PI/3.0);
  arc(-R/2, 0, R/2, R/2, 0, PI);
  endRecord();
}

You can just run that to get the SVG - I tried adding it in code tags, but it’s too large.

Any ideas on where to look to fix this behavior? In Processing, or in the SVG library…?

2

What if you try setting ellipseMode( RADIUS ); and scale your radii appropriately. It would save you dividing by 2 everywhere.

Probably a bug in the SVG output that it doesn’t use ellipseMode setting correctly.

3

Ah, I actually do set ellipseMode(RADIUS). Here’s the init code:

void setup()
{
  size(600, 600);
  //colorMode(HSB, 360, 100, 100);
  background(255);
  ellipseMode(RADIUS);
  noFill();
  noLoop();
  //frame.setResizable(true);
}
4

Hmm. Then perhaps try NOT setting it – and again scale things appropriately.

Because it looks like the SVG output has half the radius you are expecting at least for the arcs, so it appears that the SVG exporter isn’t paying attention to the setting somewhere. You’ll just need to figure out what the SVG code thinks is going on and make your code match its expectations.

And then if you can figure it out, maybe file a bug.

5

Alright, I got it to work! I can’t upload the SVG due to the file filter on the forums, but you can see it at http://matiasw.github.io/tricycle/

Here’s the updated code:

import processing.svg.*;

void setup()
{
  size(600, 600);
  //colorMode(HSB, 360, 100, 100);
  background(255);
  ellipseMode(CENTER);
  noFill();
  noLoop();
  //frame.setResizable(true);
}
 
void draw()
{
  beginRecord(SVG, "gankyil.svg");
  float R = 200;
  //clear();
  pushMatrix();
  translate(width/2, height/2);
  strokeWeight(5);
  noFill();
  ellipseMode(RADIUS);
  for (int i = 0; i < 120; i++)
  {
    stroke(255, i*(255/120), i*(255/120));
    arc(-R/2, 0, R/2, R/2, 0, PI);
    rotate(TWO_PI/(1*360.0));
  }
  for (int i = 0; i < 120; i++)
  {
    stroke(i*(255/120), 255, i*(255/120));
    arc(-R/2, 0, R/2, R/2, 0, PI);
    rotate(TWO_PI/(1*360.0));
  }
  for (int i = 0; i < 120; i++)
  {
    stroke(i*(255/120), i*(255/120), 255);
    arc(-R/2, 0, R/2, R/2, 0, PI);
    rotate(TWO_PI/(1*360.0));
  }
  ellipseMode(CENTER);
  popMatrix();
 
  // Segment into three sections with very thick black lines.
  strokeWeight(8);
  noFill();
  stroke(0, 0, 0);
  ellipse(width/2, height/2, R*2, R*2);
  translate(width/2, height/2);
  arc(-R/2, 0, R, R, 0, PI);
  rotate(2*PI/3.0);
  arc(-R/2, 0, R, R, 0, PI);
  rotate(2*PI/3.0);
  arc(-R/2, 0, R, R, 0, PI);
  endRecord();
}

This leaves the question of why does ellipseMode have these effects? Please, someone look into whether, for example, the SVG lib has different modes or something. Clearly, it’s suboptimal to have the output SVG differ from what’s on the screen!