How to use external svg in code on the web?

vosembit

Hello. I made several sketches using external svg file that i made in illustrator. I use them to animate some parts of svg. It works well on my PC, but when i put my .pde into web page, using processing.min.js it doesn't work. In general code works, but without SVG. I put SVG into data folder and link it in Setup section. Should i have extra code to make it work?

GoToLoop

Unfortunately Pjs is still mostly stuck at ancient Processing 1.5.1 version:
http://ProcessingJS.org/reference/

It features PShape: http://ProcessingJS.org/reference/PShape/

However only for loading an already existing ".svg" rather than creating our own: :(
http://ProcessingJS.org/reference/loadShape_/

GoToLoop

My advice if you need to create a shape is convert your Java Mode script to run under p5.js:
https://GitHub.com/processing/p5.js/wiki/Processing-transition

B/c it features many shape-related functions:
http://p5js.org/reference/#group-Shape

For Java familiarity, go w/ ES6 JS using the class structure keyword:
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

vosembit

Thanks for your answer. Basically, i'm using svg for getting "child" from it and slightly transform them in loop section. code looks like this in general:

PShape gr, parts[];

void setup(){

  size(1920,1080);
  colorMode(HSB);

  gr = loadShape("a1-01.svg");
  parts = new PShape[gr.getChildCount()];

  for(int i = 0 ; i < gr.getChildCount();i++){
    parts[i] = gr.getChild(i);
    parts[i].disableStyle(); 
  }

  noStroke();

}

void draw(){

  fill(0,80);
  rect(0,0,width,height);
  background(255);

  for(int i =0 ; i < parts.length;i++){

    strokeWeight(noise(frameCount/20.0)*50);
    stroke(255,10);

    parts[i].resetMatrix();
    parts[i].translate(noise(frameCount/30.0+i/5.0,0)*10,noise(0,frameCount/30.0+i/5.0)*10);
    fill(0,noise(frameCount/30.0+i/20.0)*200);

    parts[i].draw(g);
  }
}

Now it seems that P5.js doesn't accept svg. I found it on https://github.com/processing/p5.js/wiki/Processing-transition

GoToLoop

For a successful transpilation from Processing's Java to Pjs' JS we need to stick w/ Processing 1's API.

For example @ line #35: parts[i].draw(g);, You're invoking draw() method which doesn't exist in the old PShape: http://ProcessingJS.org/reference/PShape/

The formal way to display a PShape is the function shape(): http://ProcessingJS.org/reference/shape_/

Even in Processing 3: https://Processing.org/reference/shape_.html

It's also very important to hit F12 when running the transpiled code in browser in order to check for any error messages there. :-&

vosembit

Thanks again. I should start learning Processing.Js from the beginning. Now start changing my code according to your advises and seems it will work soon. Thanks.