# SVG export fails to produce wanted output

**URL:** <https://discourse.processing.org/t/svg-export-fails-to-produce-wanted-output/42838>\
**Category:** Coding Questions\
**Created:** [September 26, 2023, 3:23pm UTC](https://discourse.processing.org/t/svg-export-fails-to-produce-wanted-output/42838 "2023-09-26T15:23:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![appas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/appas/32/18810_2.png) [@appas](https://discourse.processing.org/u/appas)\
**Post date:** [September 26, 2023, 3:23pm UTC](https://discourse.processing.org/t/svg-export-fails-to-produce-wanted-output/42838/1 "2023-09-26T15:23:48Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/e/0e4b5a83b00c2fa0d5dba56aac9324a1559198ff.png)  
…and here is the exported image as rendered by both Inkscape and Vivaldi:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/5/f5e1c8111d8a88f141599ff82f486141c3cbdf8a.png)

Now, the [w3 validator](https://validator.w3.org/check) 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:

```auto
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…?

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [September 26, 2023, 3:27pm UTC](https://discourse.processing.org/t/svg-export-fails-to-produce-wanted-output/42838/2 "2023-09-26T15:27:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![appas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/appas/32/18810_2.png) [@appas](https://discourse.processing.org/u/appas)\
**Post date:** [September 26, 2023, 3:53pm UTC](https://discourse.processing.org/t/svg-export-fails-to-produce-wanted-output/42838/3 "2023-09-26T15:53:48Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [September 26, 2023, 5:09pm UTC](https://discourse.processing.org/t/svg-export-fails-to-produce-wanted-output/42838/4 "2023-09-26T17:09:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![appas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/appas/32/18810_2.png) [@appas](https://discourse.processing.org/u/appas)\
**Post date:** [September 26, 2023, 5:42pm UTC](https://discourse.processing.org/t/svg-export-fails-to-produce-wanted-output/42838/5 "2023-09-26T17:42:42Z")

</div>

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/](http://matiasw.github.io/tricycle/)

Here’s the updated code:

```auto
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!