Reuse icons via <svg use>

[matthiasrohmer]

The way we embed SVGs on the sites is not ideal. They are usually inlined, causing duplicate code to be shipped across the network. For example:

https://developer.chrome.com/en/docs/devtools/javascript/reference/ - which uses the Gotcha aside seven times, we inline the same 372 byte SVG seven times, which sums up to 2,54KB of which 2,17KB could be saved.

Not much, but there are other shortcodes which use more heavy icons, like the BrowserCompat shortcode made available for both sites with #41. This is used 17x on https://web.dev/learn/css/pseudo-classes/#hover, adding 18,4KB of SVG code to the site for each instance, totalling in 312,8KB.

Other pages on web.dev that use BrowserCompat more than 2x:

• web.dev/adaptive-loading-cds-2019/
• web.dev/async-clipboard/
• web.dev/building-a-dialog-component/
• web.dev/camera-pan-tilt-zoom/
• web.dev/constraintvalidation/
• web.dev/css-size-adjust/
• web.dev/fetch-metadata/
• web.dev/interop-2022-wrapup/
• web.dev/min-max-clamp/
• web.dev/push-notifications-common-notification-patterns/
• web.dev/state-of-css-2022/
• web.dev/web-platform-02-2022/
• web.dev/web-platform-03-2022/
• web.dev/web-platform-04-2022/
• web.dev/web-platform-05-2022/
• web.dev/web-platform-06-2022/
• web.dev/web-platform-07-2022/
• web.dev/web-platform-08-2022/
• web.dev/web-platform-09-2022/
• web.dev/web-platform-12-2022/
• web.dev/learn/css/animations/
• web.dev/learn/css/backgrounds/
• web.dev/learn/css/blend-modes/
• web.dev/learn/css/filters/
• web.dev/learn/css/functions/
• web.dev/learn/css/gradients/
• web.dev/learn/css/grid/
• web.dev/learn/css/overflow/
• web.dev/learn/css/pseudo-classes/
• web.dev/learn/css/selectors/
• web.dev/learn/css/shadows/
• web.dev/learn/css/typography/
• web.dev/learn/design/responsive-images/
• web.dev/metrics/custom-metrics/
• web.dev/patterns/media/screen-record/
• web.dev/reliable/two-way-communication-guide/
• web.dev/secure/security-headers/

By introducing a helper that keeps track of the used icons per page, we could avoid shipping duplicate bytes and also improve DOM size. This would work by giving each SVG an ID and then reuse it like this:

<svg viewBox="0 0 22 22">
  <use href="#firefox-logo" />
</svg>

[matthiasrohmer]

For now #41 (comment) works around this using CSS background images with data URLs to avoid HTTP requests. Not great for maintenance, but performant at least.