Export from P5 to PDF/SVG

p5.js Libraries
1

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:

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

Thank you!

1 Like
2

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.

1 Like
3

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

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

var svg;

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

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

and getting:

🌸 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!

4

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 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
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.

1 Like
5

Hi,

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