Ukraine's Flag

Ukraine flag SVG image


Creating a Ukraine flag in SVG format is quite straightforward.1I always use the Pocket Guide to Writing SVG when hand-crafting SVGs. Using 2:3 proportions2Ukraine at Flags of the World. and correct colors,3Flag of Ukraine on Wikipedia. I created a basic SVG using rectangles:

<svg xmlns="" xmlns:xlink="" viewBox="0 0 3 2">
  <rect x="0" y="0" width="3" height="1" fill="#0057b7" stroke-width="0px" />
  <rect x="0" y="1" width="3" height="1" fill="#ffd700" stroke-width="0px" />

I find using to be the easiest place to do this, as it shows the resulting graphic as I work.


Next, I cut and pasted this into SVGOMG for optimizing the rects into paths:

<svg xmlns="" viewBox="0 0 3 2">
  <path fill="#0057b7" d="M0 0h3v1H0z"/>
  <path fill="gold" d="M0 1h3v1H0z"/>

SVGOMG also provided a shorter designation for the color gold and removed all whitespace. Filesize comparisons are below. Only 165 bytes uncompressed is quite small!4By way of comparison, the png format Ukraine flag on Wikipedia is 2KB. My US flag SVG file is 738 bytes, compressed.



Although most of is licensed under a Creative Commons license, I release my Ukraine flag SVG file to the public domain to use as you wish, no attribution required.

<< Next Post
Previous Post >>