# Saving every frame in SVG

**URL:** <https://discourse.processing.org/t/saving-every-frame-in-svg/30152>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 18, 2021, 10:02am UTC](https://discourse.processing.org/t/saving-every-frame-in-svg/30152 "2021-05-18T10:02:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ecce13](https://avatars.discourse-cdn.com/v4/letter/e/c77e96/32.png) [@ecce13](https://discourse.processing.org/u/ecce13)\
**Post date:** [May 18, 2021, 10:02am UTC](https://discourse.processing.org/t/saving-every-frame-in-svg/30152/1 "2021-05-18T10:02:21Z")

</div>

Hey, I’m completely new to this, and this is an assignment for me, so pardon if there’s any errors in the code. I’ve been trying to implement SVG saving so I can edit the file in Illustrator, but I can’t seem to save the entire visual. It only seems to save a single frame of the newest generated bezier curve. Am I missing something, or is there a better way to do things?

Cheers!

```auto
float t = 0.0;
String myText = "click to pause/play, press r to reset canvas!";
import processing.svg.*;
//import processing.pdf.*;
boolean record;

void setup() {
  size(displayWidth, displayHeight);
  stroke(10, 100);
  noFill();
  background(255);
  frameRate(20);
  //createGraphics(displayWidth, displayHeight);
  //beginRecord(PDF, "everything.pdf");
}

void draw() {
  if (record) {
   // Note that #### will be replaced with the frame number. Fancy!
   beginRecord(SVG, "frame-####.svg");
  }
  push();
  fill(0);
  noStroke();
  textAlign(CENTER);
  textSize(24);
  text(myText, displayWidth/2, 0.8*displayHeight);
  pop();
  
//curves generating
  float x1 = width * noise(t + 10);
  float x2 = mouseX * noise(t + 20);
  float x3 = width * noise(t + 30);
  float x4 = mouseX * noise(t + 40);
  float y1 = mouseY * noise(t + 50);
  float y2 = height * noise(t + 60);
  float y3 = mouseY * noise(t + 70);
  float y4 = height * noise(t + 80);

  bezier(x1, y1, x2, y2, x3, y3, x4, y4);

  t += 0.009;
}
  

void mouseClicked() {
if (isLooping()) {
  noLoop();
} else {
loop(); }
}

void keyPressed() {
  if (keyCode == 82) {
  background(255);
  }
  if (keyCode == ENTER) {
    record = false;
  }
}

```

---

<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 18, 2021, 12:01pm UTC](https://discourse.processing.org/t/saving-every-frame-in-svg/30152/2 "2021-05-18T12:01:26Z")

</div>

Hello,

I was able to do this using createGraphics():  
_[SVG Export / Libraries / Processing.org](https://processing.org/reference/libraries/svg/index.html)_

The above reference states:

> Unlike the PDF renderer, the SVG renderer will only save the final frame of a sequence.

And did something similar to this with createGraphics:  
_[endRecord() / Reference / Processing.org](https://processing.org/reference/endRecord_.html)_

References:  
_[createGraphics() / Reference / Processing.org](https://processing.org/reference/createGraphics_.html)_

I did not see what I was drawing to the offscreen buffer.  
There is and are ways to do this also. `:)`

Try it with a simple example and then go from there.

For example I used this in draw():  
`svg.line(0, 0, random(300), random(300));`

I leave this challenge (opportunity) with you!

`:)`

SVG Output viewed with browser:

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