I’ve always been a fan of geometric patterns. When I was younger I used to draw Sierpinski triangles in class after a classmate (hi Marken) introduced them to me. I was fascinated by how hexagons tessellated after playing and designing maps for The Battle for Wesnoth, an open-source, turn-based strategy game which plays out on a hex grid. I still want to buy this Ikea rug.

As a Singapore University of Technology and Design graduate, the university’s logo also intrigued me greatly:

SUTD logo in black on white

According to the SUTD identity guidelines,

The simple, clean lines with no enclosures symbolize an open culture. The squarish shape draws inspiration from a Chinese seal (the East), a microchip (technology) and a maze (problem solving). Not least, the alphabets (the West) reflect a University that transcends national borders, cultures and economies (interactive).

But what I like most about it is its strictly defined, regular structure—all uniform spacing and right angles with no troublesome angles or curves or colours—each letter is just a two-colouring of a 9x9 grid, a total of 81 bits of information.

For example, we can represent the letter S with 1s and 0s like this, and you can still discern it:

1 1 1 1 1 1 1 1 1
1 0 0 0 0 0 0 0 0
1 0 1 1 1 1 1 1 1
1 0 0 0 0 0 0 0 0
1 1 1 1 1 1 1 1 1
0 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 0 1
0 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 1 1

Since a compact encoding like this is enough to fully define the SUTD logo, we should be able to generate the more mainstream versions of it from from this as well, with no loss of information.

The PBM file format

Our textual representation of the letter S above is a bitmap of a binary image, with 1s representing filled pixels and 0s representing blank pixels.

The PBM (Portable Bit Map) image format from the Netpbm family of image formats is one of the simplest ways to represent such an image. It encodes the dimensions and the state of each pixel in a binary image.

PBM and its sister formats PGM (Portable Gray Map) and PPM (Portable Pixel Map) have a “raw” binary format as well as a “plain” format. While binary formats represent pixels with individual bits, the plain formats use ASCII-encoded decimal numbers and are much easier to read, although described as “even more simplistic, more lavishly wasteful of space” than the already “expensive and not expressive enough” binary formats.

Here’s our letter S in plain PBM format:

P1
9 9
1 1 1 1 1 1 1 1 1
1 0 0 0 0 0 0 0 0
1 0 1 1 1 1 1 1 1
1 0 0 0 0 0 0 0 0
1 1 1 1 1 1 1 1 1
0 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 0 1
0 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 1 1

It’s almost the same as our previous representation, except we need to include the PBM header which comprises the magic bytes P1, indicating that this is a plain PBM image, and 9 9, the width and height of the image respectively.

We can compose the textual representations of each letter together to get the full SUTD logo in PBM format (remember to update the image dimensions):

SUTD.pbm

P1
39 9
1 1 1 1 1 1 1 1 1 0 1 0 1 0 1 0 1 0 1 0 1 1 1 1 1 1 1 1 1 0 1 1 1 1 1 1 1 1 1
1 0 0 0 0 0 0 0 0 0 1 0 1 0 1 0 1 0 1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1
1 0 1 1 1 1 1 1 1 0 1 0 1 0 1 0 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 1 1 1 1 1 1 0 1
1 0 0 0 0 0 0 0 0 0 1 0 1 0 1 0 1 0 1 0 0 0 1 0 1 0 1 0 0 0 0 0 0 0 0 0 1 0 1
1 1 1 1 1 1 1 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 1 1 1 1 0 1 0 1
0 0 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 0 0 0 0 0 1 0 1
1 1 1 1 1 1 1 0 1 0 1 0 1 1 1 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 1 1 1 1 1 1 0 1
0 0 0 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 1 0 1 0 1 0 1 0 1 0 1 0 0 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 1 1 0 1 1 1 1 1 1 1 1 1 0 1 0 1 0 1 0 1 0 1 0 1 1 1 1 1 1 1 1 1

In a similar way we can obtain the vertical and seal variants of the SUTD logo in PBM format (apparently the seal variant is supposed to be reserved for official documents though).

Exporting to other formats

Now that we have the SUTD logo in PBM format, we can use ImageMagick’s convert tool to convert it to other formats.

Let’s convert it to PNG using convert SUTD.pbm SUTD.png:

36x9 pixel SUTD logo in black on white background

That’s an actual size, 39x9 PNG image.

Let’s make it 10 times bigger using the -scale resize operator:

convert SUTD.pbm -scale 1000% SUTD-larger.png
SUTD logo in black with white background

(The transparency grid is not part of the image—it’s just there to make the image stand out against the white background.)

It’s important to ensure you pass a multiple of either 100% or the original image dimensions to the -scale operator to ensure pixel-perfect scaling.

We can also make the white parts of the image transparent:

convert SUTD.pbm -scale 1000% -transparent white SUTD-transparent.png
SUTD logo in black with transparent background

Finally, we can generate the white variant of the SUTD logo by inverting the colours and making black transparent instead:

convert SUTD.pbm -scale 1000% -negate -transparent black SUTD-white-transparent.png
SUTD logo in white with transparent background

Next time you need to use the SUTD logo, consider rendering it yourself instead of searching for it online (although you don’t get the wordmark this way).

Google Image Search for the SUTD logo

"sutd logo" "sutd logo transparent" "sutd logo white" "sutd logo high res"