Главная » Интересно

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

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

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 нужной иконки.

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

Как использовать 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 и файловой структуры

Шаг 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-коде

Шаг 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 на вашей веб-странице.

Оцените статью