15.03.2013

Кроссбраузерный SVG логотип

Фирма «Логотип»

Продолжая тему SVG предлагаю вам ознакомиться с кроссбраузерным вариантом логотипа, который будет замечательно выглядеть на Ретина дисплеях и обычных мониторах благодаря совместному использованию SVG и PNG графики. Также в конце статьи вы увидите, как сделать его еще и адаптивный. Ну а заодно затрону тему семантики верстки.

Конечно, еще проведено мало тестов, не во всех браузерах проведены испытания, ибо нет такой возможности, но данный пример уже можно использовать, не боясь, и, по мере нахождения багов и испытания в разных браузерах, буду обновлять пост.

Поддержка на данный момент:

• SVG «режим» Firefox 4+, Сhrome 4.0+, Opera 11.6+, Safari 4.0, IE10+
• PNG «режим» Firefox 3.6-, IE9-

Семантичный код

Для логотипа самая правильная конструкция является следующей

<h1>
	<a href="#" id="logo">Фирма "Логотип"</a>
</h1>

Использование надписи полезно для поисковиков и для индивидов с отключенными CSS или особенными браузерами.

Стили

#logo {

	background: url('logotype-trans.png') center center no-repeat transparent;
	background-image: url('logotype.svg'), -khtml-linear-gradient(transparent, transparent);
	background-image: url('logotype.svg'), -webkit-linear-gradient(transparent, transparent);
	background-image: url('logotype.svg'), url('logotype-trans.png');
	background-image: url('logotype.svg'), -ms-linear-gradient(transparent, transparent);
	background-image: url('logotype.svg'), linear-gradient(transparent, transparent);
	background-image: url('logotype.svg'), -o-linear-gradient(transparent, transparent);
	background-repeat: no-repeat, no-repeat;
	-moz-background-size: 0 0, 100% 100%; /* FF3.6 */
	background-size: 100% 100%, 0 0;

	/* Скрываем текст */
	overflow: hidden;
	text-indent: -9999px;
	font-size: 0;
	color: rgba(255,255,255,0);

	/* Устанавливаем размеры логотипа */
	display: block;
	height: 83px;
	width: 300px;

}

И вот тут самое интересное.
Первым background’ом мы делаем фон для старых браузеров типа IE6-7 и отдаем ему PNG картинку. В примере использован логотип с прозрачностью, но ведь Internet Explorer не поддерживает прозрачные PNG! Для него я использовал скрипт фиксов ie7(9).js

<!--[if lt IE 9]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Следующим этапом необходимо было как-то подключить SVG, но при этом для старых версий браузеров оставить PNG. И тут выяснилось, что почти все браузеры примерно одновременно с поддержкой SVG выпустили поддержку Multiple Backgrounds и градиенты. Воспользовавшись этими данными, мы прикручиваем SVG через Multiple Backgrounds. Таким образом, если в браузере нет поддержки Multiple Backgrounds и Linear Gradient, то браузер не поймет данную конструкцию и воспользуется первым условием. И всё бы хорошо, но тут всплыли два бага:

1. Firefox 3.6 поддерживает Multiple Backgrounds и Linear Gradient, но не поддерживает SVG. Так же выяснил, что FF3.6 поддерживает background-size только с префиксом, а FF4 уже без префикса. Этим и воспользуемся. Теперь для FF3.6 — будет отдаваться PNG, а для старших версий — SVG.
2. В Опере пока полностью протестировать не получилось. Был баг, что она не хотела показывать SVG. Однако, сегодня при тестах она уже передумала и показывает.

Далее мы скрываем текст несколькими способами сразу, для кучи. Хотя, для этого достаточно только первых двух строк (overflow и text-indent).

В последнем блоке идет отстраивание размера и позиции в зависимости от требований к макету/дизайну.

Responsive / Adaptive

Если верстка подразумевает Responsive Web Design или Adaptive Web Design, то разумеется без CSS3 Media Queries не обойтись. В основном, при вёрстке под Responsive Web Design или Adaptive Web Design разделение идёт «для нормального разрешения» и «для уменьшенного разрешения» за счет CSS3 Media Queries. В первом случае всё понятно, и вполне может подойти вариант выше. Вот для маленьких разрешений приходится подстраиваться.

