This is “IM – Denkmal für die inoffiziellen Mitarbeiter”. It is a scalable vector graphic printed on an 80×80 cm aluminium plate using dye sublimation printing. In this process, heat and pressure force dye into a gaseous state that chemically bonds with the coating applied to an aluminium plate. The result is a crisp and solid color image that is sealed by a high gloss coating. But it all starts with a bit of code.

A bit of code

“IM” is a Scalable Vector Graphic or SVG. It is an image created in vector graphics format and stored in a text file using Extensible Markup Language (XML). Vector graphics use geometry in a coordinate system to describe shapes and colours.

What are vector graphics?

Vector graphics is a form of computer graphics in which geometric primitives such as points, lines, curves and polygons are drawn using points called vertices. In SVG, these vertices are coordinates (x,y) on a 2D plane. For example, a line can be defined by a start point and an end point. A computer can then interpolate between them to create a straight line. Using vectors we can draw a curved line between the two points.

I’ve included the code that makes up “IM”. Don’t be put off by how it looks, I just want to show you how little is needed to create the image.

<!-- Author: BZZRT_  -->
	<svg x="0px" y="0px">
		<g id="background">
		<rect x="0" y="0" width="1920" height="1920" fill="rgb(255,230,0)"/>
		</g>
		<g id="im">
		<polygon fill="rgb(0,0,0)"
			points="0,0 450,0 644,1920 0,1920"/>
		<polygon fill="rgb(255,230,0)"
			points="0,240 520,240 520,640 0,640"/>
		<path fill="rgb(255,0,0)"
			d="M644,1920 L905,0 L1260,0 1345,640 L1430,0 L1920,0 L1920,1920 L1625,1920 L1580,1450 L1545,1920 L1125,1920 L1130,1450 L1062,1920 Z"/>
		</g>
	</svg>

That’s it! That is all it takes to describe this red, black and yellow artwork. The code defines an origin at coordinates (0,0) on a 2D plane of size 1920 by 1920, which acts as a canvas. It then describes some shapes and colours. In ‘IM’ there is a rectangle and three polygons.

What are polygons?

Polygons are geometric shapes such as squares and circles. A polygon is an irregular shape made up of several connected points or vertices. An ordered set of connected vertices is called a polyline. In “IM”, the red polygon has 13 vertices. The start and end points of the set of vertices overlap, closing this polyline into a shape. So all I have to do to create shapes like this is to create a list of coordinates and make sure the start and end point are in the same location.

These shapes are not limited to rectangles and straight lines. As I mentioned earlier, it is also possible to create curved shapes like this using vectors.

Scalability

One of the great things about vector graphics is its scalability. As you may have noticed in the code above, I use 1920 x 1920 to define the canvas, without using “mm” or “px” (pixel units). Interestingly, vector files only need values, not units. This means they can be scaled to any size without breaking. This allows me to use the designs equally well on different media.

Of course, there is a bit more to getting from this simple piece of code to a printed artwork using sophisticated machinery. I might talk about this in a future blog post.

---

Check out the Portfolio for more code art.

Thanks for visiting. Cheers!