# Export from P5 to PDF/SVG

**URL:** <https://discourse.processing.org/t/export-from-p5-to-pdf-svg/28530>\
**Category:** Libraries\
**Created:** [March 14, 2021, 1:19pm UTC](https://discourse.processing.org/t/export-from-p5-to-pdf-svg/28530 "2021-03-14T13:19:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [March 14, 2021, 1:19pm UTC](https://discourse.processing.org/t/export-from-p5-to-pdf-svg/28530/1 "2021-03-14T13:19:48Z")

</div>

Hello,  
is it still possible to make an SVG/PDF export with P5?

p5.svg.js doesn’t seem to work, see these threads about it:

> [@Printable graphic needed: Processed graphic doesn't fit canvas (SVG export doesn't work as either)](https://discourse.processing.org/t/printable-graphic-needed-processed-graphic-doesnt-fit-canvas-svg-export-doesnt-work-as-either/11861):
>
> Hi there, I am totally new to p5.js and I need this for my master thesis. I had this concept for a book that has some illustrations made with generated design. [For example this code.](https://editor.p5js.org/generative-design/sketches/P_3_1_3_04) Maybe someone can help to fit this graphic into a bigger canvas so I can geht a better result when saving it as a graphic from Firefox. If the SVG thing won’t happen. Old Text starts here I use sublime as an editor and there is a function for creating a png when pushing the Ctrl button. But the resolution isn…

> [@Saving canvas in PDF](https://discourse.processing.org/t/saving-canvas-in-pdf/3025/9):
>
> Try this code that you can find [here](http://p5js.sketchpad.cc/sp/pad/view/w105lv1K2q/latest). Kf \<html\>\<head\> \<meta charset="UTF-8"\> \<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.js"\>\</script\> \<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"\>\</script\> \<!--\<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"\>\</script\>--\> \<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"\>\</script\> \<title\>EtherCoil\</title\> \<l…

Has anyone found a way that works with the current version of P5?

Thank you!

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [March 14, 2021, 5:15pm UTC](https://discourse.processing.org/t/export-from-p5-to-pdf-svg/28530/2 "2021-03-14T17:15:23Z")

</div>

Hi,  
it works well. I already use it in firefox and chrome, and works pretty well. I didn’t take a close look to the thread you mentionned, but they are one or two years old and as far I could see, their issue doesn’t relieve on the svg lib but on their code.

Did you tried to use it and had encounter some issues to work with or was it only a question ?

PS: I only used svg export, and haven’t tried pdf yet.

---

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [March 15, 2021, 5:19pm UTC](https://discourse.processing.org/t/export-from-p5-to-pdf-svg/28530/3 "2021-03-15T17:19:53Z")

</div>

> [@Pr0tonX](#):
>
> Did you tried to use it and had encountered some issues to work with or was it only a question?

Yes, I followed the first approach and I had a bunch of errors. It seems that I can’t even load the lib.

```auto
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>

```

```auto
var svg;

function setup() {
  var myCanvas = createCanvas(1200, 1200, SVG);
  myCanvas.parent("#myContainer");

  svg = createSVG();
  svg.beginRecord();
}

```

and getting:

```auto
🌸 p5.js says: createCanvas() was expecting P2D|WEBGL for the third parameter, received function instead. (on line 27 in App.js [http://127.0.0.1:5500/App.js:27:18]). (http://p5js.org/reference/#/p5/createCanvas)
p5.js:45031 Loading done

p5.js:46032 
🌸 p5.js says: It seems that you may have accidently written createSVG instead of createImg (on line 39 in http://127.0.0.1:5500/App.js [http://127.0.0.1:5500/App.js:39:3]).

Please correct it to createImg if you wish to use the function from p5.js (http://p5js.org/reference/#/p5/createImg)

```

Thanks for having a look at it!

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [March 16, 2021, 7:03pm UTC](https://discourse.processing.org/t/export-from-p5-to-pdf-svg/28530/4 "2021-03-16T19:03:09Z")

</div>

Hi,

actually you don’t load the right library. I’ve made a quick search it seems that you download from here : [svg.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers](https://cdnjs.com/libraries/svg.js) your lib, which is actually a js lib for manipulating canvas, but not the one to use canvas with p5 !  
I didn’t find any CDN for P5.svg.js, and I used to use it locally, I recommend you to download it from here : [p5.js-svg/getting-started.md at master · zenozeng/p5.js-svg · GitHub](https://github.com/zenozeng/p5.js-svg/blob/master/doc/getting-started.md)  
And then the only thing you need to do is to create a canvas with `SVG` as third argument, no more.  
When you’ll export it, it will be a .svg format.

---

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [March 25, 2021, 9:28am UTC](https://discourse.processing.org/t/export-from-p5-to-pdf-svg/28530/5 "2021-03-25T09:28:14Z")

</div>

Hi,

thanks so much for that and sorry for my late reply!  
I will try that and report here.