Ukraine flag SVG image

Creation

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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" />
</svg>

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

Optimization

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2">
  <path fill="#0057b7" d="M0 0h3v1H0z"/>
  <path fill="gold" d="M0 1h3v1H0z"/>
</svg>

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!⁴By way of comparison, the png format Ukraine flag on Wikipedia is 2KB. My US flag SVG file is 738 bytes, compressed.

Download

Although most of brentlogan.com 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.

• 1
  I always use the Pocket Guide to Writing SVG when hand-crafting SVGs.
• 2
  Ukraine at Flags of the World.
• 3
  Flag of Ukraine on Wikipedia.
• 4
  By way of comparison, the png format Ukraine flag on Wikipedia is 2KB. My US flag SVG file is 738 bytes, compressed.