# Exporting to SVG for use in pen plotting
**URL:** https://discourse.processing.org/t/exporting-to-svg-for-use-in-pen-plotting/42395
**Category:** Coding Questions
**Created:** [July 10, 2023, 5:12pm UTC](https://discourse.processing.org/t/exporting-to-svg-for-use-in-pen-plotting/42395 "2023-07-10T17:12:04Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@PCwigwam](https://discourse.processing.org/u/PCwigwam)
#### Post date: [July 10, 2023, 5:12pm UTC](https://discourse.processing.org/t/exporting-to-svg-for-use-in-pen-plotting/42395/1 "2023-07-10T17:12:04Z")
Hi all, i’m a few weeks into learning coding/Processing but am struggling a bit with taking my processing creations and exporting them to SVG files. Below is a program that i’ve written up in Processing and i’d really like to be able to send it to my pen plotter to draw as its a small achievement for me. I’m not sure whether i need to just rewrite it all in a different format that will export or whether i can just adapt it with a few lines of code and then export. I’ve tried using beginRecord/endRecord and such but i’m never left with the full wave, usually just a single line. I’d really appreciate any help as its driving me a bit nuts!
float a = 0;
float aincrease = (PI/500);
float x = 0;
float z = 0;
void setup(){
size(800,350);
frameRate(200);
background(255);
}
void draw(){
float r = 100;
float y = r\*-sin(a);
translate(0,height/2);
a = a + aincrease;
x = x + 0.2;
//x axis
line(0,0,width,0);
if(z \< width){
line(z,0+2,z,0-2);
z = z + 50;
}
//wave
if(x \< width){
fill(0);
point(x,y);
}
}
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [July 10, 2023, 6:14pm UTC](https://discourse.processing.org/t/exporting-to-svg-for-use-in-pen-plotting/42395/2 "2023-07-10T18:14:51Z")
Try creating the sine wave outside of the draw() loop initially then display and record it simultaneously.
```auto
import processing.svg.*;
PShape wave;
float a = 0;
float aincrease = (PI/500);
float x = 0;
float z = 0;
void setup() {
size(800, 350);
background(255);
wave = createShape();
createSineWave();
noLoop();
}
void createSineWave() {
for (int i = 0; i < width*5; i++) {
float r = 100;
float y = r*-sin(a);
translate(0, height/2);
a = a + aincrease;
x = x + 0.2;
//x axis
line(0, 0, width, 0);
if (z < width) {
line(z, 0+2, z, 0-2);
z = z + 50;
}
//wave
if (x < width) {
wave.beginShape();
wave.noFill();
wave.vertex(x, y);
// println("x = " + x + ": y = " + y);
wave.endShape();
}
}
}
void draw() {
beginRecord(SVG, "sineWave.svg");
shape(wave, 0, 170);
endRecord();
}
```
---
### Author:  [@PCwigwam](https://discourse.processing.org/u/PCwigwam)
#### Post date: [July 11, 2023, 6:40am UTC](https://discourse.processing.org/t/exporting-to-svg-for-use-in-pen-plotting/42395/3 "2023-07-11T06:40:49Z")
Great, thanks.
Was it going wrong due to the loops that i had within the draw function?
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 11, 2023, 7:03am UTC](https://discourse.processing.org/t/exporting-to-svg-for-use-in-pen-plotting/42395/4 "2023-07-11T07:03:01Z")
Hello @PCwigwam,
> [@PCwigwam](#):
>
> Was it going wrong due to the loops that i had within the draw function?
You may have only been saving the final frame; there is a comment about this in the library reference.
What you see on the sketch window is an accumulation of individual frames over time painted to the sketch window.
Reference:
> **[SVG Export / Libraries](https://processing.org/reference/libraries/svg/index.html)**
>
> Create SVG files.
Here is an example adapted from the reference above that will draw a sine wave in a single for() loop and then display it:
```auto
import processing.svg.*;
size(300, 200);
PGraphics svg = createGraphics(300, 300, SVG, "output.svg");
svg.beginDraw();
svg.translate(0, height/2);
float angle = TAU/100;
//angle = 0.2;
svg.stroke(0);
svg.noFill();
svg.beginShape();
float xLast = 0;
float yLast = 0;
for(int i = 0; i<300; i+=1)
{
float x = i;
float y = 40*sin(i*angle);
//if (x>0)
//svg.line(xLast, yLast, x, y);
svg.vertex(x, y);
xLast = x;
yLast = y;
}
svg.endShape();
svg.dispose();
svg.endDraw();
PShape s = loadShape("output.svg");
shape(s, 0, 0);
```
You get very different SVG file outputs (use a text editor to view) with a shape vs a line.
I don’t have access to a plotter and do not know how these will plot… please share results.
References:
- [Processing Overview / Processing.org](https://processing.org/tutorials/overview)
- [background() / Reference / Processing.org](https://processing.org/reference/background_.html)
- [https://processing.org/tutorials/trig](https://processing.org/tutorials/trig)
`:)`
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 11, 2023, 7:26am UTC](https://discourse.processing.org/t/exporting-to-svg-for-use-in-pen-plotting/42395/5 "2023-07-11T07:26:45Z")
Hello @svan,
> [@svan](#):
>
> Try creating the sine wave outside of the draw() loop initially then display and record it simultaneously.
You are generating a new SVG file with each frame overwriting the last one.
Your example would benefit from a _noLoop()_ after generating the SVG file.
Reference:
> **[noLoop() / Reference](https://processing.org/reference/noLoop_.html)**
>
> Stops Processing from continuously executing the code within draw(). If loop() is called, the code in draw() begin to run continuously again. If using noLoop() in setup(…
`:)`
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [July 11, 2023, 3:21pm UTC](https://discourse.processing.org/t/exporting-to-svg-for-use-in-pen-plotting/42395/6 "2023-07-11T15:21:59Z")
You’re right; we only need one lap around the loop. Original post was edited to add ‘noLoop()’.
---
### Author:  [@looplider](https://discourse.processing.org/u/looplider)
#### Post date: [January 18, 2024, 12:36am UTC](https://discourse.processing.org/t/exporting-to-svg-for-use-in-pen-plotting/42395/7 "2024-01-18T00:36:59Z")
Hi there -
I came across this topic since I am trying to do the exact same thing in P5.JS, but struggling to get an SVG output. I’m curious if it is possible.
Does anyone have any ideas?
Thank you in advance.
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [January 18, 2024, 2:12am UTC](https://discourse.processing.org/t/exporting-to-svg-for-use-in-pen-plotting/42395/8 "2024-01-18T02:12:51Z")
According to this reference p5.js does not support SVG’s, but it does offer an alternative which I was unable to get to work in the p5.js web editor:
[https://www.gorillasun.de/blog/working-with-svgs-in-p5js/](https://www.gorillasun.de/blog/working-with-svgs-in-p5js/)
You might be able to get it to work on your system. Runtime is here:
[https://github.com/zenozeng/p5.js-svg](https://github.com/zenozeng/p5.js-svg)
**Addendum:**
The following example does run using the Processing editor set to p5.js mode:
```auto
let svg;
let angle;
function setup() {
createCanvas(800, 600, SVG);
svg = createGraphics(800, 600, SVG, canvas);
translate(0, 100);
angle = TAU/100;
stroke(0);
strokeWeight(4);
beginShape();
for (let i=0; i<300; i++) {
var x = i;
var y = 40*sin(i*angle);
svg.vertex(x, y);
}
endShape();
noLoop();
}
function draw() {
}
```
In addition this line of code must be added to index.html
```auto
```
I have no idea if this code exports something which could be used for pen plotting. The graphic may be seen by double clicking on the index.html file in the sketch folder.