Что разумнее с точки зрения ресурсов: инлайн или фон svg?

Question

[GunAlv]

Например, есть не жирная обычная иконка, которой не нужно менять цвет и т.п. — просто отобразить единожды (не в спрайте). В таком случае лучше инлайнить svg или использовать его как фоновое изображение? И почему?

Comments

[sergski]

зачем? обычным <img>

[Ankhena]

sergski, к img придется писать aria-hidden, иначе это будет контентная картинка.

GunAlv, Стили кешируются. Один раз загрузились и лежат себе спокойненько. А инлайн в HTML будет грузиться каждый раз при загрузке страниц.
Ещё есть SVG спрайты.

И в любом случае я за чистую семантичную разметку.

[GunAlv]

Ankhena, спасибо, вопрос кэша не пришёл в голову

Answer 1

[Vladimir Abdullaev]

Просто так инлайнить SVG не нужно. Если не собираетесь делать никаких манипуляций с его внутренностями через JS, то вставьте его тэгом img или стилем background-image. Тем самым Вы лишний раз не засорите разметку.

Есть еще способы вставки через iframe и object. Советую изучить разницу, поскольку это может пригодиться в будущем при работе.