Почему страница с SVG иконками тормозит?

Question

[artur012097]

На сайте есть иконки формата svg количеством около 100 штук на страницу. Окно браузера тормозит при скролле (в основном на Chrome). При этом если поставить png, страница работает идеально. Проект собираю на Vue JS. Оптимизировал и сжал разными способами и на разных сервисах. Как можно оптимизировать svg.

Comments

[Sun_Day]

Svg можно сжать(гугол в помощь).
Но если там сто штук на одной странице, то скорее всего надо вставлять хотя бы какую-то часть в том же png.
Короче, ты сам на свой вопрос ответил.

Answer 1

[igumenov]

Не всегда имеет смысл использовать svg.
Если это сложные/объемные элементы то png/jpg размера 2х весят меньше., а результат тот же

Comments

[Александр]

согласен с вами
svg требует дополнительной обработки, т.е. если его слишком много браузер замучается его обрабатывать
Если без svg никак, то может лучше все иконки объединить в один файл https://snipp.ru/html-css/svg-sprite

[igumenov]

Александр, не уверен что если в спрайт объединить все то поможет.
Может нужно заняться оптимизированием самих svg?
https://jakearchibald.github.io/svgomg/

[artur012097]

igumenov, именно на этом сайте я и оптимизировал, не помогает.

[Максим]

artur012097, покажите ваш сайт

[Sun_Day]

Ну как бы не совсем тот же результат в плане того как изображение выглядит.