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

Processing Coding Questions
1

After updating to Processing 4.4.3 yesterday (necessary to be able to run via command line on a mac) I’m finding that SVG exports have a tag transform="scale(2,2)" that results in the SVG contents scaling up and the bounding box remaining the correct size, so I only get a quarter of my SVG in the bounding box. While the content is technically still in the SVG, this is causing problems for previewing and managing files with vpype, a tool I use for pen plotting.

Here is a simple test sketch:

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

And this is the resulting SVG

<?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
>

Screenshot 2025-05-08 at 9.10.37 AM
Screenshot 2025-05-08 at 9.10.37 AM868×468 12.1 KB

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
3

@glv I agree, thank you for responding before I had the chance :blue_heart:

2 Likes
4

Here is the issue labelling why that this is broken pixelDensity(2) with SVG creates incorrect viewport in the file · Issue #693 · processing/processing4 · GitHub I’ve added some more labels to hopefully move this forward.

Current workaround

pixelDensity(1) in the setup() function to force Processing to render at low-dpi scaling.

2 Likes