Как встраивать svg-изображение в html-страницу?

Question

[lightalex]

Всем привет!
Сразу прошу не поссылать в гугл)
Вопрос заключается в следующем:
Как на данный момент лучше всего встраивать svg-изображение в html-страницу?
То есть чтобы получилось кроссбраузерно и более оптимизировано?
Нашел старые статьи, но я сомневаюсь что за пару лет не изменились стандарты)

Comments

[Виталий Емельянцев]

У меня сейчас стоит такая задача - внедрение в коммерческий проект. Как сделаю и найду стабильное рабочее решение - отвечу Вам. Подпишусь на вопрос, чтобы не потерять.

Answer 1

[deleted-tnorman]

palmistry.hol.es —

Меры по оптимизации после копирования из файла сделаного в редакторе "incskape" и сохраненного как hand.svg

- влепил на страницу весь код, скопированный из файла SVG,
- немного почистил от мусора, который остается после редактора
- подписал элементы своими классами
- на сколько мог - вынес стили в CSS файл, чтоб ещё больше освободить пространство

SVG готов к работе. Есть селекторы которые можно использовать для управления через jQuery практически как и любыми другими тегами на странице.

Это без обсуждения серверной стороны. Вполне достаточно, чтоб удобно работать.

Answer 2

[ugodrus]

Кросбраузерно - никак. По моим сайтам до сих пор ходят с ИЕ6 но не более 1%. Полноценная поддержка SVG с 9ки. А пользователей с 8 очень много (свыше 5%). В общем вопрос актуален и требует костылей. Я в свое время делал с svgweb.

Answer 3

[Keyten]

Embed-ом можно.
Думаю, object-ом тоже.
Некоторые вроде понимают в img.
А также есть инлайновый svg.

Answer 4

[SerzN1]

Sara Soueidan рассказывает по порядку что к чему

https://www.youtube.com/watch?v=lf7L8X6ZBu8&list=P...
https://docs.google.com/presentation/d/1Iuvf3saPCJ...

если быстрее нужно то INLINE SVG
caniuse.com/#search=inline%20svg