Skip to content

This repository includes the SVG data for queer flags. As extra there will also be the (straight) ally flag.

License

Notifications You must be signed in to change notification settings

stephfuchs/queer-flags-as-svg

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GitHub release version GitHub release date GitHub license

Pride Flags (LGBTQIA+ Community) as SVG plus ally flag

This repository includes the SVG data for queer flags. As extra there will also be the (straight) ally flag.

Pride flags

queer flag preview queer flag preview queer flag preview queer flag preview queer flag preview queer flag preview queer flag preview queer flag preview queer flag preview queer flag preview queer flag preview queer flag preview

Special flags

queer flag preview queer flag preview queer flag preview queer flag preview

SVG Viewbox calculation

The viewbox of each flag is calculated by its stripe count and the height of a stripe. In general is the height of each stripe set to 1000px. The origin is always set to x=0.0 and y=0.0

viewboxHeight = stripeCount * 1000px
viewboxWidth = viewboxHeight + 2000px
xPosStripe = 0
yPosStripe = viewboxHeight - 1000
widthStripe = 100%
heightStripe = 1000px

Stripe calculation

Table for the x and y position of a single stripe.

stripe position x position y position
#1 0 0
#2 0 1000
#3 0 2000
#4 0 3000
#5 0 4000
#6 0 5000
#7 0 6000
#8 0 7000
#9 0 8000
#10 0 9000

Table for the flag width and height by given stripe count.

stripe count (on flag) flag width (in px) flag height (in px)
1 3000 1000
2 4000 2000
3 5000 3000
4 6000 4000
5 7000 5000
6 8000 6000
7 9000 7000
8 10000 8000
8 11000 9000
8 12000 10000

Example for 5 stripes

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7000 5000">
    <rect fill="#000000" width="100%" height="1000" y="0" x="0"/>
    <rect fill="#A9A8A8" width="100%" height="1000" y="1000" x="0"/>
    <rect fill="#FFFFFF" width="100%" height="1000" y="2000" x="0"/>
    <rect fill="#AACE79" width="100%" height="1000" y="3000" x="0"/>
    <rect fill="#FFFFFF" width="100%" height="1000" y="4000" x="0"/>
</svg>

Boilerplate flags

In case you want create a flag the easy way, please feel free to use the the boilerplates within the flag-boilerplates folder.

Pride flag color overview

The following tables containing all used colors (incl. their hex value) for the pride flags. Most of the are used in other flags as well. It's an alphabetic order.

A-Gender

hex-value color
#000000 #000000
#A9A8A8 #A9A8A8
#FFFFFF #FFFFFF
#AACE79 #AACE79
#FFFFFF #FFFFFF
#A9A8A8 #A9A8A8
#000000 #000000

A-Romantic

hex-value color
#3DA543 #3DA543
#AACE79 #AACE79
#FFFFFF #FFFFFF
#A9A8A8 #A9A8A8
#000000 #000000

A-Sexuality

hex-value color
#000000 #000000
#808080 #808080
#FFFFFF #FFFFFF
#730099 #730099

Bi

hex-value color
#D60270 #D60270
#9B4F96 #9B4F96
#0038A8 #0038A8

Demisexual

hex-value color
#000000 #000000
#FFFFFF #FFFFFF
#730099 #730099
#808080 #808080

Gay

hex-value color
#3d1a78 #3d1a78
#7bade2 7bade2
#FFFFFF #FFFFFF
#98e8c1 #98e8c1
#078e70 #078e70

Genderfluid

hex-value color
#ff66b3 #ff66b3
#FFFFFF FFFFFF
#6E2381 #6E2381
#000000 #000000
#2E57A4 #2E57A4

Genderqueer

hex-value color
#A37EB6 #A37EB6
#FFFFFF #FFFFFF
#4C8331 #4C8331

Inter

hex-value color
#ffcc00 #ffcc00
#730099 730099

Lesbian

hex-value color
#e62e00 #e62e00
#ff8533 #ff8533
#FFFFFF FFFFFF
#ff66b3 #ff66b3
#b30086 #b30086

Non-Binary

hex-value color
#ffcc00 #ffcc00
#FFFFFF #FFFFFF
#730099 #730099
#000000 #000000

Pan

hex-value color
#ff33cc #ff33cc
#ffcc00 #ffcc00
#3399ff #3399ff

Poly-Sexuality

hex-value color
#730099 #730099
#028137 #028137
#2E57A4 #2E57A4

Trans

hex-value color
#3399ff #3399ff
#FFAFC8 #FFAFC8
#FFFFFF #FFFFFF
#FFAFC8 #FFAFC8
#74D7EE #74D7EE

special pride flags

This is a list of flags which represent the queer community

Rainbow flag (1979)

hex-value color
#E30613 #E30613
#F18815 #F18815
#FFED00 #FFED00
#028137 #028137
#2E57A4 #2E57A4
#6E2381 #6E2381

Rainbow flag (Philadelphia People Of Color Inclusive, 2017)

hex-value color
#000000 #000000
#613915 #613915
#E30613 #E30613
#F18815 #F18815
#FFED00 #FFED00
#028137 #028137
#2E57A4 #2E57A4
#6E2381 #6E2381

Rainbow flag (progress pride flag, 2018)

hex-value color
#FFFFFF #FFFFFF
#FFAFC8 #FFAFC8
#74D7EE #74D7EE
#613915 #613915
#000000 #000000
#E30613 #E30613
#F18815 #F18815
#FFED00 #FFED00
#028137 #028137
#2E57A4 #2E57A4
#6E2381 #6E2381

Ally flag (also known as straight allys)

hex-value color
#000000 #000000
#FFFFFF #FFFFFF
#E30613 #E30613
#F18815 #F18815
#FFED00 #FFED00
#028137 #028137
#2E57A4 #2E57A4
#6E2381 #6E2381

Issue tracker

Missing a flag? Wrong color? Other bugs found or having any questions? Please feel free to add a ticket in Issues.

License

MIT License

Copyright (c) 2021 Stephfuchs

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.