SVG Спрайты

Масштабирование изображении в спрайты экономит трафик и уменьшает количество запросов HTTP. Спрайты очень важный момент при строительстве любых веб-сайтов особенно с адаптивным дизайном для различных мобильных устройств.

Файлы SVG (Scalable Vector Graphics) редко встречаются в интернете.

Причины:

  • Файлы SVG не работают в старых версиях браузера Internet Explorer 6-8
  • Технология была создана в 1999 году — кажется старой и неинтересной
  • Мало инструментов для векторного дизайна
  • SVG на основе XML, это значит много файлов.

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

Спрайты растрового изображения

Если вы регулярно используете графику в шаблоне сайта, вы можете собрать всю графику в одно изображение. Одно изображение можно сжать повторно без потери качества, это методика применяется и сейчас. Главное преимущество спрайта, к серверу выполняется только один запрос HTTP для всех значков, а не несколько запросов для каждого значка если они будут по отдельности. Дело в том, что на загрузку значков по отдельности уходит больше времени, потому что браузеры имеют ограниченное количество параллельных запросов для одного домена.

Для того что бы определить место значка расположенного в спрайте, нужно в таблицу стилей добавить фон, в примере фон для тега h1:

.site-header h1 {
          background: url("sprite.png") no-repeat 0 0.2em;
          padding: 0 1em;
}

Не обязательно это делать вручную, существуют много хороших sprite css generator, которые делаю этот процесс автоматически.

к меню ↑

Спрайты SVG

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

к меню ↑

Ошибки в спрайтах SVG

Не делайте ошибки при создании спрайтов SVG. Давайте на примере разберём одну ошибку которую допускают веб-разработчики.

На сайте с удивительным названием (Хабрахабр) я прочитал запись с заголовком «Анализ применения SVG в качестве background-image». Цитирую слова автора записи:

Первым, на что я обратил внимание, был рост памяти при открытии одного попапа, в котором отрисовывались всего 20 элементов с иконками. …

Посмотрев, откуда берутся иконки, я увидел, что они взяты из спрайта размером 2000px х 500px. После подмены SVG спрайта на PNG спрайт с такими же размерами, случилось чудо — использование памяти вернулось в разумные рамки.

Первое предложение с трудом, но можно понять: отрисовывались 20 иконок в всплывающем окне. Но второе предложение бред, во первых спрайт 2000px скорее всего это высота, и 500px — это ширина спрайта. Чтобы не появлялось таких трудности с памятью как у этого бедолаги, мы должны понимать как сделать спрайт SVG для background-image.

к меню ↑

Пример спрайта SVG

Для примера, создадим очень простой SVG, это будут три геометрические фигуры — зеленый круг, красной квадрат и синий треугольник:

<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="sprite" id="circle">
    <ellipse cy="50" cx="50" ry="45" rx="45" stroke-width="5" stroke="#00ff00" fill="#00ff00" fill-opacity="0.75" />
</g>
<g class="sprite" id="square">
    <rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#ff0000" fill="#ff0000" fill-opacity="0.75" />
</g>
<g class="sprite" id="triangle">
    <path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#0000ff" fill="#0000ff" fill-opacity="0.75" />
</g>
</svg>

Геометрические фигуры SVG, расположены друг над другом, разделённые слоями g, которые имеют класс sprite и уникальный идентификатор id. На изображении ниже, все три слоя:

SVG

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

.sprite { display: none; }
     .sprite:target { display: inline; }

Если наш файл с названием sprite.xml добавьте к названию файла имя фигуры, например URL-адрес sprite.xml#circle будет отображаться слой активным с идентификатором id circle.

Существует несколько методов добавить SVG спрайты на веб-страницу: object/embed, iframe, тег img или background. Демонстрация показывает все методы, и они хорошо работают в Internet Explorer 9+, Firefox и Opera 12 и ниже.

К сожалению, img и CSS background методы не срабатывают в Webkit/Blink браузерах Chrome, Safari и Opera 15+. Нет никакой гарантии что стеки SVG когда-нибудь будет полностью поддерживается. Это плохо, потому что этот способ очень полезный.

Если Webkit вдруг когда нибудь присоединиться к стекам SVG, object или embed это лучшее кросс-браузерное решение, например:

<object type="image/svg+xml" width="100" height="100" data="sprite.svg#circle"></object>

Такое применение имеет преимущество, вы можете напрямую обновить SVG sprite с помощью DOM.