title: P5.js instance: export to SVG
body: <p>A p5.js sketch is creating a plot that I would like to export as SVG.</p>
  
  <p>The plot is not static: it must be modified (in the demo by clicking on the circle) and then saved by pressing the <code>Save SVG</code> button.</p>
  
  <p>P5.js alas doesn't provide <code>beginDraw()</code> and <code>endDraw()</code> as the standard Processing.</p>
  
  <p>I am using <a href="https://github.com/zenozeng/p5.js-svg/" rel="noreferrer">https://github.com/zenozeng/p5.js-svg/</a>, as described in this blog: <a href="https://makeyourownalgorithmicart.blogspot.de/2018/03/creating-svg-with-p5js.html" rel="noreferrer">https://makeyourownalgorithmicart.blogspot.de/2018/03/creating-svg-with-p5js.html</a></p>
  
  <p>Saving a static SVG (without user interaction) is easy: uncommenting <code>p.SVG</code> and <code>p.save()</code> the code works:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://github.com/zenozeng/p5.js-svg/releases/download/v0.5.2/p5.svg.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;script&gt;
  
          let colors = ["red", "orange", "yellow", "lime", "green", "blue", "fuchsia"];
          let idx = 0;
  
          let sketch = function (p) {
  
              p.setup = function () {
                  p.createCanvas(400, 400); // (400, 400, p.SVG);  &lt;--------------
                  p.noLoop();
              };
  
              p.draw = function () {
  
                  p.background("white");
                  p.fill(colors[idx]);
                  p.stroke("black");
                  p.strokeWeight(3);
                  p.ellipse(200, 200, 200,200);
  
                  // p.save();   // &lt;-----------------------------------
              };
  
              p.mousePressed = function() {
                  if (p.dist(p.mouseX, p.mouseY, 200,200) &lt; 100) {
                      idx++;
                      idx %= colors.length;
                      p.redraw();
                  }
              }
          };
  
          let myp5 = new p5(sketch, "my_image");
  
          let save_svg = function() {
              // ????   &lt;------------------------------
          }
  
  
      &lt;/script&gt;
  
      &lt;div id="my_image"&gt;&lt;/div&gt;
  
      &lt;button onclick="save_svg()"&gt;Save SVG&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can the user modify the plot and then save the final version only upon request?
  Is this possible using <code>p5.js-svg</code> or any other library? </p>
  
  <p>I also tried <a href="https://github.com/gliffy/canvas2svg" rel="noreferrer">https://github.com/gliffy/canvas2svg</a> but I could not have it working at all.</p>