Lone Star State flag SVG

Inspired by recent events in Texas, I decided to create an SVG-format image of the lone star state flag. Compared with the US flag, it’s a fairly simple design, being:

A rectangle that: (1) has a width to length ratio of two to three; and (2) contains: (A) one blue vertical stripe that has a width equal to one-third the length of the flag; (B) two equal horizontal stripes, the upper stripe white, the lower stripe red, each having a length equal to two-thirds the length of the flag; and (C) one white, regular five-pointed star: (i) located in the center of the blue stripe; (ii) oriented so that one point faces upward; and (iii) sized so that the diameter of a circle passing through the five points of the star is equal to three-fourths the width of the blue stripe.

Flag of Texas at Wikipedia.

Once again, I needed to make a star in SVG. Having forgotten how I did it last time and realizing I’d likely have scaling issues if I just cut and pasted, I decided I’d reinvent the wheel, and maybe make it better this time. Searching online, I found the ratio between the radii of the circles for the inner and outer vertices1Pentagram at Wolfram MathWorld. is 0.381965 and the formulas for them in polar coordinates using radians are fairly elegant.2Drawing radial shapes in D3.js.

I created a spreadsheet for calculating the vertices and converting them into cartesian coordinates. This simplified adding offsets later on when I decided to put the star into a <symbol>. Fortunately, I made all the calculations dependent on a single scale factor, simplifying reducing the number of significant digits from four to three when I realized I didn’t need all that precision.

Once I had the flag working, I decided to hand-optimize, converting the colored rectangles into smaller <path>s. I did the same with the star, but after running the resulting file through SVGOMG, I realized that its optimizer is still smarter than me, using relative coordinates when it resulted in a smaller dataset.

Here’s my code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 533">
  <path d="M0 0H800V533H0Z" fill="#fff" />
  <path d="M0 267H800V533H0Z" fill="#bf0d3e" />
  <path d="M0 0H267V533H0Z" fill="#00205b" />
  <path d="M133 167,111 236H38L97 279,75 348,133 305,192 348,170 279,228 236H156Z" fill="#fff" />
</svg>

I find it easier to read than the fully optimized version from SVGOMG. Of course, there’s the Pocket Guide to Writing SVG if you need a reference.

Having made the lone star state flag, it wasn’t much more effort to make a one-star state flag. ;-)

One-star state flag

You can download the optimized versions of both flags, here:

I also have the one-star version available as a png:

Same as for the Ukrainian flag, I release my Texas state flag files to the public domain to use as you wish, no attribution required.

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.

United States Flag SVG Image

Feeling patriotic during the election count, I decided to handcraft an SVG of the United States flag. How hard could it be? Red background, white stripes, blue canton, and white stars. Wikipedia lists the specifications.

Creating the stars was a challenge, but I used a spreadsheet to calculate the vertices’ coordinates, which I then cut and pasted into an SVG path. From there, it was creating the backgrounds and placing the stars. Easy peasy.

Here’s the image and its brute force code:

