Load an SVG to a P5 sketch

Question

I've been programming in Processing some time now. I've also worked with shapes and SVG files. Having this humble experience regarding SVG files in Processing made me think that it would be the same story in P5.js, which is clearly not the case and makes me seek for help.

Back in Processing I would just have simple code like this:

PShape shape;
/***************************************************************************/
void setup() 
{
  size(400, 400);
  shapeMode(CENTER);
  shape = loadShape("bot1.svg");
} 
/***************************************************************************/
void draw() 
{
  background(100);
  pushMatrix();
  translate(width/2, height/2);
  shape(shape, 0, 0);
  popMatrix();
}

P5 doesn't work that way. What would be the P5.js equivalent to that?

    var shape;
    var canvas;
/***************************************************************************/
    function setup() 
    {
      canvas = createCanvas(400, 400);
      canvas.position(0, 0);
      //shapeMode(CENTER);
      //shape = loadShape("bot1.svg");
    } 
    /***************************************************************************/
    void draw() 
    {
      background(100);
      push();
      translate(width/2, height/2);
      //shape(shape, 0, 0);
      pop();
    }

Answer 1

P5.js does not support loading SVG files out of the box. Here is a discussion on GitHub containing a ton of information about this.

Processing.js does support SVG files though. More info in the reference.

You've tagged your question with processing.js, but I think you were originally asking about p5.js. But note that Processing.js and P5.js are two completely different things.