Форум Сайтостроение Веб-строительство

Логотип SVG + PNG кросбраузерно

SN
На сайте с 04.07.2013
Offline
84
SeoNk
801

На сайте есть логотипчик <img src="logo.png">.

Так же у меня на компьютере есть этот логотип в формате SVG.

Я хочу подключить логотип SVG к сайту так, чтобы в браузерах где формат SVG поддерживается, отображался логотип SVG, а где он не поддерживается - PNG.

Как это лучше всего реализовать?

Нужна максимальная кросбраузерность.

LEOnidUKG
На сайте с 25.11.2006
Offline
1731
LEOnidUKG
#1

Я как всегда задам тупой вопрос. А почему просто png не выложить и всё. В чём суть SVG пихать?

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/
SN
На сайте с 04.07.2013
Offline
84
SeoNk
#2

У svg качество лучше, особенно на мобилах с большим разрешением заметно.

tommy-gung
На сайте с 22.11.2006
Offline
287
tommy-gung
#3

http://caniuse.com/#search=svg

на всякий случай

Здесь не могла быть ваша реклама
vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#4

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

if (!Modernizr.svg) {

  $(".logo img").attr("src", "images/logo.png");

}
Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
VHS
На сайте с 28.09.2007
Offline
142
VHS
#5
LEOnidUKG:
Я как всегда задам тупой вопрос. А почему просто png не выложить и всё. В чём суть SVG пихать?

Размер меньше, качество лучше.

http://lynn.ru/examples/svg/

Несколько вариантов https://habrahabr.ru/post/159947/

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий