Load an SVG to a P5 sketch

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

Answers

  • 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

  • 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.

  • 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);
    }
    
  • edited November 2016

    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.

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

  • edited November 2016
    • 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!
  • 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.

Sign In or Register to comment.