# Export SVG issues with Processing and p5.js

**URL:** <https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695>\
**Category:** Libraries\
**Created:** [March 16, 2020, 5:08am UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695 "2020-03-16T05:08:43Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![plainspace](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/plainspace/32/8405_2.png) [@plainspace](https://discourse.processing.org/u/plainspace)\
**Post date:** [March 16, 2020, 5:08am UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/1 "2020-03-16T05:08:43Z")

</div>

I’m relatively new to Processing and know enough to be dangerous.

I want to export an SVG. I’ve been reading [here](https://processing.org/reference/libraries/svg/index.html) and [here](https://bjango.com/articles/processingsvg/) and trying to `import processing.svg.*;` in my code but I’m getting nothing. I have the latest version of Processing 3 running on the latest version of Mac OS. I am able to create a sketch but when I try to import `processing.svg` the sketch stops building.

Does SVG Export work with p5.js?

Is it possible that the zenozeng/p5.js-svg project would help?

Is this the right category to be asking in?

If it would help to see my code, let me know.

Thanks for looking!

---

<div class="post-metadata">

**Author:** ![plainspace](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/plainspace/32/8405_2.png) [@plainspace](https://discourse.processing.org/u/plainspace)\
**Post date:** [March 16, 2020, 5:44am UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/2 "2020-03-16T05:44:35Z")

</div>

Some other things I’ve found that might help:

> <https://stackoverflow.com/questions/50156951/p5-js-instance-export-to-svg>

> **[canvas2svg](https://www.npmjs.com/package/canvas2svg)**
>
> canvas2svg

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [March 16, 2020, 11:51am UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/3 "2020-03-16T11:51:40Z")

</div>

Seems like you’re on the right track–mind sharing one of your sketches that isn’t working?

---

<div class="post-metadata">

**Author:** ![plainspace](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/plainspace/32/8405_2.png) [@plainspace](https://discourse.processing.org/u/plainspace)\
**Post date:** [March 16, 2020, 4:17pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/4 "2020-03-16T16:17:28Z")

</div>

What is the best way to share the code?

In the meantime, here is a zip of the sketch project directory: [https://www.dropbox.com/s/lyuhd6acmlnb8fd/circuits.zip?dl=0](https://www.dropbox.com/s/lyuhd6acmlnb8fd/circuits.zip?dl=0)

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [March 16, 2020, 5:11pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/5 "2020-03-16T17:11:51Z")

</div>

You can add code to your posts using three backtick characters ``` followed by a language name (e.g., javascript) on one line, then adding your code beneath, and finally closing with another thee backticks on their own line. For example,

```javascript
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

```

Given you’re working with p5.js and multiple dependencies, consider using the [p5 Editor](https://editor.p5js.org/) to share your sketches. [Here](https://editor.p5js.org/mcintyre/sketches/Ij2k6lSW) is working-ish version of circuits.

---

<div class="post-metadata">

**Author:** ![plainspace](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/plainspace/32/8405_2.png) [@plainspace](https://discourse.processing.org/u/plainspace)\
**Post date:** [March 16, 2020, 5:35pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/6 "2020-03-16T17:35:41Z")

</div>

Here’s mine: [https://editor.p5js.org/plainspace/sketches/aA2Xjyug](https://editor.p5js.org/plainspace/sketches/aA2Xjyug)

---

<div class="post-metadata">

**Author:** ![plainspace](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/plainspace/32/8405_2.png) [@plainspace](https://discourse.processing.org/u/plainspace)\
**Post date:** [March 16, 2020, 5:39pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/7 "2020-03-16T17:39:50Z")

</div>

Added some comments and links in there.

I still don’t understand why adding `import processing.svg.*;` breaks things. I also don’t understand what it would do if it did work.

---

<div class="post-metadata">

**Author:** ![plainspace](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/plainspace/32/8405_2.png) [@plainspace](https://discourse.processing.org/u/plainspace)\
**Post date:** [March 16, 2020, 6:00pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/8 "2020-03-16T18:00:14Z")

</div>

E.g.:

```auto
import processing.svg.*;

void setup() {
  size(250, 250); // Set up a 250×250 canvas.
  beginRecord(SVG, "svg/output.svg"); // Start recording drawing operations to this file.
  noLoop(); // Only run draw() once.
}

void draw() {
  noStroke(); // Turn off the border on objects we’re about to draw.
  fill(#4bbcf6); // Set the fill colour to light blue.
  rect(50, 50, 100, 100); // Draw a rectangle on the canvas and to the SVG file.
  fill(#5721a5); // Set the fill colour to purple.
  ellipse(150, 150, 100, 100); // Draw a circle on the canvas and to the SVG file.
  endRecord(); // Save and close the SVG file recording.
}

```

` Uncaught SyntaxError: Cannot use import statement outside a module (sketch: line 1)`

---

<div class="post-metadata">

**Author:** ![plainspace](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/plainspace/32/8405_2.png) [@plainspace](https://discourse.processing.org/u/plainspace)\
**Post date:** [March 16, 2020, 6:09pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/9 "2020-03-16T18:09:23Z")

</div>

Ok… I’m starting to think that you can’t use SVG Export with p5.js. Am I right?

---

<div class="post-metadata">

**Author:** ![plainspace](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/plainspace/32/8405_2.png) [@plainspace](https://discourse.processing.org/u/plainspace)\
**Post date:** [March 16, 2020, 6:12pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/10 "2020-03-16T18:12:13Z")

</div>

Just found this: [https://editor.p5js.org/dannyrozin/sketches/r1djoVow7](https://editor.p5js.org/dannyrozin/sketches/r1djoVow7)

Will try to get it working on mine

---

<div class="post-metadata">

**Author:** ![plainspace](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/plainspace/32/8405_2.png) [@plainspace](https://discourse.processing.org/u/plainspace)\
**Post date:** [March 16, 2020, 6:15pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/11 "2020-03-16T18:15:16Z")

</div>

Well… I’m getting somewhere but now the SVG that downloaded is malformed…

---

<div class="post-metadata">

**Author:** ![plainspace](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/plainspace/32/8405_2.png) [@plainspace](https://discourse.processing.org/u/plainspace)\
**Post date:** [March 16, 2020, 6:19pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/12 "2020-03-16T18:19:54Z")

</div>

Problem is that the SVG that is being downloaded seems to be a PNG in disguise

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [March 16, 2020, 7:37pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/13 "2020-03-16T19:37:37Z")

</div>

Are you mixing [Processing](https://processing.org/) (Java on the desktop) code with [p5.js](https://p5js.org/) (JavaScript in the browser)?

This example

```java
import processing.svg.*;

void setup() {
  size(250, 250); // Set up a 250×250 canvas.
  beginRecord(SVG, "svg/output.svg"); // Start recording drawing operations to this file.
  noLoop(); // Only run draw() once.
}

void draw() {
  noStroke(); // Turn off the border on objects we’re about to draw.
  fill(#4bbcf6); // Set the fill colour to light blue.
  rect(50, 50, 100, 100); // Draw a rectangle on the canvas and to the SVG file.
  fill(#5721a5); // Set the fill colour to purple.
  ellipse(150, 150, 100, 100); // Draw a circle on the canvas and to the SVG file.
  endRecord(); // Save and close the SVG file recording.
}

```

should work fine in Processing.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 16, 2020, 9:22pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/14 "2020-03-16T21:22:05Z")

</div>

> [@plainspace](#):
>
> `Uncaught SyntaxError: Cannot use import statement outside a module (sketch: line 1)`

The keywords `import` & `export` are relatively new in the JS world:  
[ExploringJS.com/es6/ch\_modules.html#sec\_overview-modules](http://ExploringJS.com/es6/ch_modules.html#sec_overview-modules)

> **[JavaScript modules - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)**
>
> This guide gives you all you need to get started with JavaScript module syntax.

JS files which include any of those 2 keywords can only be dynamically loaded via builtin function **import()** or statically imported by other module JS files (MJS) or loaded from within an HTML file via `<script>type="module" scr="some_module_filename"</script>`.

Regardless, not many JS libraries are available as an MJS module file yet!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 16, 2020, 9:35pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/15 "2020-03-16T21:35:23Z")

</div>

Here’s some sketch which relies on both [p5.js](https://p5js.org) & [Matter.js](https://brm.io/matter-js/) libraries and uses module files:

> **[Matter Js Bouncing Colorful Balls](https://glitch.com/~matter-js-bouncing-colorful-balls)**
>
> Check out ~matter-js-bouncing-colorful-balls on Glitch, the friendly community where everyone can discover & create the best apps on the web.

Notice though that it uses keyword `import` on its own stuff:

```auto
import Ball from '/classes/ball.mjs';
import addCanvasWalls from '/functions/addCanvasWalls.mjs';
import adjustFrameSize from '/utils/adjustFrameSize.mjs';

```

B/c both JS libraries [p5.js](https://p5js.org) & [Matter.js](https://brm.io/matter-js/) aren’t yet available as ES6 JS modules (MJS) we can’t use keyword `import` nor builtin function **import()** in order to download them!

---

<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:** [March 25, 2020, 8:15pm UTC](https://discourse.processing.org/t/export-svg-issues-with-processing-and-p5-js/18695/16 "2020-03-25T20:15:36Z")

</div>

The core misunderstanding here seems to be trying to use processing.svg – the Java library, for Java mode – with p5.js, the JavaScript mode. You can’t do that.

For some of the libraries compatible with the p5.js web editor (JavaScript mode) see [https://p5js.org/libraries/](https://p5js.org/libraries/)