Sign up to save your podcasts
Or
Share Fun programming 149: Glowing SVG vector shape
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
Fun programming 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: 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.
View all episodes
By 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: 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.