Presidential campaign logo design breakdown: Clinton vs Rand vs Cruz vs Rubio
US presidential candidate Hillary Clinton’s logo has already gotten a lot of ink and even its own parody Twitter account, proving our society is getting faster and faster at running things into the ground and then beating the dead horse remains as hard as possible.
Clinton (Democrat) is using an SVG, or Scalable Vector Graphics, image file. SVG is an open source, royalty free graphics format made by the World Wide Web Consortium (W3C). All recent browsers support SVG to some extent. SVG is written in XML or eXtensible Markup Language. XML is a markup language, like HTML for websites, but for creating things beyond just web pages that are human readable, sort of, if you don’t mind all those <tags>.
The weird part is what happens when you dig into the logo’s XML code, and delete the red arrow. You get these two misshapen bars, the irregular indents are covered by the arrow. Who knows why?
Republican presidential candidate Rand Paul’s campaign logo is similarly forward thinking. It too is an SVG.
So why an SVG and not a JPEG or PNG?
SVG is a vector graphics format, meaning that the image you see is made up of points, lines, curves, or shapes, all defined by mathematical formulas. JPEG, GIF, and PNG, the most popular image formats online, are raster graphics formats. That means that instead of specifying a shape, these formats specify at a certain point to draw a certain color on a grid. That means that they are “resolution dependent”, meaning they cannot be scaled up or down to any size without losing quality or gaining jagged edges. JPEGs, GIFs, and PNGs are great for photos, as life is too complicated for mathematically perfect curves and smooth colors.
However logos are simple; they’re basic shapes. Logos have to be capable of being copied over and over, modified slightly for size and color, such as a black and white print ad versus a banner on a website. The advantages of vector graphics are they can make easily alterable files, that can be grown or shrunk with no loss of quality and can be reused. The human readability means it’s fairly easy for even a novice web designer to change things up.
In Hillary’s logo, I could delete the red arrow fairly quickly. With both Hillary and Rand Paul’s logo, I can change the color by altering just 6 characters, here’s a green flame on Rand Paul’s logo. If you just want the flame, it’s a quick copy and paste or some stylesheet gaming. No need to involve Photoshop.
This flexibility is evident on their pages where the logo is reused with minor changes and at different sizes. It looks just as clear on a tiny screen, as it would on a massively scaled up screen for old people who are hard of sight.
Ted Cruz and Marco Rubio don’t have that flexibility, they use PNGs for their logos. They have but one minor trick up their sleeves, a transparent background. On Ted Cruz’s site, he uses the same image, twice, once as a header against a white background and again as his footer on a dark background. It works, kinda.
But what about a different dark background?
Awful, just awful.
Or what if he needs it blown up?
Blurry as shit.
Republican presidential candidate Marco Rubio's logo suffers from the same problem. He even had to create two separate images for his header and footer. No reuse here without a redesign. The checkerboard is part of my image editor and shows transparency.
SVG’s offer another advantage for logos, a reduction in file size. There’s a limit in Windows Explorer for showing file sizes, both Hillary Clinton’s and Rand Paul’s logos are actually smaller than 2 KB. In our tough economic times, can we trust candidates that waste our bandwidth willy nilly? I got a bandwidth cap of 1gb before I have to use 3G and not 4G!
Come on, it’s the 21st century and I expect the website and a logo to be able to cope with today’s changing world, not use 20th century thinking. It’s clear which two candidates are even remotely prepared for 2016.