Статьи

Как использовать SVG Image Sprites

Декабрь 9, 2018

Несмотря на масштабируемость, экономию полосы пропускания и очевидный кандидат на адаптивный веб-дизайн, масштабируемая векторная графика (SVG) относительно редка в сети. Причины?

  • SVG не работают в старых версиях Internet Explorer — поддержка доступна только в IE9 +
  • технология существует с 1999 года — она ​​кажется старой и неинтересной
  • инструментов для векторного дизайна меньше
  • они основаны на XML, что многим кажется страшным.

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

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

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

спрайт изображения

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

Если нам нужен самый правый значок принтера, мы можем использовать CSS, чтобы показать правильное изображение, расположив фон: 

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

SVG Image Sprites

Можно ли разместить несколько изображений SVG в одном файле? Абсолютно! Они также имеют преимущество перед растровыми спрайтами; Вы можете ссылаться на каждое изображение по имени, а не вычислять позиции пикселей. Насколько я знаю, эта техника стеков SVG была разработана @simurai и @erikdahlstrom, хотя другие, возможно, внесли свой вклад.

Мы создадим очень простой 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>

Каждый из них размещается поверх другого в отдельном g Посмотрите изображение, и вы увидите все три:

SVG

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

 <defs>
	<style><![CDATA[
		.sprite { display: none; }
		.sprite:target { display: inline; }
	]]></style>
</defs>

Поэтому, если наш файл называется sprite.xmlsprite.xml#circle

Посмотреть страницу демонстрации спрайтов SVG …

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

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

Если вы не сможете убедить Webkit присоединиться к группе стеков SVG, лучшее решение для кросс-браузерного решения, например, objectembed 

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

Это также имеет то преимущество, что вы можете напрямую обращаться к SVG-спрайту и обновлять его с помощью сценариев DOM.

39
Share: