# Save to SVG with edges visible

**URL:** <https://discourse.processing.org/t/save-to-svg-with-edges-visible/11117>\
**Category:** Libraries\
**Created:** [May 10, 2019, 6:27pm UTC](https://discourse.processing.org/t/save-to-svg-with-edges-visible/11117 "2019-05-10T18:27:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pierdr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pierdr/32/5114_2.png) [@pierdr](https://discourse.processing.org/u/pierdr)\
**Post date:** [May 10, 2019, 6:27pm UTC](https://discourse.processing.org/t/save-to-svg-with-edges-visible/11117/1 "2019-05-10T18:27:53Z")

</div>

Hi,  
I’m trying to save a 3D canvas from Processing to SVG.

I found great the use of beginRaw and endRaw. But I don’t understand how to save into the SVG just the edges that are visible.

What I would like is to export to SVG just the edges that are visible (this is what I see in the processing sketch):

 ![01%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6d5ca3d419fa79be9504bc26b190c175d96e2596.jpeg)

But the output to svg is quite different. In fact if I use `hint(ENABLE_DEPTH_SORT);` just the outlines of the 3d objects are shown (last image).

While if I don’t use that line every edge is shown (middle image).

Here is the code:

```auto
import processing.svg.*;

boolean record;

void setup() {
  size(500, 500, P3D);
  //hint(ENABLE_DEPTH_SORT);
}

void draw() {
  if (record) {
    beginRaw(SVG, "output.svg");
  }
  background(204);
  translate(width/2, height/2, -200);
  rotateZ(0.2);
  rotateY(mouseX/500.0);
  stroke(0);
  strokeWeight(4);
  box(200);
  translate(-100,0,0);
  box(100);

  if (record) {
    endRaw();
    record = false;
    exit();
  }
}
void keyPressed() {
  if (key == 'r') {
    record = true;
    
  }
}

```

I’ve tried different combinations of commands to input into the `hint` function call without much success (I looked for the available hint parameters into the [PConstants file](https://github.com/processing/processing/blob/master/core/src/processing/core/PConstants.java)). Any help appreciated!

---

<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:** [May 11, 2019, 5:01am UTC](https://discourse.processing.org/t/save-to-svg-with-edges-visible/11117/2 "2019-05-11T05:01:01Z")

</div>

-a- what you see on canvas is what you get by the default

```auto
fill(255);

```

if you set

```auto
noFill();

```

you see that what a export to SVG uses.

if you want save what you see could use

```auto
save("data/output.png");

```

* * *

yes, i also tested little about the hint switches  
but not get better results  
( i play win7 / processing 3.5.3 )

* * *

> **test-code**
>
> ```auto
> import processing.svg.*;
> 
> String outfile, outfile0 = "data/output"; 
> boolean record;
> 
> void setup() {
> size(500, 500, P3D);
> // hint(ENABLE_DEPTH_SORT);
> // hint(DISABLE_DEPTH_SORT); // default
> // hint(DISABLE_DEPTH_TEST);
> // hint(ENABLE_DEPTH_TEST); // default
> // hint(DISABLE_DEPTH_MASK);
> // hint(ENABLE_DEPTH_MASK); // default
> }
> 
> void draw() {
> if (record) {
> outfile = outfile0 + str(frameCount);
> beginRaw(SVG, outfile+".svg");
> }
> background(204);
> translate(width/2, height/2, -200);
> rotateZ(PI*mouseY/500.0);
> rotateY(PI*mouseX/500.0);
> stroke(0);
> strokeWeight(4);
> // fill(255);
> // noFill();
> // fill(0,0,200);
> box(200);
> translate(-100, 0, 0);
> // fill(0,200,0);
> box(100);
> 
> if (record) {
> println("save to "+outfile+ " (.svg and .png)");
> endRaw();
> record = false;
> save(outfile+".png");
> //exit();
> }
> }
> 
> void keyPressed() {
> if (key == 'r') record = true;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![pierdr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pierdr/32/5114_2.png) [@pierdr](https://discourse.processing.org/u/pierdr)\
**Post date:** [May 11, 2019, 5:43am UTC](https://discourse.processing.org/t/save-to-svg-with-edges-visible/11117/3 "2019-05-11T05:43:03Z")

</div>

@kll thanks, but what I need is export to a vector file, so the functions to save to bitmap are quite useless to me.

There must be a way to intercept the vector drawing after the DEPTH passes in the graphic pipeline.