SVG Export Issue transform="scale(2,2)"

Processing Coding Questions
2

Hello @helaine.b,

It may be related to this:

This is what I get on my W10 PC and monitor with a displayDensity() of 1:

<?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="stroke-linecap:round; fill:white; stroke:white;"
    ><circle r="100" style="stroke:none;" cx="300" cy="300"
    /></g
    ><g style="stroke-linecap:round;"
    ><circle r="100" style="fill:none;" cx="300" cy="300"
    /></g
  ></g
></svg
>

This code on my PC gives the same result as you:

import processing.svg.*;
void setup() {
  size(600, 600);
}
void draw() {
  beginRecord(SVG, "test-circle.svg");
  scale(2, 2);  // Experiment with this!
  circle(width/2, height/2, width/3);
  endRecord();
  //exit();
}

Results in:

<?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:white; stroke-linecap:round; stroke:white;" transform="scale(2,2)"
    ><circle r="100" style="stroke:none;" cx="300" cy="300"
    /></g
    ><g style="stroke-linecap:round;" transform="scale(2,2)"
    ><circle r="100" style="fill:none;" cx="300" cy="300"
    /></g
  ></g
></svg
>

Try:
scale(0.5, 0.5);

Experiment with changing your pixelDensity() to 1 or 2

Reference:

I do not have a clear cut answer and just experimenting.

:)

1 Like