svg-too-large

Determine oversized <svg> element.

Description

Having a large <svg> element is not optimal for several reasons:

A large DOM requires more memory, takes longer to calculate styles, and requires expensive layout reflows (the last two when visually rendered).
When embedded inline, it will increase the size of the HTML file.
Google Lighthouse penalizes performance and SEO scores (rule Avoid excessive-DOM size).
Inline SVGs would reduce the number of HTTP requests, so it should make the page load faster the first time someone visits. The disadvantage is that your SVGs won’t be cached in the browser, and therefore they will have to be loaded every time.

If you have an <svg> sprite with a large number of <symbol> elements, then review the symbols as some may potentially be unused and hence be safely removed.
If you’re only using a few SVGs (around 10 or less than 5 KB in total), inline them. If you have many, go with <img> or background-image.
Use an external svg with a reference
```
<svg width="48" height="48" viewBox="0 0 48 48">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" href="assets/images/icons.svg#image-logo" x="0" y="0"/>
</svg>
```
Avoid repeating the same <svg> code within the same page. Use <use> HTML element.

Best Practice, Performance, SiteLint