Render SVG in P5.js

p5.js Libraries
1

Hi everyone!

I’m checking out the graphics/shapes examples in P5 and found out that they are all raster-based. I’m wondering whether there’s a way to render SVG files inside P5.

Thanks!

Alexandra

1 Like
2
  • p5js doesn’t currently support SVG. :cry:
  • Your best bet is to go w/ another library like Rune.js, Snap.svg, etc.:
    1. RuneMadsen.GitHub.io/rune.js
    2. SnapSVG.io
  • You can use them standalone or try to mix them w/ p5js.
1 Like
3

Thanks you so much!

But since P5 doesn’t support SVG, would it be possible to mix them (P5 and the library that supports SVG) together?

4

It depends… if a library uses a <canvas>, you need to pass p5js’ own <canvas> to that library when instantiating it, so it’s shared.

p5js secretly, but conveniently, stores its canvas in a property named canvas. :wink:

Otherwise, if it’s a library which doesn’t rely on a <canvas>, you just use it.

1 Like
5

possibly i misunderstand, do you mean just

  • load and
  • show

a SVG file?
( here i used a hand made SVG )
( so please download the project and edit the SVG file locally
or make a new one with this

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
<defs/>
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>

and upload

https://editor.p5js.org/kll/sketches/Yvr08U4BU

but yes, the resulting image from p5.js canvas is a PNG file

2 Likes
6

Hi kll, sorry for the confusion. I mean load and show SVG file as SVG.

Thanks for sending me the code!

1 Like