For the celebrations of the 200 years of the start of the Greek revolution against the Ottoman empire, a lot of Greek flags were posted on social media.
Although the flag is not so simple like the French or German, for example, it can easily be constructed by using the basic drawing primitives of SVG.
Trying to draw it by hand-crafted SVG directives, I thought it would be fun to minimize. I had never delved into SVG before, so I had to read the specification.
The design of the Greek flag is defined in a law.
The result, as minimal as I could make it, was:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 18">
<rect fill="#005bae" width="27" height="18"/>
<path stroke="#fff" stroke-width="2" d="M0,5h10 M5,0v10 M10,3h17 M10,7h17 M0,11h27 M0,15h27"/>
</svg>
The SVG in a file can be found on this document.
Reading the commands, one can easily see that they create a blue rectangle (which will serve as background and therefore show all blue parts), and then draw thick white lines: first the cross and then the horizontal stripes.
Obvious, once one sees the final result.
Update
After publishing the above SVG, I was challenged by a friend to also animate it.
I believe SVG is not sufficient for this, but of course there is no need to use JavaScript. Some CSS animation primitives were enough.
I computed the parameters of 24 different positions (“frames”) for an animation loop. I also drew a flag pole, since it looked very strange without it.
The final result, which is a single file with no external dependencies, can be found on this link.