Comment by chrismorgan

Comment by chrismorgan 10 months ago

1 reply

I was curious what the biggest would be, and was disappointed when I looked at Glitch to find its 1017 bytes was so close to the limit only because of unnecessary usage of the XLink namespace. <use href> (as the preferred alternative to <use xlink:href>) has worked across the board¹ for more than five years now. Shortening that stuff trims off 55 bytes. I also managed to shave another 11 bytes off because that’s the sort of thing I do for fun:

  <svg xmlns="http://www.w3.org/2000/svg" aria-label="Glitch" role="img" viewBox="0 0 512 512" stroke-width="0" stroke="#2800ff"><path d="m0 0H512V512H0" fill="#d0fff1"/><mask id="m"><path id="f" d="m240 266q57 3 140-26c31 5 75 32 64 10s-2-24-2-38-8-22-1-33 8-35 4-36-53 22-65 21-38-14-72-19q-10-5-14-12t-39-16-44-10-29 26q-42-2-67 12t-38 28-12 30c23 9 38 12 3 22q7 8 19 15t31 14 48 1q19 40 77 28" fill="#fff"/><use href="#f" y="119"/></mask><g mask="url(#m)"><path d="m9 9H448V406H9" fill="#2800ff"/><path d="m9 256 207 2v-11h136v12h99V9H9" fill="#f79"/><g id="a"><path d="m183 162q19 30 3 58m17 14c13-41 14-45 2-76m0 0c78 4 112 7 184 41" fill="none" stroke-linecap="round" stroke-width="8"/><circle cx="131" cy="184" r="18" fill="#fff"/><path d="m113 184a14 14 0 110 1m3 5a5 5 0 100-2"/></g><use href="#a" y="120" stroke="#f79"/><path d="m216 258v-11h136v12h99v-55H299v11H9v191H447v-82H247v11H9v-79" style="fill:#37b;mix-blend-mode:screen"/></g></svg>
—⁂—

¹ I’m only considering browsers; see https://caniuse.com/mdn-svg_elements_use_href for compatibility data. As for other tools that handle SVG, I expect approximately all actively-maintained things to support this by now, but some older tools certainly won’t. I’ll also remark that I’m getting mixed signals about how you’re supposed to use these things. If you’re supposed to inline them into HTML, the SVG namespace declaration is unnecessary (so you can save 35 bytes, and you could also then remove many of the quotation marks on attributes); but if you’re supposed to link them, the aria-label and role="img" attributes don’t do anything (so you can save 25 + name-length bytes).