Add a pride flag to your website for 348 bytes

There are many major issues in the world today, two of them being LGBTQ rights and web page bloating. (I didn’t say these issues were equally important!) Want your website to be progressive on both? There’s an easy answer: add a 348 byte SVG pride flag to your website!

First, the image is generated quite simply like this. Simply paste this code into your HTML and you’re set! Almost…

<svg xmlns='http://www.w3.org/2000/svg'>
    <title>The author of this site supports the LGBTQ community. You should too.</title>
    <rect width="100%" height="100%" fill="#750787"/>
    <rect width="100%" height="83.33%" fill="#004DFF"/>
    <rect width="100%" height="66.66%" fill="#008026"/>
    <rect width="100%" height="50%" fill="#FFED00"/>
    <rect width="100%" height="33.33%" fill="#FF8C00"/>
    <rect width="100%" height="16.66%" fill="#E40303"/>
</svg>

A couple notes:

This image doesn’t have a fixed size! That means you can scale it infinitely in any direction, although it also means you need to give it dimensions. You can either add width and height tags to the opening <svg> tag, or else assign a width and height in CSS (use the former if you would like to save it as a .svg file or otherwise use it as a standalone image).

You can also save this code alone in a file with a .svg extension and load it in an <img> tag, or anywhere else you might place an image.

You can also change or remove the tooltip text shown when you hover over the image with the <title> tag. Note that you can’t simply add a title as an attribute of the <svg> tag.

More ways to be proud!

But wait! There’s more you can do with svg. Check out this nifty CSS trick to add the flag inline like this:

.lgbtq:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='%23750787'/><rect width='100%' height='83.33%' fill='%23004DFF'/><rect width='100%' height='66.66%' fill='%23008026'/><rect width='100%' height='50%' fill='%23FFED00'/><rect width='100%' height='33.33%' fill='%23FF8C00'/><rect width='100%' height='16.66%' fill='%23E40303'/></svg>");
    content: " ";
    display: inline-block;
    height: 11px;
    margin-right: 4px;
    width: 20px;
}

Then just apply the lgbtq class to anything you’d like to have show the flag!

You can also fully url-encode the image like below, which I had to do to get it past WordPress’s pesky html filtering:

.lgbtq:before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27%23750787%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%2783.33%25%27%20fill%3D%27%23004DFF%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%2766.66%25%27%20fill%3D%27%23008026%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%2750%25%27%20fill%3D%27%23FFED00%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%2733.33%25%27%20fill%3D%27%23FF8C00%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%2716.66%25%27%20fill%3D%27%23E40303%27%2F%3E%3C%2Fsvg%3E");
    content: " ";
    display: inline-block;
    height: 11px;
    margin-right: 4px;
    width: 20px;
}

Don’t want to use css? Use it directly in an image tag!

<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27%23750787%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%2783.33%25%27%20fill%3D%27%23004DFF%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%2766.66%25%27%20fill%3D%27%23008026%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%2750%25%27%20fill%3D%27%23FFED00%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%2733.33%25%27%20fill%3D%27%23FF8C00%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%2716.66%25%27%20fill%3D%27%23E40303%27%2F%3E%3C%2Fsvg%3E" title="The author of this site supports the LGBTQ community. You should too."/>

It’s worth pointing out that depending on where you’re planning on using it it may make more sense to have the source in a .svg file so that clients can cache it.

Credit for the SVG source goes to Guanaco, found on Wikipedia.