Ukraine flag SVG image

Creation

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

FormatOrginalOptimized
Text264137
gzipped165126

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.