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
Below you can ask and answer questions related to this video. If your question is unrelated to the video, please post it at the Processing Forum as I'm unable to help with all of your programs and still have enough free time to eat and sleep :)
comments powered by Disqus