Разработка сайтов в Волновахе, ДНР. Как использовать спрайты изображений SVG

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

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

Легко создавать и управлять SVG на клиенте или сервере.

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

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

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

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

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

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

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

#print

{

width: 24px;

height: 24px;

}

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

Генератор CSS-спрайтов

cssspritestool.com

Злобная корова

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

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

Самый распространенный способ — определить отдельные изображения в SVG . Например, этот SVG содержит зеленый круг, красный квадрат и синий треугольник

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

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

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

Этот элемент немного многословен и может использоваться только внутри

Метод стеков SVG, впервые задокументированный @simurai и @erikdahlstrom в 2012 году, обеспечивает один из способов обойти это ограничение. Отдельным спрайтам назначается класс, «sprite»а встроенный CSS устанавливает их display: noneпо умолчанию. Однако display: inlineприменяется, когда спрайт является целевым элементом:

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

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