Вообще, большинство пользователей не понимают, как порою сильно хочется отобразить векторную картинку на страничке. Векторная графика в отличии от растровой выглядит хорошо при любом разрешении монитора, при любом масштабе она не превращается в пиксельный мусор, не размывается и т.п. Например, векторный логотип можно взять и увеличить в 3 раза, без потери качества, а вот с png нифига не получится.
В вебе для векторных изображений используется формат svg. Конечно, браузеры, которые не поддерживают его, вымирают, но пока что надо учитывать, что у кого-то он не отобразится. Поэтому подключать его надо кроссбраузерно. Я порылся в нете и нашел пару способов, которые мне приглянулись.
Способ 1:
|
1 2 3 |
<svg width="280px" height="52px"> <image xlink:href="logo.svg" src="logo.png" width="280px" height="52px"/> </svg> |
Тут смысл в том, что современные браузеры с поддержкой HTML5 отобразят svg. Старый браузер отработает тег <image/> как <img/> и отобразят png.
Минус способа — HTML-валидатор выдает, что у тега <image/> нет атрибута src.
Способ 2 (через background в CSS):
|
1 2 3 4 |
.svg{ background-image: url("image.png"); background-image: url("image.svg"), none; } |
Способ хороший, но надо учитывать, что у svg обычно не указывается базовый размер изображения, поэтому бывает приходится указывать его. Например:
|
1 2 3 4 5 6 7 |
.cat-desc{ background-image: url("../images/icons/icon-arrow.png"); background-image: url("../images/icons/icon-arrow.svg"), none; background-repeat:no-repeat; background-position: right 10px bottom 6px; background-size:21px 21px; } |