Here is the Union Jack from the article. Concise and surprisingly human readable (I could draw this with felt tip pens on graph paper).

One problem though. The Union Jack is not symmetrical. This is tantamount to spelling someone's name incorrectly, and could be taken the wrong way, much like how some Americans would be offended if there weren't all the stars or stripes depicted.

            <g xmlns="http://www.w3.org/2000/svg" clip-path="url(#cxr741hpqpxhvpg0uu2qvnr_0)">
                <rect x="0" y="0" width="1" height="0.5" fill="#012169"/>
                <line x1="0" y1="0.5" x2="1" y2="0" stroke="#fff" stroke-width="0.09"/>
                <line x1="0" y1="0" x2="1" y2="0.5" stroke="#fff" stroke-width="0.09"/>
                <line x1="0" y1="0.5" x2="1" y2="0" stroke="#c8102e" stroke-width="0.0375"/>
                <line x1="0" y1="0" x2="1" y2="0.5" stroke="#c8102e" stroke-width="0.0375"/>
                <rect x="0" y="0.2" width="1" height="0.1" fill="#fff"/>
                <rect x="0.45" y="0" width="0.1" height="0.5" fill="#fff"/>
                <rect x="0" y="0.22" width="1" height="0.06" fill="#c8102e"/>
                <rect x="0.47" y="0" width="0.06" height="0.5" fill="#c8102e"/>
            </g>

There are some optimisations to be made, if concision rather than human readable is the ultimate goal. For example, x1="0" y1="0" is not needed, the use of a 1 x 1 viewBox means not using integers, even a 2 x 1 viewBox remedies that.

For 'human readable', if something is mirrored, the code should reflect that, with 'use' and transform 'scale(-1, 1)'. More groups could be used to contain elements that share the same colour or stroke.

In my 'hand coded' GB flag the weird offset-symmetry of the Northern Ireland 'red diagonals' is explained in SVG.

I am not that keen on CSS in SVG, however, for colours, I could be using CSS variables.