# Export SVG from PGraphics

**URL:** <https://discourse.processing.org/t/export-svg-from-pgraphics/12289>\
**Category:** Libraries\
**Created:** [June 25, 2019, 9:57pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289 "2019-06-25T21:57:09Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [June 25, 2019, 9:57pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/1 "2019-06-25T21:57:10Z")

</div>

I have a doubt on how to export an SVG with the vector contents inside a PGraphics.

Here’s the deal, I’m doing some mouse interactivity(storing mouseClicks as vectors) that are stored in a PGrpahics that’s sending that image through spout.  
When finished, i want to export that same PGraphics as an svg file.

i’ve tried the approaches from processing documentation. i’ve done the if(record) at the begining and end of draw. i’ve tried the to create two PGraphics, one SVG and the other a 3d and copy the content of one to the other, but this option is not available (CANNOT COPY TO SVG)…

so basically

```auto
ArrayList<Polyline> pLines;

PGraphics pgr;

void setup(){
  size(1200,960,P3D);
  hint(ENABLE_DEPTH_SORT);
  textureMode(NORMAL);

  spout=new Spout(this);
  spout.createSender("spout p55");

  pgr=createGraphics(width*2,height*2);

  pLines=new ArrayList();
}

void draw(){
 background(0);

  pgr.beginDraw();
  pgr.clear();
  for(Polyline p: pLines){
    p.display();
  }
  pgr.endDraw();

  spout.sendTexture(pgr);
  image(pgr,0,0,width,height);
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [June 26, 2019, 12:50am UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/2 "2019-06-26T00:50:53Z")

</div>

what you try insofar using  
[https://processing.org/reference/libraries/svg/index.html](https://processing.org/reference/libraries/svg/index.html)  
what produces that error?

* * *

i know that concept look backward but might be what you wanted to do:

```auto
import processing.svg.*;
PGraphics pgr;
String file = "data/pgr.svg";
PShape getsvg;

void setup() {
  size(500, 500, P3D);
  make_pgr();
  getsvg = loadShape(file);
  println("move mouse over canvas and press key [r]");
}

void make_pgr() {
  pgr=createGraphics(width, height, SVG, file);
  pgr.beginDraw();
  //pgr.clear();
  pgr.background(200, 200, 0);
  pgr.translate(width/2, height/2);
  pgr.stroke(0, 200, 0);
  pgr.strokeWeight(5);
  pgr.line(0, 0, -width/2 + mouseX, -height/2 + mouseY);
  pgr.dispose();
  pgr.endDraw();
}

void draw() {
  shape(getsvg, 0, 0); // you see the loaded SVG file, not the PGraphics
}

void keyPressed() {
  if ( key == 'r' ) { 
    make_pgr();   
    getsvg = loadShape(file); // reload 
    println("saved: "+file);
  }
}

```

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [June 26, 2019, 2:14pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/3 "2019-06-26T14:14:00Z")

</div>

i have two different uses for the same pgr, syphon/spout output and save svg.

i’ve just tried

```auto
pgr = createGraphics(pgrWidth, pgrHeight, SVG, "saves/out3.svg");
....
if(record){
   pgr.dispose();
   record=false;
  }

```

and get

```auto
no loadPixels() for PGraphicsSVG

```

i guess i’ll have to do the main PGraphics an SVG and then raster it in a P2D/P3D PGr and broadcast that raster PGr

looking for how to raster vector files in processing

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [June 26, 2019, 4:39pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/4 "2019-06-26T16:39:10Z")

</div>

openFrameworks works this smoothly. i’ve used it to send a OPENGL fbo to syphon.

```auto
tex=fbo.getTexture();
fbo.draw(0,0,ofGetWidth(),ofGetHeight());
mClient.draw(50,50);
mainOutputSyphonServer.publishTexture(&tex);
```

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [June 26, 2019, 5:10pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/5 "2019-06-26T17:10:51Z")

</div>

another way to do this is to do all the work in the PGraphicsSVG and then raster it and copy it to a bitmap PGraphics. But don’t know how to raster this svg pg

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 30, 2019, 6:03am UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/6 "2019-06-30T06:03:15Z")

</div>

> [@eduzal](#):
>
> SVG with the vector contents inside a PGraphics

Maybe I’m misunderstanding, but PGraphics don’t contain vector data – they are rastor only. I think that you need to either capture geometry from eg PShape or else trap individual rect / ellipse / line / etc calls and save them out to a generated svg as the calls are made – because their results are just pixels. This is how svg export works in the library examples:

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

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [June 30, 2019, 4:30pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/7 "2019-06-30T16:30:42Z")

</div>

hi jeremy

what i’ve understood about this documentation is that you can get two different kind of PGraphics, the usual raster and a vector one if you initiate it as an svg. i’ve tried both approaches.  
once iniated all the process as an SVG PG but couldn’t raster it, by simply copying the vector PG to a raster PG, or using load pixels then copying the array to the raster target.

what i haven’t tried is placing the svg.dispose() in the Polyline object. but anyway it still misses the transposition for spout/syphon display that’s essential to the purpose of the program. cause i’m doing this to trace a complex surface for a videomapping, so i need to see in the projected surface what i’m doing and i need to save it as a vector for a posterior edit at my desktop.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 30, 2019, 4:41pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/8 "2019-06-30T16:41:03Z")

</div>

> [@eduzal](#):
>
> you can get two different kind of PGraphics, the usual raster and a vector one if you initiate it as an svg.

Ah, I see. I hadn’t looked at that before – thanks for pointing it out.

There is a _whole_ lot of “nope()” in that source – the list of things you can’t do with it that you can do with the normal API is extensive.

> <https://github.com/processing/processing/blob/master/java/libraries/svg/src/processing/svg/PGraphicsSVG.java#L394-L403>

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [June 30, 2019, 4:42pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/9 "2019-06-30T16:42:54Z")

</div>

these nopes are cute… LOL

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [July 2, 2019, 5:08pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/10 "2019-07-02T17:08:32Z")

</div>

looking at documentation i fou something very interesting, a clue for things to come

```auto
`boolean` `save(String filename)`

( begin auto-generated from PImage_save.xml ) Saves the image into a file.

```

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [September 12, 2019, 7:09pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/11 "2019-09-12T19:09:00Z")

</div>

after a long time got the solution to this issue. the answer is cloning the drawing methods from the pgr to the svg pgraph. the svg is called only once, when recording is triggered.

cloned the display methods, only changing the pgr to svg pgraph  
cloned the draw functions, only changing the pgr to svg pgraph

svg pgraph is only activated through a trigger.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 12, 2019, 7:47pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/12 "2019-09-12T19:47:30Z")

</div>

Glad you found a solution!

> [@eduzal](#):
>
> cloning the drawing methods

Could you explain a bit more what you mean by “cloning” methods? I’m not understanding. What are you moving from where to where?

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [September 12, 2019, 11:19pm UTC](https://discourse.processing.org/t/export-svg-from-pgraphics/12289/13 "2019-09-12T23:19:49Z")

</div>

have both in the polyline and line object, since all the work/interactivity is really done in adding and calling the PVectors

i’ve got a

```auto
PGraphics pgr; //raster image
PGraphics svg; //vector image

```

runtime functions. i could have encapsulated the raster but prefered not to.  
saveSvg is called by s cp5 bang

```auto
void draw() {
  background(32);

  pgr.beginDraw();
  pgr.background(0);
  for (int i=pLines.size()-1; i>=0; i--) {
    Polyline p=pLines.get(i);
    p.display();
  }

  for (int i=linhas.size()-1; i>=0; i--) {
    Linha l=linhas.get(i);
    l.display();
  }

  if (mouseX>pgrOrigin) {
    posX=int(map(mouseX, pgrOrigin, pgrOrigin+(pgr.width/2), 0, pgr.width));
    posY=mouseY*2;
    pgr.stroke(strokeColor);
    pgr.noFill();
    pgr.ellipse(posX, posY, 14, 14);
  }

  pgr.endDraw();

  syphon.sendImage(pgr);
  image(pgr, pgrOrigin, 0, pgr.width/2, pgr.height/2);
}

void saveSVG() {
  svg.beginDraw();
  for (int i=pLines.size()-1; i>=0; i--) {
    Polyline p=pLines.get(i);
    p.svgDisplay();
  }

  for (int i=linhas.size()-1; i>=0; i--) {
    Linha l=linhas.get(i);
    l.svgDisplay();
  }
  println("SVG record:BEGIN");
  svg.dispose();
  println("SVG record:END");
  svg.endDraw();
}

```

methods in each object

```auto
  void display() {
    pgr.beginShape();
    pgr.stroke(sColor);
    pgr.strokeWeight(sW);
    pgr.noFill();
    for (int i=vertexes.size()-1; i>=0; i--) {
      PVector v=vertexes.get(i);
      pgr.vertex(v.x, v.y);
    }
    if (state) {
      pgr.endShape(CLOSE);
    } else {
      pgr.endShape();
    }
  }
  
    void svgDisplay() {
    svg.beginShape();
    svg.stroke(sColor);
    svg.strokeWeight(sW);
    svg.noFill();
    for (int i=vertexes.size()-1; i>=0; i--) {
      PVector v=vertexes.get(i);
      svg.vertex(v.x, v.y);
    }
    if (state) {
      svg.endShape(CLOSE);
    } else {
      svg.endShape();
    }
  }

```

screenshot of the interface

 ![18%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0383b590040f5c5d81938374ed37eecb51101872.png)