Первым делом надо определиться, какой высоты будет шапка и отведенное место под логотип, а затем подстраиваться под эту высоту. Остальное браузер сделает за нас с помощью атрибута contain для background-size:

background-size: contain;

Таким образом наш предыдущий код меняется всего в одной строке

#logo {

	background: url('logotype-trans.png') center center no-repeat transparent;
	background-image: url('logotype.svg'), -khtml-linear-gradient(transparent, transparent);
	background-image: url('logotype.svg'), -webkit-linear-gradient(transparent, transparent);
	background-image: url('logotype.svg'), url('logotype-trans.png');
	background-image: url('logotype.svg'), -ms-linear-gradient(transparent, transparent);
	background-image: url('logotype.svg'), linear-gradient(transparent, transparent);
	background-image: url('logotype-trans.png'), -o-linear-gradient(transparent, transparent);
	background-repeat: no-repeat, no-repeat;
	-moz-background-size: 0 0, contain; /* FF3.6 */
	background-size: contain, 0 0;

	/* Скрываем текст */
	overflow: hidden;
	text-indent: -9999px;
	font-size: 0;
	color: rgba(255,255,255,0);

	/* Устанавливаем размеры логотипа */
	display: block;
	height: 83px;
	width: 300px;

}

А далее, уже с помощью Media Queries меняем третий блок кода, не забывая указывать высоту. Например:

@media (max-width:800px){
	#logo {
		/* Устанавливаем размеры логотипа */
		height: 50px;
		width: 100%;
	}
}

Преимущества и недостатки

Преимущества

• В современных браузерах, таких как Firefox, Chrome, Safari и Opera, в том числе и мобильные версиях, логотип будет векторный, что позволяет его масштабировать как душе угодно без потери качества
• SVG версия логотипа весит в несколько раз меньше. Для примера логотип из статьи в PNG 300×83 весит 6 Кб, в SVG — 2,8 Кб, в SVGZ — 1,2 Кб. При использование SVGZ советую его проверить во всех браузерах, в том числе для надежности и в FF4, ибо Firefox очень привередливый к SVGZ, точнее в нём есть баг. Будьте аккуратны или даже воздержитесь от использования SVGZ.
• Помимо мобильных версий, логотип будет прекрасно работать без танцев с бубнами на Ретина дисплеях.

Недостатки

• Решение пока в бета стадии, ещё не все браузеры проверены
• В опере замечен неприятный баг — при зуме страницы SVG увеличивается не равномерно. Это давно известный баг оперы, который исправлять не спешили. С переходом Оперы на chromium можно надеяться что этот баг они собой не прихватят.

Без изменений

• Для IE6-9, равно как и для других старых браузеров, логотип пока остается неизменным, в формате PNG

Демонстрация

Уменьшите размер окна браузера до ширины менее 800px, чтобы увидеть результат работы

Фирма «Логотип»

Демонстрация на отдельной странице

Вот и всё, ребята!

Хак для IE8

Добавлено 16 марта 2014

Internet Explorer 8 не захотел работать как предполагалось, а я это ранее проморгал. Спасибо Александру за найденный баг. Для IE8 придется применить хак.

#logo {

	background: url('logotype-trans.png') center center no-repeat transparent;
	background-image: url('logotype.svg'), -khtml-linear-gradient(transparent, transparent);
	background-image: url('logotype.svg'), -webkit-linear-gradient(transparent, transparent);
	background-image: url('logotype.svg'), url('logotype-trans.png');
	background-image: url('logotype.svg'), -ms-linear-gradient(transparent, transparent);
	background-image: url('logotype.svg'), linear-gradient(transparent, transparent);
	background-image: url('logotype-trans.png'), -o-linear-gradient(transparent, transparent);
	background: url('logotype-trans.png') center center no-repeat transparent\0/; /* IE8 hack */
	background-repeat: no-repeat, no-repeat;
	-moz-background-size: 0 0, contain; /* FF3.6 */
	background-size: contain, 0 0;

	/* Скрываем текст */
	overflow: hidden;
	text-indent: -9999px;
	font-size: 0;
	color: rgba(255,255,255,0);

	/* Устанавливаем размеры логотипа */
	display: block;
	height: 83px;
	width: 300px;

}