US Flag
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 100">
  <symbol id="star" width="6.477" height="6.477" viewBox="-3.2385 -3.2385 6.477 6.477">
    <path fill="#fff" stroke-width="0" d="M0.000 -3.080, 0.691 -0.952, 2.929 -0.952, 1.119 0.364, 1.810 2.492, 0.000 1.176, -1.810 2.492, -1.119 0.364, -2.929 -0.952, -0.691 -0.952, 0.000 -3.080" />
  </symbol>

  <rect width="190" height="100" fill="#C1133D" />

  <rect y="7.69" width="190" height="7.69" fill="#fff" />
  <rect y="23.07" width="190" height="7.69" fill="#fff" />
  <rect y="38.45" width="190" height="7.69" fill="#fff" />
  <rect y="53.83" width="190" height="7.69" fill="#fff" />
  <rect y="69.21" width="190" height="7.69" fill="#fff" />
  <rect y="84.59" width="190" height="7.69" fill="#fff" />

  <rect width="76" height="53.85" fill="#002663" />

  <use href="#star" x="3.0915" y="2.1415" />
  <use href="#star" x="15.7515" y="2.1415" />
  <use href="#star" x="28.4115" y="2.1415" />
  <use href="#star" x="41.0715" y="2.1415" />
  <use href="#star" x="53.7315" y="2.1415" />
  <use href="#star" x="66.3915" y="2.1415" />

  <use href="#star" x="9.4215" y="7.5215" />
  <use href="#star" x="22.0815" y="7.5215" />
  <use href="#star" x="34.7415" y="7.5215" />
  <use href="#star" x="47.4015" y="7.5215" />
  <use href="#star" x="60.0615" y="7.5215" />

  <use href="#star" x="3.0915" y="12.9015" />
  <use href="#star" x="15.7515" y="12.9015" />
  <use href="#star" x="28.4115" y="12.9015" />
  <use href="#star" x="41.0715" y="12.9015" />
  <use href="#star" x="53.7315" y="12.9015" />
  <use href="#star" x="66.3915" y="12.9015" />

  <use href="#star" x="9.4215" y="18.2815" />
  <use href="#star" x="22.0815" y="18.2815" />
  <use href="#star" x="34.7415" y="18.2815" />
  <use href="#star" x="47.4015" y="18.2815" />
  <use href="#star" x="60.0615" y="18.2815" />

  <use href="#star" x="3.0915" y="23.6615" />
  <use href="#star" x="15.7515" y="23.6615" />
  <use href="#star" x="28.4115" y="23.6615" />
  <use href="#star" x="41.0715" y="23.6615" />
  <use href="#star" x="53.7315" y="23.6615" />
  <use href="#star" x="66.3915" y="23.6615" />

  <use href="#star" x="9.4215" y="29.0415" />
  <use href="#star" x="22.0815" y="29.0415" />
  <use href="#star" x="34.7415" y="29.0415" />
  <use href="#star" x="47.4015" y="29.0415" />
  <use href="#star" x="60.0615" y="29.0415" />

  <use href="#star" x="3.0915" y="34.4215" />
  <use href="#star" x="15.7515" y="34.4215" />
  <use href="#star" x="28.4115" y="34.4215" />
  <use href="#star" x="41.0715" y="34.4215" />
  <use href="#star" x="53.7315" y="34.4215" />
  <use href="#star" x="66.3915" y="34.4215" />

  <use href="#star" x="9.4215" y="39.8015" />
  <use href="#star" x="22.0815" y="39.8015" />
  <use href="#star" x="34.7415" y="39.8015" />
  <use href="#star" x="47.4015" y="39.8015" />
  <use href="#star" x="60.0615" y="39.8015" />

  <use href="#star" x="3.0915" y="45.1815" />
  <use href="#star" x="15.7515" y="45.1815" />
  <use href="#star" x="28.4115" y="45.1815" />
  <use href="#star" x="41.0715" y="45.1815" />
  <use href="#star" x="53.7315" y="45.1815" />
  <use href="#star" x="66.3915" y="45.1815" />
</svg>

Then it was time to optimize.

  • Correct the size of the stars
  • Better, more realistic, colors
  • Use of g and use to decrease file size

Here’s the resulting image and its code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 100">
  <symbol id="star" width="6.477" height="6.477">
    <path fill="#e3ded4" d="M3.2385 0.1585, 3.9300 2.2867, 6.1678 2.2867, 4.3574 3.6020, 5.0489 5.7303, 3.2385 4.4150, 1.4281 5.7303, 2.1196 3.6020, 0.3092 2.2867, 2.5470 2.2867" />
  </symbol>

  <rect width="190" height="100" fill="#9b1c2c" />

  <g id="two_white_stripes">
    <rect id="white_stripe" y="7.6923" width="190" height="7.6923" fill="#e3ded4" />
    <use href="#white_stripe" y="15.3846" />
  </g>
  <use href="#two_white_stripes" y="30.7692" />
  <use href="#two_white_stripes" y="61.5384" />

  <rect width="76" height="53.8461" fill="#33335f" />

  <g id="four_rows">
    <g id="two_rows">
      <g id="long_row">
        <g id="five_stars">
          <g id="two_stars">
            <use id="first_row_star" href="#star" x="3.0915" y="2.1415" />
            <use href="#first_row_star" x="12.66" />
          </g>
          <use href="#two_stars" x="25.32" />
          <use href="#first_row_star" x="50.64" />
        </g>
        <use href="#first_row_star" x="63.3" />
      </g>
      <use href="#five_stars" x="6.33" y="5.38" />
    </g>
    <use href="#two_rows" y="10.76" />
  </g>
  <use href="#four_rows" y="21.52" />
  <use href="#long_row" y="43.04" />
