Как использовать спрайты изображений с SVG

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

Скачать исходники для статьи можно ниже

Однако он использует SVGS, а не более известные растровые методы.

SVG идеально подходят для логотипов, диаграмм и иконок по нескольким причинам:

Легко создавать SVG-файлы и манипулировать ими на клиенте или сервере.
В отличие от растровых изображений, SVG можно масштабировать до любого размера без потери качества.
В отличие от значков webfont, SVG остаются точными и могут применять несколько цветов, градиентов и даже сложные фильтры.

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

Несколько 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>

  <!-- further images -->

</svg>

<!-- display circle -->
<svg width="100" height="100">
  <use xlink:href="#circle" />
</svg>

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

Элемент use немного многословен и может использоваться только внутри svg (либо автономного изображения, либо встроенного в HTML). Он не может быть использован в качестве img iframe object фона CSS или в качестве фона CSS.

Метод стеков SVG, впервые задокументированный @simurai и @erikdahlstrom в 2012 году, обеспечивает один из способов обойти это ограничение. Отдельным спрайтам присваивается класс “sprite”, и встроенный CSS устанавливает для них значение display:none по умолчанию. Однако 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 – адрес отображает слой с идентификатором “circle” в любом выбранном вами измерении. Поэтому он может быть использован в img:

<img /><iframe width="300" height="150"><object>

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

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

Или в iframe :/iframe

<iframe src="./sprite.svg#circle">
  Your browser does not support iframes.
</iframe>

Или в object тег: /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.

PS: Красивых Вам и прибыльных сайтов!