logomono. one-color logos, done right

GitHub
  • a technique for robust bare-bones SVG logos
  • a huge repository of popular logos
  • scripts and tools to help export + optimise SVG logos

Their logo deserves your respect

Some logos have rules for dark backgrounds — Let’s work with that

<svg xmlns= "http://www.w3.org/2000/svg" viewBox= "0 0 400 135"viewbox only — no width/height > <path d= "m 390.4,97.65 c … />nothing special needed here <path class= "only-light-background"hide with css when on dark backgrounds d= "M 69.25,6.142 C … " /> <path style= "display:none"work unstyled on light by default class= "only-dark-background"force visible on dark backgrounds with css d= "m 78.49,18.83 c … " /> </svg>

Minimum SVG, build the rest

There's a reason why we only want viewbox="" and not width/height attributes..
We can use tools to generate the width and height to your needs. This project will soon host scripts to generate optimised files for dark or light backgrounds — remove the alternate paths, and generally have an easy time working with logos

You can even generate your png-fallbacks after coloring them with css and more

One flat color, no exceptions

Okay, one exception: opacity is available – but only as a last option.
Do it inline as style="opacity:.5" rather than external css or fill-opacity. Only use it in cases where it would be otherwise impossible to accurately and respectfully convey the logo as one solid fill. Gradients are a no-no too beacuse they use id's which causes major concatination problems.

Here are some stubborn examples where it would be impossible to not use opacity without creating a completely different logo, messing with the original linework (literally stepping over the line)

4% space inside the viewbox, start at 0 0

Leave between 4% and 5% space to each edge in your logo area. This prevents logo edges from sharply aliasing at small sizes.

Don't give too much room however, or the logo will appear tiny when used next to others.

Logomono will reject files with blank areas of 10% or greater around the margin.

While we're talking viewboxes, try to keep viewbox coordinates below 500 and limit path node positions to 2 decimal places. This keeps our files small, lean and mean.


<path> only, basic coordinates

No rect, polygon, ellipse, line, circle or text elements. No transforms on <g>.
Sadly, no <use xlink:href="… or <clipPath> either.

We want these files to be as easy as possible to work with as raw elements and not risk tricky things like duplicate ID pollution when concatinated into HTML.

<Path> only means bake your text into paths too.

path{fill: currentcolor}

Something most webdevelopers using SVG logos inline will want to do.

path{fill:currentcolor} means the color: CSS property affects the fill of your logos
This CSS would be more complex to work with shapes made by another SVG element.

Ethical, editorial use only

Logomono files are for legitimate editorial reference and not for misrepresenting a brand.
This project collects quality logos in a standard format, to respect the integrity of their origins and intent.

Copyright and trademarks for logos are still held by their respective owner where applicable. When in doubt, always ask the represented organisation for permission to use their mark.

Fair use, fair dealing and fair comment laws exist in various countries around the world that defend the appropriate use of other organizations logos. But there is no substitute for getting permission

A solution to a complex problem

We know that journalists and other communicators source logos using image search engines — often finding lossy, full-color bitmaps from dated graphics and untrusted origins.

The absence of a logo on Logomono does not prevent this kind of misrepresentation.
Misuse of trademarks risks confusion, causes a visual battle for prominence, and often degrades the quality of all brands involved.
Being one color is one way to ensures appropriate use happens — and that the host brand gets visual ownership rather than the identities it references.

If you can verify you represent a brand and would like a logo removed from logomono, please file a github issue.
If you represent a brand and are sick of poor quality representations of your logo, contribute here.

Tutorials for SVG tools soon

SVG preparation process

The logomono tool will be tailored to testing and cleaning logos – when it's finished.
It will likely use one of (or a combination of):

In the meantime, please use any of the above to help optimise your SVG.

steps and checks