# Render SVG in P5.js

**URL:** <https://discourse.processing.org/t/render-svg-in-p5-js/11935>\
**Category:** Libraries\
**Created:** [June 9, 2019, 2:36am UTC](https://discourse.processing.org/t/render-svg-in-p5-js/11935 "2019-06-09T02:36:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexandra](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexandra/32/4422_2.png) [@Alexandra](https://discourse.processing.org/u/Alexandra)\
**Post date:** [June 9, 2019, 2:36am UTC](https://discourse.processing.org/t/render-svg-in-p5-js/11935/1 "2019-06-09T02:36:02Z")

</div>

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

---

<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:** [June 9, 2019, 2:59am UTC](https://discourse.processing.org/t/render-svg-in-p5-js/11935/2 "2019-06-09T02:59:29Z")

</div>

- p5js doesn’t currently support SVG. 😢
- Your best bet is to go w/ another library like Rune.js, Snap.svg, etc.:
  1. [RuneMadsen.GitHub.io/rune.js](http://RuneMadsen.GitHub.io/rune.js)
  2. [SnapSVG.io](http://SnapSVG.io)

- You can use them standalone or try to mix them w/ p5js.

---

<div class="post-metadata">

**Author:** ![Alexandra](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexandra/32/4422_2.png) [@Alexandra](https://discourse.processing.org/u/Alexandra)\
**Post date:** [June 9, 2019, 3:20am UTC](https://discourse.processing.org/t/render-svg-in-p5-js/11935/3 "2019-06-09T03:20:19Z")

</div>

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?

---

<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:** [June 9, 2019, 3:36am UTC](https://discourse.processing.org/t/render-svg-in-p5-js/11935/4 "2019-06-09T03:36:06Z")

</div>

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

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

---

<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:** [June 9, 2019, 7:07am UTC](https://discourse.processing.org/t/render-svg-in-p5-js/11935/5 "2019-06-09T07:07:48Z")

</div>

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

```auto
<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](https://editor.p5js.org/kll/sketches/Yvr08U4BU)

* * *

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

---

<div class="post-metadata">

**Author:** ![Alexandra](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexandra/32/4422_2.png) [@Alexandra](https://discourse.processing.org/u/Alexandra)\
**Post date:** [June 9, 2019, 11:27am UTC](https://discourse.processing.org/t/render-svg-in-p5-js/11935/6 "2019-06-09T11:27:57Z")

</div>

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

Thanks for sending me the code!