SVG Спрайты

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

Оглавление:
  1. Спрайты для растрового изображения
  2. Спрайты SVG
  3. Ошибки в спрайтах SVG
  4. Пример спрайта SVG

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Россия, Республика Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

Проблемы с файлами SVG:

  • Файлы 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
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" style="width:100; height:100;" data="sprite.svg#circle"></object>

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