# How to export single frame from animation as SVG

**URL:** <https://discourse.processing.org/t/how-to-export-single-frame-from-animation-as-svg/47594>\
**Category:** Beginners\
**Created:** [December 5, 2025, 10:37pm UTC](https://discourse.processing.org/t/how-to-export-single-frame-from-animation-as-svg/47594 "2025-12-05T22:37:33Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lutoslawski.xyz](https://avatars.discourse-cdn.com/v4/letter/l/958977/32.png) [@Lutoslawski.xyz](https://discourse.processing.org/u/Lutoslawski.xyz)\
**Post date:** [December 5, 2025, 10:37pm UTC](https://discourse.processing.org/t/how-to-export-single-frame-from-animation-as-svg/47594/1 "2025-12-05T22:37:33Z")

</div>

Hi guys!

What am I missing…. ?

I would like to export either a single frame from animation or the result image after few steps, e.g. when I draw circles using the mouseX.  
Here is the very basic code:

```auto
import processing.svg.*;
boolean saveSVG = false;

void setup(){
size(800,800);
background(0);
}

void draw(){
if(saveSVG){
beginRecord(SVG, “svg-test-####.svg”);
}
ellipse(mouseX, mouseY, 10,10);

if(saveSVG){
endRecord();
saveSVG = false;
}

}

void mousePressed(){

}
void keyPressed(){
if(key == ‘s’){
saveSVG = true;
}

}

```

so, when the ‘s’ key is pressed, I would like to capture the whole image after moving the mouse with multiple circles, but the result is that I see just one circle. What am I doing wrong?  
I will be greatful for any hints!

Thanks !

 ![svg-test-0435](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/b/2b69e608542499d47cf74779e190b456bace4c1b.svg)

---

<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:** [December 5, 2025, 11:46pm UTC](https://discourse.processing.org/t/how-to-export-single-frame-from-animation-as-svg/47594/2 "2025-12-05T23:46:35Z")

</div>

Hello @Lutoslawski.xyz,

> [@Lutoslawski.xyz](#):
>
> What am I missing…. ?

Scrutinize your code and compare to reference provided.

This is incorrect:

> [@Lutoslawski.xyz](#):
>
> ```auto
> void mousePressed(){
> 
> }
> void keyPressed(){ // You have `keyPressed()` inside of `mousePressed()`.
> if(key == ‘s’){ // Should be single quotes such 's'
> saveSVG = true;
> }
> 
> }
> 
> ```

Use one or the other. You have `keyPressed()` inside of `mousePressed()`.

Reference:

> **[SVG Export / Libraries](https://processing.org/reference/libraries/svg/index.html)**
>
> Create SVG files.

The one example in the libraries documentation had issues with the variable `record` and I had to change it to something else:

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

`:)`

---

<div class="post-metadata">

**Author:** ![sterretje](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@sterretje](https://discourse.processing.org/u/sterretje)\
**Post date:** [December 6, 2025, 2:03am UTC](https://discourse.processing.org/t/how-to-export-single-frame-from-animation-as-svg/47594/3 "2025-12-06T02:03:34Z")

</div>

> [@glv](#):
>
> You have `keyPressed()` inside of `mousePressed()`.

I’m sure you’re mistaken.

---

<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:** [December 6, 2025, 2:43am UTC](https://discourse.processing.org/t/how-to-export-single-frame-from-animation-as-svg/47594/4 "2025-12-06T02:43:38Z")

</div>

> [@sterretje](#):
>
> I’m sure you’re mistaken.

That I am! Green eggs and ham!

I misplaced my glasses today and the formatting is a bit _off_ and I was clearly mistaken in my earlier post.

> [@Lutoslawski.xyz](#):
>
> What am I missing…. ?

In the reference I provided it states:  
`Unlike the PDF renderer, the SVG renderer will only save the final frame of a sequence.`

You could try saving your mouse locations for each frame in an array and draw that all in one loop during one frame and generate an SVG.

I tried this approach and it worked:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/2/b2ac6e84a037702b0a82c90a598e5c8921427094.png)

`:)`

---

<div class="post-metadata">

**Author:** ![sterretje](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@sterretje](https://discourse.processing.org/u/sterretje)\
**Post date:** [December 6, 2025, 8:23am UTC](https://discourse.processing.org/t/how-to-export-single-frame-from-animation-as-svg/47594/5 "2025-12-06T08:23:45Z")

</div>

Glad that you found your glasses back 👍

---

<div class="post-metadata">

**Author:** ![Lutoslawski.xyz](https://avatars.discourse-cdn.com/v4/letter/l/958977/32.png) [@Lutoslawski.xyz](https://discourse.processing.org/u/Lutoslawski.xyz)\
**Post date:** [December 6, 2025, 1:00pm UTC](https://discourse.processing.org/t/how-to-export-single-frame-from-animation-as-svg/47594/6 "2025-12-06T13:00:32Z")

</div>

Thanks glv, true I should delete the line with the mousePressed to keep the code clean, simply keep my code the same way I like my glasses - clean and sharp. ! I am also happy the glasses are back in the right place 🙂. Summing up, this line let’s say was neutral for my code, but still I am missing the right solution, perhaps my way of thinking needs to be sorted.

The reference says SVG renderer will save the last frame, but since the boolean saveSVG is controlled by the ‘s’ key and before pressing it I have many circles drawn on my canvas, why it doesn’t export the whole image - saying that I feel like I’m getting closer to understand it. That’s means that no matter what I draw in previous frames, only the last one is saved - with just one circe…

Ok, but still…. how can I export to SVG the image, exactly the same as seen in the processing windows from an animation, in the same controlled way - by pressing the key on a keyboard.

Thanks for any advise!

---

<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:** [December 6, 2025, 2:22pm UTC](https://discourse.processing.org/t/how-to-export-single-frame-from-animation-as-svg/47594/7 "2025-12-06T14:22:29Z")

</div>

Hello again!

> [@Lutoslawski.xyz](#):
>
> That’s means that no matter what I draw in previous frames, only the last one is saved

Yes! That is my understanding and reminded of it each time I explore this.

It is _ **very different** _ from `saveFrame()` which will:

> save an image that is identical to the display window.

This is a workaround for mouse positions:

```auto
import processing.svg.*;

boolean rec = false;
ArrayList<PVector> points = new ArrayList<PVector>();

void setup() {
  size(400, 400, P2D);
}

void draw() {
  // Add mouse position to the points array
  PVector p0 = new PVector(mouseX, mouseY);
  ellipse(p0.x, p0.y, 10, 10);
  points.add(p0);

  if (rec) {
    // Start recording the SVG file
    background(255);
    beginRecord(SVG, "test.svg"); 

    // Draw all points collected so far
    for (int i = 0; i < points.size(); i++) {
      PVector p1 = points.get(i);
      ellipse(p1.x, p1.y, 10, 10);
    }

    // Finish recording the SVG file
    endRecord();

    // Stop the loop to avoid continuous drawing
    noLoop();
  }
}

// Use mouse press to trigger SVG recording
void mousePressed() {
  rec = true;
  //points.clear();
}

```

You can adapt for your use.

I wrote this quickly.  
There may certainly be better solutions.

Reference:  
_[saveFrame() / Reference / Processing.org](https://processing.org/reference/saveFrame_.html)_

`:)`

---

<div class="post-metadata">

**Author:** ![Lutoslawski.xyz](https://avatars.discourse-cdn.com/v4/letter/l/958977/32.png) [@Lutoslawski.xyz](https://discourse.processing.org/u/Lutoslawski.xyz)\
**Post date:** [December 6, 2025, 7:39pm UTC](https://discourse.processing.org/t/how-to-export-single-frame-from-animation-as-svg/47594/8 "2025-12-06T19:39:03Z")

</div>

Thanks a lot @glv ! I will try to play some more

---

<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:** [December 6, 2025, 8:46pm UTC](https://discourse.processing.org/t/how-to-export-single-frame-from-animation-as-svg/47594/9 "2025-12-06T20:46:53Z")

</div>

Another variation using PGraphics:

```processing
import processing.svg.*;

boolean rec = false;
PGraphics svg;

void setup() {
  size(600, 300); 
  background(255);
  
  svg = createGraphics(300, 300, SVG, "output.svg");
  svg.beginDraw();
  // Experimenting:
  //svg.background(255, 255, 0);
  //svg.fill(128, 255, 255);
  //svg.rect(10, 10, width/2-20, height-20);
}

void draw() { 
  int mX = constrain(mouseX, 0, width/2);
  int mY = mouseY;
  circle(mX, mY, 10); // sketch window
  svg.fill(255, 0, 0);
  svg.circle(mX, mY, 10); // PGraphic points same as sketch window)
  }

// Use mouse press to trigger SVG recording
void mousePressed() {
  svg.dispose();
  svg.endDraw();
  
  PShape svgOut = loadShape("output.svg");
  shape(svgOut, width/2, 0); //display when done!
  noLoop();
}

```

The circle and mouseX, mouseY in sketch window are the same as PGraphics.

`:)`