Creating flags with CSS and other open source tools

Creating flags with CSS and other open source tools

These open source solutions help you get your vexillology on.

Flags lined up in a row
Image by : 

opensource.com

x

Get the newsletter

Join the 85,000 open source advocates who receive our giveaway alerts and article roundups.

“The creation and development of a body of knowledge about flags of all types, their forms and functions, and of scientific theories and principles based on that knowledge.” —The definition of vexillology, according to the Fédération internationale des associations vexillologiques.

Some flags are symbols of countries, and some are easily recognizable, such as the flags of Canada and Japan. Others are more obscure, such as those of Sierra Leone and Andorra. But who owns the copyright to flags of the world? According to Wikipedia, “national, governmental, or historical flags are … in the public domain because they consist entirely of information that is common property and contain no original authorship.” Of course, there are flags for states, provinces, cities, and so forth. It is assumed that geographically representative flags are in the public domain and can be used freely.

Images of national flags can be found in many places. For example, Spain’s Enrico Maria Crisostomo and Norway’s Hampus Joakim Nilsson offer collections on GitHub. You can use these images on websites, in print, or wherever you choose.

While finding and using national flags is easy, making your own flag or researching obscure flags may take some work. Fortunately, open source solutions can help you get your vexillology on.

Creating flags with CSS

Finding images of flags and using them on a website as .jpg or .png files is one approach, but you can also create them using Cascading Style Sheets (CSS).

Czech Republic-based Spectraweb’s Flag Sprites offers an easy to way to generate flags using CSS. You can access the entire collection of flags available in various formats, or narrow it down to your own selection. In this example, I focused on the flag of Norway:

By generating the code, I was able to modify it so that I could use only the Norwegian flag.

Another set of CSS code on GitHub, Vexillum, developed by Kazakhstan’s Talgat Uspanov, offers similar features:

You can download images of flags in different formats from many resources. Maps OpenSource includes not only flags but maps and coats of arms as well. All the content is licensed under a Creative Commons Attribution 3.0 Unported License. These can be handy to use as is or as a base for your own vexillological creations.

An easy-to-use open source flag creator is Andrew Arnold’s FlagMaker 2.0.1. I installed it from GitHub onto my Pop!_OS 17.10 laptop. Using the controls, I was able to change colors and placement and add symbols. Here is my flag for the Republic of Openso, available on Wikimedia Commons:

The open source New Zealand flag debate

In 2015, New Zealand, whose flag is similar to that of neighboring Australia, decided to “open source” ideas for a new national flag. Many new designs were proposed. In The New York Times Magazine, Rob Walker wrote, “In doing so, the Kiwis were joining what has become a quiet redesign trend. Mozilla, the company behind the Firefox web browser, is expanding its open-source principles to its branding, completely redesigning its logo through a multipart process guided by public input.”

Open-sourcing might seem like a good idea; certainly, the citizens should have a say in their national identity. But, as Walker noted in his article, “One of New Zealand’s most prominent designers declared himself ‘outraged’ by the lack of ‘professional design input.’”

In the end, the Kiwis decided to stick with their version of the Southern Cross flag by a majority of 56%.

Open source Hoosiers

Why should New Zealand have all the fun? The city of South Bend, Indiana, also decided to “open source” its flag redesign, and it achieved better results than New Zealand. More than 1,000 citizens gave their input, and a new flag design was selected. In the South Bend Tribune, Erin Blasko wrote, “The flag is based on designs submitted by South Bend residents Garret Gingerich and Jeffrey Koenig and Indiana University South Bend student Jesse Villagrana.” Council president Tim Scott added, “The flag is an open-source design, meaning it can be reproduced free of charge. Images are available for download on the city’s website.

Following South Bend’s example, the city of Scottsdale, Arizona is also in the process of open-sourcing its flag redesign.

Flags, the universe, and everything

Slovenia’s ZEK Crew set its sights a bit higher, designing flags for the future of civilization itself. The creative agency started with this question: What would our planet's flag look like? The team notes, “This, of course, is an open-source project; that's why we put the PDF files online.”

Whether you need an existing flag for a print project or website or you have designs on creating your own micronation, such as the Principality of Sealand, open source solutions can help make you the ruler of your own domain.

About the author

Jeff Macharyas is the Development Writer at Clarkson University and holds a MS in Cybersecurity and Computer Forensics from Utica College
Jeff Macharyas - Jeff Macharyas is a writer and creative services director who has worked in publishing, higher education and marketing for many years. He has been the art director for Quick Printing, The American Spectator, the USO’s OnPatrol, Today’s Campus, and other publications as well as a project manager, editor, writer and circulation manager. Jeff is certified in Google Analytics and holds a Technician Class Amateur Radio license: K2JPM. Jeff earned his BS in Communications from Florida State...