Load an SVG to a P5 sketch

SAFR

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();
    }

GoToLoop

loadImage()'s reference doesn't say anything, but I guess it can load ".svg" maybe:
http://p5js.org/reference/#/p5/loadImage

You need to learn about preload() too: http://p5js.org/reference/#/p5/preload

Also, I've found this long discussion about SVG for p5.js:
https://GitHub.com/processing/p5.js/issues/458

SAFR

I guess I'll just try to find the solution in that discussion. Thanks a lot. I know about Preload, I forgot to put it hehe.

jeremydouglass

Are you trying to load the SVG as an object, or just as display it as an image? If just as an image, then this is the part of that discussion you probably want:

var img;
function preload() {
    img = loadImage('test.svg');
}

function setup() {
    background(100);
    createCanvas(1000, 1000);
}

function draw() {
    image(img, 0, 0);
}

SAFR

I was thinking of loading it as an object so that they can later be clickable but I'll rather worry about that later. So, I did as you told me and I got this error:

Access to Image at 'file:///C:/Users/SAFR/html/pract03/img/test.svg' from origin 'file://' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

The image is recognized, but blocked.

GoToLoop

https://forum.Processing.org/two/discussions/tagged/cors

SAFR

Sorry, I try all I can to come up with a solution but I can't help it... Help me please...

GoToLoop

• For safety reasons, browsers in general don't allow full path access! [-X
• All resources should stay inside the folder and subfolders of the ".html" file.
• And need to be accessed by their relative paths.
• For developing purposes, Firefox-based browsers are easier for running scripts & loading resources. :ar!

SAFR

This has been frustrating, I do appreciate your help a lot. What am gonna do is, create a prototype, instead of loading the SVGs, I will just display shapes. Once I host the sketch online, I'll load the files that I am having problems with. Thanks.