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.
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.
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.
Format
Orginal
Optimized
Text
264
137
gzipped
165
126
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.
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.
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.
Playing with SVGs is fun. Making them by hand and optimizing them, even more so.
The “Brent Logan” with the embedded heart in this site’s heading is an SVG. The heart at the bottom of each post is an SVG. This “breathing” circle is an SVG.
I’m amazed how small SVGs can be. This circle, including the animation, is less than 240 characters. That’s smaller than a tweet.
I started this exercise animating the heart to “breathe.” I wanted something to watch and synchronize my breathing with to relax and destress. I knew SVG would be a quick way to get there. So I modified the “beating heart” SVG I already had.
Yeah, I did lose a little along the way: the circle is now black and the smaller size changed slightly.
Using what I learned on the breathing circle, I was able to get the breathing heart down to 232 characters. That’s smaller than the blue breathing circle at the top of this post!
Update 2. I kept reading that the xmlns namespace attribute wasn’t necessary for an SVG that’s embedded directly within an HTML document, but I couldn’t make it happen in WordPress without the SVG code getting munged. That is, until I tried putting it in an HTML sidebar widget. Only 112 characters!
Interestingly, the success is not universal. It seems to work everywhere except Firefox which complains about r as an invalid property. It’s not interpreting it as an SVG. I also discovered that uBlock Origin notices its initial size is zero pixels and blocks it as a potential web tracker.
For those that are interested in the technical details, read on. The rest of you can stop right here.
tl;dr. In the header and footer, the graphic is a background SVG with embedded CSS scaling the heart element. The standalone hearts also are an SVG, this time with external CSS. In both cases, the CSS controls scaling.
First, I created a PNG of the text and heart with a screen capture from Keynote. Then I used an online PNG to SVG converter, the result of which I edited with a text editor to embed the CSS that animates the heart element. The embedded CSS is based on the hovering heartbeat animation CodePen by Joseph Emmerich. I modified the CSS to add transform-origin: 50% 50% immediately before each transform: scale() style to prevent the heart from moving when its scale changes. Finally, I used image replacement on the title text.
So far, I’ve tested it only on MacOS browsers. It works on WebKit-based browsers (Chrome, Opera, Brave, and Safari), but not Firefox. I still need to test on Windows browsers, and probably add a fallback static PNG for browsers that don’t support background SVGs.
Update. Since creating my first heading image, I created others with a lighter font and decreasing the frequency of animation.
it!
