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

Question

[Роман]

demo6.epiales.net/1test/_elements.html Как правильно вставлять svg? Я вставил 4ма способоми. 1й это растровая картинка, 2й через тег img, 3й свг код в хтмл, 4й через css. Как видно, лучше всего смотрится обычная растровая картинка, а свг размытые. Кто знает почему ?

Comments

[iBird Rose]

не вижу 4 способа. по ссылке только 1 лого через img

[Max Developer]

вставляйте через css, это будет самый простой, правильный и кроссбраузерный вариант !
рекомендую все используемые svg изображения в проекте загонять в спрайты !

[Роман]

iBird Rose: joxi.ru/Y2LXRKQh9gnvY2

[iBird Rose]

Роман: а _elements.html кто будет дописывать в ссылку в вопросе?

[Роман]

iBird Rose: сори, вроде вставил))

Answer 1

[iBird Rose]

У вас там нет svg. у вас везде png. Вы поменяли расширение файла с png на svg и думаете что оно стало svg?

Comments

[Роман]

я нажал в фотошопе экспорт как свг. Это та же самая пнг получается? А как мне тогда вытянуть с фотошопа свг иконку? только запрашивать у дизайнера, что б скидывал отдельно векторные иконки?

[Сергей delphinpro]

iBird Rose: Класс! =)

[iBird Rose]

Роман: да. нужно получить векторный вариант у дизайнера.

[Роман]

Сергей: ?

[Роман]

iBird Rose: спасибо большое. На тостере в вопросе как получить свг, посоветовали с фотошопа экспортировать в свг))

[Сергей delphinpro]

Роман: Если в фотошопе растр - то куда ты его не экспортируй, будет растр на выходе.
В вектор можно экпортировать шейпы, контуры.

[Роман]

Сергей: в фотошопе бывает и верктор в смарт обьекте

[Сергей delphinpro]

Роман: о, вы в курсе темы! Что ж вы растровый слой в вектор попытались экспортировать? =)

[Сергей delphinpro]

Роман: Ну и главное, ответ на ваш вопрос:
SVG-изображения следует вставлять на страницу тегом img
SVG-фоны следует прописывать свойством background-image в css
SVG-изображения с интерактивом следует вставлять инлайн-кодом
SVG-иконки нужно объединять в спрайт и использовать через use href:xlink (для поддержки олд-браузеров использовать svgforeverybody.js)

[Роман]

Сергей: спасибо. А если например есть стрелочка в слайдере, где меняется цвет при наведении и можно вставить только через цсс на бекграунд. Как лучше в такой ситуации поступить?свг спрайт или замена одной свг иконки на другую?

[Сергей delphinpro]

Роман: в моей практике не было случаев "можно вставить только через цсс на бекграунд". Я все такие веши делаю svg спрайтами через use

[Роман]

Сергей: спасибо

Answer 2

[Евгений]

Когда откроете в мобиле свой сайт, ваш png расмылится. SVG конечно же

Answer 3

[Роман Мисюра]

HTML-шорты, как правильно вставлять SVG
https://www.youtube.com/watch?v=TNX0-JLdM_U