P5.js export to SVG

I'm back to Processing after some time, now playing with p5.js to write a Sankey library. After fiddling with the diagram (I can drag around the nodes to read better the graph) I would like to export the image to SVG.

Giving a look around I am very confused about this "save as SVG". In Processing (Java) I was used to insert beginRecord()...endRecord() and it was done. With p5.js it doesn't look this is possible.

I found some libraries in github (i.e. zenozeng/p5.js-svg v0.6.0), an old stackoverflow discussion (https://stackoverflow.com/questions/35681381/p5js-svg-export), an old issue (https://github.com/processing/p5.js/issues/458), lot of examples that I cannot make it work at all.

Is there somewhere an example I can use as a base? Which library (if any) is the most promising? My knowledge of JS if alas very limited and it is well above my skills to go deep into this issue...

Thanks in advance


  • edited May 2018

    For the ones interested, this is the solution I found. It is suboptimal but enough for my use. Pay attention: if you load fonts, they will be transformed in geometry inside the SVG. This means that the SVG is huge and slow to load and visualize. Standard text font works perfectly.

    I create two canvases: one normal, the second is SVG (using Zeno Zeng p5.svg.js at https://github.com/zenozeng/p5.js-svg/tree/master/dist)

    SVG lives in a hidden div. When I am happy after playing with the normal canvas, I create the SVG using the latest parameters: of course they need to be global to be shared among the two objects.

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
    <script type="text/javascript" src="https://github.com/zenozeng/p5.js-svg/releases/download/v0.5.2/p5.svg.js"></script>
            let colors = ["red", "orange", "yellow", "lime", "green", "blue", "fuchsia"];
            let idx = 0;
            let sketch = function (p) {
                p.setup = function () {
                    if (p.type === "SVG") {
                        p.createCanvas(400, 400, p.SVG);
                    else if (p.type === "NORMAL") {
                        p.createCanvas(400, 400);
                    else {
                        alert("don't know which canvas to create")
                p.draw = function () {
                    p.ellipse(200, 200, 200,200);
                    p.text("test", 100, 100);
                    p.text("bold", 200, 200);
                    waiting = false;
                p.mousePressed = function() {
                    if (p.dist(p.mouseX, p.mouseY, 200,200) < 100) {
                        idx %= colors.length;
                p.save_canvas = function() {
                    p.draw();  // <--- redraw using latest parameters
            cvs = new p5(sketch, "my_image");
            cvs.type = "NORMAL";
            svg = new p5(sketch, "hidden_div");
            svg.type = "SVG";
        <div id="my_image"></div>
        <div id="hidden_div" style="display:none"></div>
        <button onclick="svg.save_canvas()">Save SVG</button>
Sign In or Register to comment.