Если вы еще не знакомы с технологией адаптивных иконок Джо Харрисона, то в ходе прочтения этой статьи наверняка узнаете много интересного и откроете для себя множество новых функциональных возможностей данного подхода. Я говорю это, опираясь на свой опыт и вспоминая свои первые впечатления от знакомства с данной технологией. В этой статье я хотел бы исследовать возможности, которые становятся доступными при использовании SVG и выходе за рамки «традиционной» масштабируемой векторной графики, которая используются для замены растровых PNG файлов. На самом деле, мы можем рассматривать SVG в качестве независимого модуля, который инкапсулирует CSS для настройки представления, а также адаптивного поведения, которое также инкапсулирует JavaScript для логики взаимодействия.

Теперь давайте более подробно рассмотрим эту технику.

Адаптивная SVG: метод «человека, ищущего работу».

Веб-сайт адаптивных иконок Харрисона реализован довольно просто. Из него вытекает хорошо известная техника изображений-спрайтов (легко перемещаемый по экрану растровый графический элемент, часто реализуемый с помощью аппаратных средств, широко используются в анимации). Если вы не знакомы со спрайтами, то позвольте мне немного рассказать о них. Создание изображения-спрайта – это метод, который ранее использовался только для растровых изображений с целью борьбы с плохой производительностью сети. Идея заключается в том, чтобы объединить множество мелких изображений в единый файл. Как следствие, клиент должен будет скачивать с сервера только одно изображение.

Вы также должны будете использовать CSS для получения полноценной возможности перемещения изображения и отображения только того фрагмента, который вам нужен для использования конкретного элемента. Так вы сможете экономить пользователю расходы, связанные с необходимостью загружать каждое изображение по отдельности. (Подробнее о спрайтах вы можете узнать на CSS-Tricks).

Техника Харрисона позволяет выполнять то же самое, за исключением того, что вместо формата PNG (переносимая сетевая графика, реализация метода эффективного сжатия изображений, альтернатива формату GIF) используется SVG (масштабируемая векторная графика, формат основан на XML). Все его иконки, объединенные в одном файле, будут выглядеть следующим образом:

Все иконки объединены в одном SVG файле. Увеличенная версия изображения.

Затем этот файл будет установлен в качестве фона контейнера, в котором необходимо будет отображать один из этих значков:

.icon {
	width: 300px;
	height: 300px;
	background: url(../images/home_sprite.svg);
	background-position: center top;
}

Приведенный выше пример достаточно простой, но все же имеет некоторые проблемы. В первую очередь, данное решение не достаточно портативное. На самом деле, чтобы заставить данный метод работать, необходимы две составляющие части: внешний CSS и SVG спрайт.

Адаптивный SVG: метод «бедного человека».

Поскольку CSS код может быть определен внутри самого SVG, давайте пересмотрим представленный выше пример для инкапсуляции значка и сделаем его портативным.

Во-первых, давайте уберем в спрайте все пространственные сдвиги иконок. Вполне очевидно, что это приведет к нарушению слоя икон:

Смотрите Pen inxym Ильи Пукальского (@pukhalski) на CodePen.

Давайте выполним перепланировку всех фигур и их групп в соответствии с принадлежностью к иконке. Для этого к каждой группе необходимо добавить класс .icon, а также порядковые номера, которые позволили бы нам выполнять идентификацию каждой группы. Приблизительно мы должны получить следующее (нумерация ведется, начиная с #home_icon_0, #home_icon_1 и до #home_icon_8):

<svg>
	<g id="home_icon_0" class="icon">
		<!-- paths and shapes -->
	</g>

	<!-- ... -->

	<g id="home_icon_8" class="icon">
		<!-- paths and shapes -->
	</g>
</svg>

Теперь мы готовы добавить информационные запросы, которые помогут выбрать требуемую иконку в SVG файле. Для написания CSS непосредственно в <svg> теге можно использовать <defs> теги.

<svg>
	<defs>
		<style>
		/* Hide all of the icons first. */
		.icon {
			display: none;
		}

		/* Display the first one. */
		#home_icon_0 {
			display: block;
		}

		/* Display the desired icon and hide the others according to the viewport's size. */
		@media screen and (min-width: 25em) {

			#home_icon_0 {
				display: none;
			}

			#home_icon_1 {
				display: block;
			}
		}

		@media screen and (min-width: 30em) {
			#home_icon_1 {
				display: none;
			}

			#home_icon_2 {
				display: block;
			}
		}

		/* And so on */

		</style>
	</defs>

<!-- Icon groups go here -->

</svg>

В результате, иконка теперь будет адаптироваться к размеру области просмотра — только теперь, CSS правила, информационные запросы и SVG формы будут размещаться в самом SVG файле. Измените размер браузера, и вы сможете увидеть, как работает этот пример:

Смотрите Pen uxIKB Ильи Пукальского (@pukhalski) на CodePen.

Адаптивная SVG: метод «человека с пистолетом».

Приведенный выше пример выглядит лучше, чем первый, но по-прежнему остаются некоторые вопросы:

• Может ли адаптивная SVG графика быть доставлена более удобным способом?
• Можно ли использовать данный адаптивный подход для размещения иконок и настройки элементов, а не просто для скрытия и отображения лишь частей файла?

Глядя на хореографию контента …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров