SVG-спрайты и их использование

Что такое спрайты изображений?

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

Например так:

Этот пример содержит восемь значков 24×24 в одном файле размером 192×24 пикселей. Файл может быть небольшого размера и для того, чтобы использовать любой значок из набора требуется только один HTTP-запрос. Загрузка восьми отдельных значков вряд ли займет намного больше времени при использовании HTTP/2, но изображения могут появляться в разное время и будут кэшироваться только в процессе первого использования.

Если вы хотите показать крайний правый значок с изображением принтера, сделайте его фоном элемента, используя следующий CSS:

	#print{
	  width: 24px;
	  height: 24px;
	  background: url('sprite.png') -168px 0;
	}

Для расчета положения пикселей и генерации кода CSS можно использовать различные инструменты: CSS Sprites Generator, cssspritestool.com, Spite Cow

Спрайты изображений SVG

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

Наиболее распространенный метод - размещение отдельных изображений в элементе <symbol>. Например, этот SVG содержит зеленый круг, красный квадрат и синий треугольник:

	<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
	  <symbol id="circle">
		<circle cx="50" cy="50" r="45" stroke-width="5" stroke="#0f0" fill="#0f0" fill-opacity="0.5" />
	  </symbol>
	  <symbol id="square">
		<rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" />
	  </symbol>
	  <symbol id="triangle">
		<path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#00f" fill="#00f" fill-opacity="0.5" />
	  </symbol>
	</svg>

Одно спрайт-изображение можно использовать на странице любое количество раз с помощью SVG <use>:

	<svg width="100" height="100">
	  <use xlink:href="/./spriteuse.svg#circle" />
	</svg>

	<svg width="100" height="100">
	  <use xlink:href="/./spriteuse.svg#square" />
	</svg>

	<svg width="100" height="100">
	  <use xlink:href="/./spriteuse.svg#triangle" />
	</svg>

К сожалению, старые браузеры, такие как IE11 и ниже, не загружают внешний файл. Лучшее решение - встроить полный SVG в разметку HTML и ссылаться на каждый спрайт, используя его идентификатор. Например:

	<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
	  <symbol id="circle">
		<circle cx="50" cy="50" r="45" stroke-width="5" stroke="#0f0" fill="#0f0" fill-opacity="0.5" />
	  </symbol>
	  <!—следующие изображение -->
	</svg>
	<!—блок для отображения  -->
	<svg width="100" height="100">
	  <use xlink:href="#circle" />
	</svg>

Стеки SVG-спрайтов

Элемент <use> немного громоздкий и может использоваться только внутри <svg> (отдельного изображения, либо встроенного в HTML). Он не может быть использован в тегах <img>, <iframe>, <object> или в качестве фона в CSS. Методика SVG-стеков, впервые предложенная @simurai и @erikdahlstrom в 2012 году, позволяет обойти это ограничение. Отдельным спрайтам назначается класс sprite, а встроенный CSS устанавливает для этого класса по умолчанию display: none;.

Однако, когда нужное изображение из спрайта отображается (:target), срабатывает правило display: inline. Пример:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style><![CDATA[
      .sprite { display: none; }
      .sprite:target { display: inline; }
    ]]></style>
  </defs>
  <g class="sprite" id="circle">
    <circle cx="50" cy="50" r="45" stroke-width="5" stroke="#0f0" fill="#0f0" fill-opacity="0.5" />
  </g>
  <g class="sprite" id="square">
    <rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" />
  </g>
  <g class="sprite" id="triangle">
    <path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#00f" fill="#00f" fill-opacity="0.5" />
  </g>
</svg>

Если этот SVG называется sprite.svg, вы можете добавить #target-name к URL-адресу, чтобы отобразить конкретный спрайт. Например, URL sprite.svg#circle отображает изображение с id="circle" любого нужного вам размера. Поэтому его можно использовать в <img>:

	<img src="/./sprite.svg#circle" width="100" height="100" />

Или в качестве фона CSS:

	.myelement {
	  background: url('./sprite.svg#circle');
	}

Или в <iframe>:

	<iframe src="/./sprite.svg#circle">
	  Ваш браузер не поддерживает фреймы.
	</iframe>

Или в теге <object>:

	<object type="image/svg+xml" data="./sprite.svg#circle">
	  <img src="/./fallback-image.png" />
	</object>

Метод работает во всех браузерах, включая Internet Explorer 9 и выше.

SVG Стеки на данный момент менее популярны, потому что передовой практикой стало встраивание SVG непосредственно в HTML. Однако это может быть идеальным решением, если вам нужно много значков SVG, но не нужно напрямую управлять ими с помощью CSS или JavaScript.

Оригинал статьи: How to Use SVG Image Sprites

Автор статьи: Craig Buckler

Перевод: Земсков Матвей