Кроссбраузерное подключение svg

Вообще, большинство пользователей не понимают, как порою сильно хочется отобразить векторную картинку на страничке. Векторная графика в отличии от растровой выглядит хорошо при любом разрешении монитора, при любом масштабе она не превращается в пиксельный мусор, не размывается и т.п. Например, векторный логотип можно взять и увеличить в 3 раза, без потери качества, а вот с png нифига не получится.

pngvssvg

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

Способ 1:

Тут смысл в том, что современные браузеры с поддержкой HTML5 отобразят svg. Старый браузер отработает тег <image/>  как <img/>  и отобразят png.

Минус способа — HTML-валидатор выдает, что  у тега <image/> нет атрибута src.

Способ 2 (через background в CSS):

Способ хороший, но надо учитывать, что у svg обычно не указывается базовый размер изображения, поэтому бывает приходится указывать его. Например:

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *