Learn creative coding writing simple programs

149. Glowing SVG vector shape

In Processing you can easily load, display and manipulate vector images. Some advantages of vector images are: they often occupy little space on the hard drive, the can be enlarged without the result becoming pixelated, and there are tons of vector objects online which you can use in your programs. More about them: https://en.wikipedia.org/wiki/Vector_image

In this episode I use Inkscape, a free open source program, to draw and edit vector images. I save the file in Simple SVG format.

To be able to display SVG text in Processing, it must be converted to curves first.

To be able to set the fill and stroke properties of an SVG shape in Processing, you need to call shape.disableStyle() first.

You can display an SVG file in Processing just by writing two lines of code: PShape s = loadShape("heart.svg"); shape(s, 20, 20, s.width, s.height);

Note: I made a mistake with the screen resolution when recording this video and part of the image is cropped, but I think nothing important is missing.

Tags: svg, vector, pshape, shape, loadshape, disablestyle

Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```