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

score 5 · Accepted Answer · answered Nov 02 '16 at 20:32

5

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.

answered Nov 02 '16 at 20:32

Kevin Workman

41,537
9
68
107

I hoped there was a simple way. Thanks for the correction also :) – Zardoz Nov 02 '16 at 20:35
What would you recommend me, continue with P5.js or change to Processing.js?. – Zardoz Nov 02 '16 at 20:41
@Zardoz That's completely up to you. It depends on how badly you need SVG support. Note that Processing.js isn't really actively developed anymore. – Kevin Workman Nov 02 '16 at 20:44
Understood. I'll go for the P5 then and try to figure out a solution. Thanks a lot :) – Zardoz Nov 02 '16 at 21:05
@Zardoz Also note that you aren't doing anything with the actual shape in your example, so you might just convert your SVG into a PNG or JPG image and use that instead. – Kevin Workman Nov 02 '16 at 21:07

score 3 · Answer 2 · answered Nov 03 '16 at 02:00

3

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

answered Nov 03 '16 at 02:00

George Profenza

50,687
19
144
218

That is really helpful. The problem is that Chrome, or any other navigator, won't let me display the file (even if it was PNG or JPG). – Zardoz Nov 16 '16 at 10:29
Feel free to vote up the answer if it was helpful. Regarding displaying the file ? How are you displaying the file ? If you simply have an html file that you open in the browser without serving it, you will get an error similar to this:“Cross origin requests are only supported for HTTP.”. You will need to run a the code on a web server. You can easily run a local web server and there are plenty of options depending on your OS (e.g. XAMPP/MAMP/python SimpleHTTPServer/etc.). The simplest I can think of is actually using the [p5.js editor](http://p5js.org/download/) which handles this for you. – George Profenza Nov 16 '16 at 18:02

Load an SVG to a P5 sketch

2 Answers2