</svg>

Finally, judicious use of SVGOMG to:

  • Eliminate whitespace
  • Convert shapes to paths
  • Decrease unnecessary precision
  • Shorten ID names
  • A bunch of other stuff

Seriously, if you’re into optimizing SVGs and you’re not using something like SVGOMG, you’re working too hard.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 100"><symbol id="c" width="6.48" height="6.48"><path fill="#e3ded4" d="M3.24.16l.69 2.13h2.24L4.36 3.6l.69 2.13-1.81-1.32-1.81 1.32.69-2.13L.31 2.3h2.24"/></symbol><path fill="#9b1c2c" d="M0 0h190v100H0z"/><g id="b"><path id="a" fill="#e3ded4" d="M0 7.69h190v7.69H0z"/><use href="#a" y="15.38"/></g><use href="#b" y="30.77"/><use href="#b" y="61.54"/><path fill="#33335f" d="M0 0h76v53.84H0z"/><g id="h"><g id="g"><g id="i"><g id="f"><g id="e"><use id="d" href="#c" x="3.09" y="2.14"/><use href="#d" x="12.66"/></g><use href="#e" x="25.32"/><use href="#d" x="50.64"/></g><use href="#d" x="63.3"/></g><use href="#f" x="6.33" y="5.38"/></g><use href="#g" y="10.76"/></g><use href="#h" y="21.52"/><use href="#i" y="43.04"/></svg>

Only 783 bytes! Not bad, considering my first version is 3.08k.

Feel free to download and use without limitations.

Update. Code is never done, and this is no exception. Looking at another flag’s SVG code, I realized that I could eliminate the decimal point with appropriate scaling.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19000 10000">
  <symbol id="star" width="648" height="648">
    <path fill="#e3ded4" d="M324 16, 393 229, 617 229, 436 360, 505 573, 324 442, 143 573, 212 360, 31 229, 255 229" />
  </symbol>
  <rect width="19000" height="10000" fill="#9b1c2c" />
  <g id="two_white_stripes">
    <rect id="white_stripe" y="769" width="19000" height="769" fill="#e3ded4" />
    <use href="#white_stripe" y="1538" />
  </g>
  <use href="#two_white_stripes" y="3077" />
  <use href="#two_white_stripes" y="6154" />
  <rect width="7600" height="5384" fill="#33335f" />
  <g id="four_rows">
    <g id="two_rows">
      <g id="long_row">
        <g id="five_stars">
          <g id="two_stars">
            <use id="first_row_star" href="#star" x="309" y="214" />
            <use href="#first_row_star" x="1266" />
          </g>
          <use href="#two_stars" x="2532" />
          <use href="#first_row_star" x="5064" />
        </g>
        <use href="#first_row_star" x="6330" />
      </g>
      <use href="#five_stars" x="633" y="538" />
    </g>
    <use href="#two_rows" y="1076" />
  </g>
  <use href="#four_rows" y="2152" />
  <use href="#long_row" y="4304" />
</svg>

The resulting SVGOMG-optimized code is 738 bytes small!

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19000 10000"><symbol id="c"><path fill="#e3ded4" d="M324 16l69 213h224L436 360l69 213-181-131-181 131 69-213L31 229h224"/></symbol><path fill="#9b1c2c" d="M0 0h19000v10000H0z"/><g id="b"><path id="a" fill="#e3ded4" d="M0 769h19000v769H0z"/><use href="#a" y="1538"/></g><use href="#b" y="3077"/><use href="#b" y="6154"/><path fill="#33335f" d="M0 0h7600v5384H0z"/><g id="h"><g id="g"><g id="i"><g id="f"><g id="e"><use id="d" href="#c" x="309" y="214"/><use href="#d" x="1266"/></g><use href="#e" x="2532"/><use href="#d" x="5064"/></g><use href="#d" x="6330"/></g><use href="#f" x="633" y="538"/></g><use href="#g" y="1076"/></g><use href="#h" y="2152"/><use href="#i" y="4304"/></svg>