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

**URL:** <https://discourse.processing.org/t/svg-export-issue-transform-scale-2-2/46350>\
**Category:** Coding Questions\
**Created:** [May 8, 2025, 4:25pm UTC](https://discourse.processing.org/t/svg-export-issue-transform-scale-2-2/46350 "2025-05-08T16:25:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![helaine.b](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/helaine.b/32/20668_2.png) [@helaine.b](https://discourse.processing.org/u/helaine.b)\
**Post date:** [May 8, 2025, 4:25pm UTC](https://discourse.processing.org/t/svg-export-issue-transform-scale-2-2/46350/1 "2025-05-08T16:25:47Z")

</div>

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:

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

```auto
<?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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/0/80b322151e957ddba9e13f0017c961f389f1a221.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 8, 2025, 5:20pm UTC](https://discourse.processing.org/t/svg-export-issue-transform-scale-2-2/46350/2 "2025-05-08T17:20:17Z")

</div>

Hello @helaine.b,

It may be related to this:

> [@Canvas Scaling with different renderers](https://discourse.processing.org/t/canvas-scaling-with-different-renderers/46337/2):
>
> Hi @glv Thank you for the clear reporting! Yes, we changed the default pixeldensity() in 4.4.3 when starting sketches on high-dpi screens, to make sure sketches look good on modern displays. I guess this change does not apply to FX2D and I get the feeling I’d want to look into the window sizing on Windows as on macOS the window stays the same size at least.

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

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

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

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

> **[pixelDensity() / Reference](https://processing.org/reference/pixeldensity_)**
>
> This function makes it possible to render using all the pixels on high resolutions screens like Apple Retina and Windows HiDPI. This function can only be run once within a program, and must be called …

> **[displayDensity() / Reference](https://processing.org/reference/displaydensity_)**
>
> This function returns the number "2" if the screen is a high-density screen (called a Retina display on OS X or high-dpi on Windows and Linux) and a "1" if not. This information is useful for a progra…

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

`:)`

---

<div class="post-metadata">

**Author:** ![stefterv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stefterv/32/21678_2.png) [@stefterv](https://discourse.processing.org/u/stefterv)\
**Post date:** [May 8, 2025, 5:31pm UTC](https://discourse.processing.org/t/svg-export-issue-transform-scale-2-2/46350/3 "2025-05-08T17:31:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![stefterv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stefterv/32/21678_2.png) [@stefterv](https://discourse.processing.org/u/stefterv)\
**Post date:** [May 8, 2025, 5:35pm UTC](https://discourse.processing.org/t/svg-export-issue-transform-scale-2-2/46350/4 "2025-05-08T17:35:17Z")

</div>

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](https://github.com/processing/processing4/issues/693) 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.