Why does a site with svg load gpu at 100%?

Question

SVG

Good afternoon. Not long ago I stuck 7 svg elements on the site, after that the site loads the percentage by 100% and the site lags, but if you reduce the screen, then the lags become smaller, what could this be connected with?

Answer 1

1) Restrict the size (width, height) for SVG properties inside the svg itself.
2) To the class inside which the SVG is located, add the will-change: auto CSS property, using the help of the GPU to draw the element.
3) Write the SVG code in the header using #shadow-root and call the svg by id in the right place.

Answer 2

Optimize svg have svgo site