Avoid including large svg elements
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.
How to fix it
- 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>
orbackground-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.
Standard
Rule ID: svg-too-large
Best Practice, Performance, SiteLint