Sean's blog

Political Party Logos – part 1

Perhaps the most apparent aspect of a political party, after its most famous or infamous members, is its logo. Logos are spectacularly obvious in Malaysia around election times, as large flags line every street, hanging from bamboo poles planted in the ground, hanging from every building and plastered onto any flat surface. Campaign flags and posters litter the ground for weeks after an election.

PAS logo - 2000x1384 pixels

The Pakatan Rakyat (PR) party logos are simpler than those of the major Barisan Nasional parties. Simplicity can be good. In a country where the three major mother tongues each have their own mutually-unintelligible script, a simple way to distinguish political parties can be vital at election times.

Another good reason why simplicity is important is when people wish to use the logo in their own media. Most of the logos you can find on the Internet for the 3 PR parties are in bitmapped formats. A bitmapped format specifies the colour of each individual dot in the picture – the number of dots making up the picture is fixed when the image is created. The problem comes when the image is resized – the dots are too, becoming smaller (not a problem) or larger rectangles, so that smooth curves become jagged.

DAP Rocket 932x2000 pixels

There is a solution to this problem, and that is to use a scalable format such as SVG (Scalable Vector Graphics). Vector graphics formats don’t specify colours of dots, they are sequences of commands to draw the curves and shapes that make up an image. When you resize a vector graphics image, the larger image is re-drawn at the new size, so it looks just as good as the original.

An additional bonus with vector graphics is that the file size can be really quite small, and remains the same size no matter how big the final image is. With a bitmapped file, if you create a very large image  (say for a poster) with good quality, the file can be enormous. Wikipedia has a bitmapped version of the PAS logo and an SVG version, the SVG file is only about 7% the size of the bitmapped version. It’s not all good news though: in 2009, web browser support for SVG is still patchy – so use them for design and press, but stick with bitmaps for the web for now.

SVG is an open standard – in fact, its file format is plain text, so you can just look and change it by eye, without software at all! PAS are leading the PR partners in IT again, and there is an SVG PAS logo available on the web – I found it at wikipedia. You can see how simple the format is by looking inside the file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.0,
SVG Export Plug-In .
SVG Version: 6.00 Build 14948)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="svg2"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="647.5px" height="448px"
viewBox="124.75 -5.5 647.5 448"
enable-background="new 124.75 -5.5 647.5 448"
xml:space="preserve">
<rect id="white_background" x="124.5" y="-2.75"
fill="#008900" width="647.5" height="448"/>
<circle fill="#FFFFFF" cx="448.25" cy="221.25" r="156.5"/>
</svg>

Keadilan logo 2000x1004 pixels

The last two lines (starting <rect and <circle) are the ones that draw the PAS logo, the rest is information about the format of the file, and a comment to say the file was generated with Adobe Illustrator. You can pick up a genuine copy of Adobe Illustrator at A-sashi for RM2,400! That’s RM1,200 per SVG command!

Fortunately, there’s no need to edit SVG files by hand, you can also design on the screen using a FOSS (Free Open Source Software) program such as Inkscape. You can download and install Inkscape from inkscape.org on many different operating systems, or just add it from a list, if you’re using a Linux distribution like Ubuntu.

[There seems to be a small problem with the SVG file available at wikipedia, where the logo background doesn’t seem to quite match up with the page. Here’s an SVG file that doesn’t have that issue: PAS logo – plain SVG]

I’ve added a ‘http://blog.lolyco.com/sean/’ link across the bitmaps because some sites are hotlinking the images. If you want a beautiful bit-mapped image for your own site, download Inkscape and download my SVG file. Open the SVG file with Inkscape and choose ‘Export’ from the File menu. You can choose the dimensions of the image, and you’ll get a beautiful bit-mapped image, in whatever format you like, at whatever size you like. No jagged edges anywhere. Unless you do what one hotlinking site does, and specify the wrong proportions for the image in your HTML, Adxicible. Try specifying width or height, but not both.