Load an SVG to a P5 sketch - svg

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.

Answer 2

In addition to Kevin's answer, if you do want load and SVG in p5.js you should check out p5.js-svg and the svg manipulation example
As a quick'n'dirty start you can try this:
Download p5.svg.js to the p5. sketch libraries folder
Import it in index.html: <script src="libraries/p5.svg.js" type="text/javascript"></script>
Create an SVG Canvas: createCanvas(600, 200, SVG);