The U.K. flag is a combination of 3 flags: for each of 3 parts of the U.K.
The Scottish flag will be the background. So we start with a blue rectangle.
<rect x="0" y="0" width="240" height="120" style="fill:blue;"/>
Now we use white lines to make the St. Andew's cross. This type of cross is called a "saltire".
<line x1="0" y1="0" x2="240" y2="120" stroke-width="24" style="stroke:white;"/>
<line x1="0" y1="120" x2="240" y2="0" stroke-width="24" style="stroke:white;"/>
Oops! The ends of the white lines stick out. We need to clip them with a clip-path.
<clipPath id="UK_flag">
<rect x="0" y="0" width="240" height="120" />
</clipPath>
Now we need to lay the Irish St. Patrick's cross over the Scottish one. If we did that, the red would completely block the white. So we split the cross through the middle line of the X and use only half on each bar, in a windmill pattern. Like this:
<clipPath id="windmill">
<path d="M 0,0 L 240,120 240,60 0,60 Z M 240,0 L 0,120 120,120 120,0 Z" />
</clipPath>
We use this windmill pattern as the clip-path for the Irish saltire. To give a little extra white margin we make the red a bit thinner than the white.
<line x1="0" y1="0" x2="240" y2="120" stroke-width="16" style="stroke:red;" clip-path="url(#pinwheel)"/>
<line x1="0" y1="120" x2="240" y2="0" stroke-width="16" style="stroke:red;" clip-path="url(#pinwheel)"/>
Finally we put the English St. George's cross on top of everything. But again we reduce the white field to just a narrow margin.
<line x1="0" y1="60" x2="240" y2="60" stroke-width="40" style="stroke:white;" />
<line x1="120" y1="0" x2="120" y2="120" stroke-width="40" style="stroke:white;" />
<line x1="0" y1="60" x2="240" y2="60" stroke-width="24" style="stroke:red;" />
<line x1="120" y1="0" x2="120" y2="120" stroke-width="24" style="stroke:red;" />