Как правильно вставлять SVG

[pm_wanderer]

А как работает взаимодействие через object?
Если «стекло разбивается», то значит можно через условный hover менять цвет линий SVG иконки?

[Zenitchik]

У меня де-жа-вю?
Не далее как позавчера я гуглил эту тему и нашёл вот что https://habrahabr.ru/post/260645/
Те же четыре способа, только слегка подробнее и в 15 году.

[Sykoku]

Есть и более ранние посты — habrahabr.ru/post/111682
FF нормально стал обрабатывать способ вставки через #img меньше года назад.
Обрезка, масштабирование, смещение и прочие фокусы не просто игнорировались, а выдавали квадраты Малевича.

[Shtucer]

Вольф говорит:
— Недавно прочел «Технологию секса». Плохая книга. Без юмора.
— Что значит — без юмора? Причем тут юмор?
— Сам посуди. Открываю первую страницу, написано — «Как правильно вставлять SVG». Разве так можно?»

[Hellek]

Ещё можно упомянуть о недостатке inline-вставки, такие svg не кэшируются, и если на странице много сложных изображений, то она будет довольно увесистой

[noodles]

gzip по идее это решает, ему только это и подавай)

как правило svg — это иконки в основном, а если векторная иллюстрация по настоящему сложная — то выгоднее, наверное, переводить в jpeg/png (от задачи зависит конечно же)

[Hellek]

Так, постойте. Вот пример, внизу иконки fractal-group.ru/mashinnaya-shtukaturka они вставлены в коде, тут gzip вроде никак не поможет. Пришлось делать такую вставку, чтобы удобно управлять через css издалека.

[wixus]

Гзип поможет, но можно и асинхронно подгружать содержимое свг (по атрибуту src у img) и заменять им картинку. Т.е. если JS отключен, то просто ховеров не будет, а если включен, то вместо img загрузится полноценный svg-код и верти его как хочешь.

[Hellek]

1) Хорошая идея для большей кроссбраузерности.
2) Но как всё же поможет gzip, если мы просто запрашиваем с него урла содержимое svg файла, чтобы его вставить? Насколько я знаю gizp помогает только в тех случаях когда мы подключаем файл через src/url/link (ну и разумеется если на этот mime type настроено сжатие на сервере).

Если я прав, то изначальный мой коммент был к тому, что до сих пор есть проблема с удобством. Хочешь легко управлять svg вставляй содержимое, хочешь скорость, кэширование подключай файлом

[wixus]

Гзип поможет, если свг вставлен в коде (инлайн) — сожмётся вместе с остальным хтмл.
Если запрашивать асинхронно, то файл будет отдаваться из кэша, а потом вставляться в хтмл инлайном. Т.е. и кэш, и управление, но без js не работает.
Впрочем, гзип должен работать и для файла.

[Hellek]

Да, согласен