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:

<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>

Comments

2 responses to “United States Flag SVG Image”

shelby

November 8, 2020

Wow, this is brilliant. Seriously. What a cool project. Your arch-geek instincts are an inspiration to me and, I suppose, have been for decades. I still remember the gravity maze you made with a board and some clay and a ball bearing back in the late 70s and the hours of fun I had when you let me play with it..
Brent Logan

November 8, 2020

Thanks! I was able to make the file even a little smaller after reviewing the Canadian flag SVG on Wikipedia. I updated my post.

I remember doing those gravity things with clay and ball bearings on my desk at school in 7th or 8th grade. I’m sure my teachers just *loved* me. :-D

Thanks for dropping by!