DEV Community

Koji Toyota
Koji Toyota

Posted on

How to use SVG on Processing(p5)

First of all, my sample program is here.

Prerequisites

You've installed Processing on your PC/Mac.
Also please get a SVG file to show.

How to

At first, you have to prepare PShape object.
After that, call the loadShape method.

PShape some_kind_of_shape;
some_kind_of_shape = loadShape("Some_Kind_of_Shape.svg");

Enter fullscreen mode Exit fullscreen mode

Actually, I defined PShape variable as static in my sample code for simplicity.

After you've prepared the object properly, just calling shape method in draw method and you can see your svg.

void draw() {
  background(255);
  shape(some_kind_of_shape, position_x, position_y, shape_width, shape_height);
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
earthbound profile image
Alex Hall

This applies to Processing (Desktop) but not p5 (javascript variant of processing)