My Union Jack (in SVG) is coded to reflect the union of England, Scotland and Northern Ireland. I live in Scotland where it is commonly known that the English f

My Union Jack (in SVG) is coded to reflect the union of England, Scotland and Northern Ireland. I live in Scotland where it is commonly known that the English flag is plastered over the Scottish Saltire, and they don't even get the same colour blue in each. There are different aspect ratios too, plus there is the 'jack'. I don't care for AI but I do like SVG to be human readable to some extent, although I do like oklch colours, which are not something I consider 'human readable'. Here I have the Scottish flag, the English one, a 'GB' flag which slaps one on top of the other with those Irish extras, to make a UK 'Jack' that waves badly because SVG filters are not something I am good at. Excuse the SVG code: <defs id="flags"> <symbol id="england" fill="white" clip-path="url(#flag-clip-two-by-one)"> <title>England</title> <use href="#bounding-square"/> <g id="st-george-cross" stroke="oklch(0.5472 0.242 22.16)" stroke-width="12"> <g id="england-flag-cross" transform="translate(60 60)"> <line id="england-flag-line" x1="-60" x2="60"/> <use href="#england-flag-line" transform="rotate(90)"/> </g> </g> </symbol> <symbol id="gb" clip-path="url(#flag-clip-two-by-one)"> <title>United Kingdom</title> <use fill="oklch(0.2873 0.139 259.18)" href="#saltire"/> <g id="st-patrick-lhs" stroke-linecap="square"> <line id="st-patrick-red-line" x2="60" y1="32" y2="62" stroke="oklch(0.5472 0.242 22.16)" stroke-width="4"/> <use href="#st-patrick-red-line" transform="translate(0 124) scale(1 -1)"/> </g> <use href="#st-patrick-lhs" transform="translate(120 -4) scale(-1 1)"/> <use stroke="white" stroke-width="20" href="#england-flag-cross"/> <use href="#st-george-cross"/> </symbol> <symbol id="scotland"> <title>Scotland</title> <g fill="oklch(0.5079 0.1766 247.88)" clip-path="url(#flag-clip-two-by-one)"> <g id="saltire"> <use href="#bounding-square"/> <g transform="translate(60 60)"> <line id="saltire-white" x1="-60" x2="60" y1="-30" y2="30" stroke="white" stroke-width="12"/> <use href="#saltire-white" transform="scale(-1 1)"/> </g> </g> </g> </symbol> <symbol id="union-jack"> <title>Union Jack</title> <defs> <filter id="flag-wave"> <feTurbulence type="fractalNoise" baseFrequency="0.0025" numOctaves="3" result="flag-wave-fractal-noise" seed="42"> <animate attributeName="baseFrequency" values="0.0025;0.01;0.002;0.005;0.004;0.0025" dur="12s" repeatCount="indefinite"/> </feTurbulence> <feDisplacementMap xChannelSelector="R" yChannelSelector="B" in="SourceGraphic" in2="flag-wave-fractal-noise" result="flag-wave-fractal-source" scale="50"/> <feGaussianBlur in="flag-wave-fractal-source" stdDeviation="0.4"/> <feMorphology operator="dilate" radius="0.5"/> </filter> <radialGradient id="radial-glow"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="grey"/> </radialGradient> <linearGradient id="flagpole-gradient"> <stop offset="0%" stop-color="grey"/> <stop offset="55%" stop-color="white"/> <stop offset="90%" stop-color="darkgrey"/> </linearGradient> </defs> <g transform="rotate(10)translate(25,10)"> <use href="#gb" transform="translate(7, -10)scale(0.75)" filter="url(#flag-wave)"/> <circle r="3.5" fill="url(#radial-glow)" stroke="none"/> <rect y="2.5" x="-2.5" width="5" height="120" stroke="none" fill="url(#flagpole-gradient)"/> </g> </symbol> </defs>