DEV Community

loading...

How to use SVG on Processing(p5)

toyotarone profile image Koji Toyota ・1 min read

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

Discussion (1)

pic
Editor guide
Collapse
earthbound profile image
Alex Hall

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