Как правильно подключить SVG Sprite через object — подробная инструкция на 2021 год

iconНа чтение5 мин
iconОпубликовано
iconОбновлено

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

Для начала рассмотрим, что такое SVG Sprite. SVG Sprite – это набор иконок, объединенных в одном SVG-файле, что позволяет сократить количество HTTP-запросов и значительно увеличить скорость загрузки сайта. Однако, подключение спрайта может быть вызовом для начинающих разработчиков. И одним из способов подключения SVG Sprite является использование тега object.

Тег object в HTML используется для встраивания веб-содержимого, в данном случае SVG-файлов, в документ. Если мы хотим подключить SVG Sprite через object, нам понадобится создать тег object и указать в его атрибуте data путь к SVG-файлу с иконками. Далее, в HTML-документе, где нам нужно поместить иконку, мы можем вставить тег svg внутри тега object и с помощью атрибута use указать ID нужной иконки.

Содержание
  1. Как использовать SVG Sprite через тег object? Подробная инструкция на 2021 год
  2. Шаг 1. Подготовка SVG Sprite и файловой структуры
  3. Шаг 2. Подключение SVG Sprite через тег object в HTML-коде

Как использовать SVG Sprite через тег object? Подробная инструкция на 2021 год

Для начала, создайте файл с раширением .svg, который будет содержать все необходимые вам SVG-изображения. Например, назовите его «icons.svg». В этом файле вы должны поместить каждое изображение между открывающим и закрывающим тегами <symbol>. Не забывайте указывать уникальные идентификаторы для каждого изображения с помощью атрибута id:

<svg>
<symbol id="icon-1" viewBox="...">
<path d="..." />
</symbol>
<symbol id="icon-2" viewBox="...">
<path d="..." />
</symbol>
<!-- добавьте другие изображения по аналогии -->
</svg>

После создания файла SVG Sprite, вы можете его использовать на веб-странице. Для этого добавьте следующий код в ваш HTML:

<object type="image/svg+xml" data="icons.svg"></object>

В атрибуте type указывается тип контента — image/svg+xml, а в атрибуте data указывается путь к файлу SVG Sprite («icons.svg» в данном случае). Обратите внимание, что тег object должен быть пустым.

Чтобы отобразить конкретное изображение из SVG Sprite на странице, добавьте следующий код:

<svg>
<use xlink:href="#icon-1"></use>
</svg>

В атрибуте xlink:href указывается ссылка на нужное изображение с помощью символа # и уникального идентификатора изображения (например, icon-1).

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

Шаг 1. Подготовка SVG Sprite и файловой структуры

Перед тем, как подключить SVG Sprite через object, необходимо подготовить сам Sprite и создать соответствующую файловую структуру. Вот как это сделать:

  1. Создайте папку для хранения SVG файлов и назовите ее, например, «svg-sprite».
  2. Загрузите все нужные SVG файлы в эту папку. Обратите внимание, что все SVG файлы должны быть оптимизированы и не содержать ненужных тегов и атрибутов.
  3. Создайте пустой файл с расширением .svg и назовите его, например, «sprite.svg». Этот файл будет использоваться для объединения всех SVG файлов в один Sprite.
  4. Откройте файл «sprite.svg» в редакторе кода и вставьте в него следующий код:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-name" viewBox="0 0 width height">
<!-- Сюда вставьте содержимое SVG файла icon-name.svg -->
</symbol>
<!-- Здесь должны быть вставлены все остальные символы SVG для вашего Sprite -->
</svg>

Замените «icon-name» на уникальное имя символа SVG, которое будет использоваться для определения иконки из Sprite.

Определите «width» и «height» для каждого символа SVG в атрибуте viewBox. Эти значения должны соответствовать размерам иконки в пикселях.

После подготовки SVG Sprite и файловой структуры, вы готовы переходить ко второму шагу и подключить Sprite через object.

Шаг 2. Подключение SVG Sprite через тег object в HTML-коде

После того, как у вас есть готовый SVG Sprite файл, вы можете подключить его на свою веб-страницу с помощью тега <object>. Этот тег позволяет встраивать документы в HTML-код и здесь отлично подходит для подключения SVG файлов.

Вот как выглядит пример подключения SVG Sprite через тег object:

<object data="sprites.svg" type="image/svg+xml"></object>

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

Атрибут type указывает тип документа, который вы подключаете. В данном случае, это изображение в формате SVG.

Кроме того, вы можете добавить еще несколько атрибутов для настройки встраиваемого SVG:

  • width и height — задают размеры встроенного SVG, например: <object data="sprites.svg" type="image/svg+xml" width="100" height="100"></object>
  • aria-hidden — указывает, что SVG не должно быть доступно для ассистивных технологий: <object data="sprites.svg" type="image/svg+xml" aria-hidden="true"></object>
  • aria-label — добавляет текстовую подпись к SVG: <object data="sprites.svg" type="image/svg+xml" aria-label="Меню"></object>

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

Перейдите к следующему шагу, чтобы узнать, как использовать символы из SVG Sprite на вашей веб-странице.

Добавить комментарий

Вам также может понравиться