Есть ли проблема с svg в загрузке сайта?

Question

[NikSIk31]

Верстаю сайт и встал вопрос использования svg.
Является ли проблемой (для скорости загрузки сайта) наличие svg иконок в html в теговом виде? Примерно как на картинке

(и это ДЕЛЕКО не конец)
в самом коде у меня всё прилично, то есть подключаются иконки с папки images по названию, которое состоит из "x-название-иконки", примерно так:
<x-my-icon class="..."/>

Answer 1

[Арсений Матыцин]

1. Не стоит добавлять в тело сайта того чего там быть не должно.
2. Встраивать svg в тело страницы это нормально и в целом хорошо (если там нет лишнего мусора, конечно же).
3. «x-my-icon» — если это веб-компонент, или компонент на базе какой-нить либы типа Vue, то все ок, в противном случае это дичь.

Comments

[NikSIk31]

«x-my-icon» - это в ларавель дополнение. Оно возвращает как раз то, что на фото и больше ничего. А что за лишний мусор? Если о svg самом, то там вроде все нужное. Делалось в фигме

Answer 2

[ThunderCat]

В идеале так должно быть ТОЛЬКО если это компонент, формируемый программно, то есть каждый раз разное содержимое, в остальных случаях - вынести в файл и загружать из файла.
Это даст а) Кэшируемость, и б) асинхронность загрузки.

Comments

[NikSIk31]

я про компонент в предыдущем коменте написал.
У меня есть выбор: либо заюзать плагин, который позволяет мне просто прописать

при этом поменять цвет изображения по желанию.. в коде оно будет простынёй

или что-то делать с этим свг спрайтом.. однако я смотрю, что в коде оно не сильно то и отличается (больше вложенностей и да и все..)

+ у меня на сайте не так много свг:
1) На главной 2 картинки (но по коду большие)
2) В футере социальные сети и лого (нужно менять фон)
3) Остальные по мелочи (из 2-3 path элементов svg)

так вот, есть ли вообще смысл заморачиваться со спрайтом? или лучше уже вставить через плагин и может быть через src="blabla.svg" сделать статические?