HTML Academy · Урок

Встроенный SVG, img и object

Выбирайте подходящий способ встраивания SVG для своей задачи

«Встроенный SVG, img и object» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Три способа встроить SVG

SVG (масштабируемая векторная графика) можно встроить тремя способами:

<img src="icon.svg"> — простой вариант с кэшированием, без доступа к JS/CSS
<object data="chart.svg"> — интерактивное взаимодействие, отдельный документ
Встроенный SVG внутри HTML — полный доступ к CSS/JS, без дополнительного запроса

SVG через img src

Самый простой способ: указать SVG в качестве изображения:

<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
     cannot use SVG filters or animations from CSS -->

SVG как фоновое изображение CSS

Используйте SVG как фон CSS для декоративных значков:

.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->

SVG через элемент object

Встраивайте SVG с помощью <object> для создания интерактивного SVG:

<object
  type="image/svg+xml"
  data="interactive-chart.svg"
  width="800"
  height="400"
  aria-label="Interactive revenue chart"
>
  <!-- Fallback: -->
  <img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
     SVG document is somewhat isolated from parent page -->

Встроенный SVG

Встраивайте SVG непосредственно в HTML для полного контроля:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
  focusable="false"
>
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
</svg>

Преимущества встроенного SVG

Зачем использовать встроенный SVG:

Полная стилизация с помощью CSS: fill, stroke, переходы, анимации
Взаимодействие через JavaScript: выбор элементов SVG, обработка событий
currentColor: наследование цвета из родительского CSS
Отсутствие дополнительного HTTP-запроса
Возможность включить SVG в дерево доступности с помощью роли и заголовка

Недостатки встроенного SVG

Недостатки встроенного SVG:

HTML-файл становится больше
Браузер не кэширует его отдельно
Нельзя легко повторно использовать один и тот же SVG на нескольких страницах без дублирования
Повторение кода для одинаковых значков

Элемент use для спрайта

Определите значки SVG один раз и ссылайтесь на них с помощью <use>:

<!-- Icon sprite (often hidden): -->
<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17l-5-5"/>
  </symbol>
</svg>

<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>

Доступный SVG

Сделайте встроенные SVG доступными:

<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
  <!-- chart paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
  <!-- decorative paths -->
</svg>

<!-- focusable="false" needed for IE to prevent tab focus -->

Приём с currentColor

Используйте currentColor, чтобы унаследовать цвет текста из CSS:

<button class="btn btn-primary">
  <svg aria-hidden="true" width="16" height="16">
    <path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
  </svg>
  Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
     When button is hovered/focused, icon color changes too
     No need for separate icon color rules -->

Быстрая проверка

В чём главное преимущество встроенного SVG по сравнению с использованием SVG через img src?

Итоги: встраивание SVG

Основы встраивания SVG:

<img src> — простой способ, без доступа к CSS/JS, с кэшированием
Фоновое изображение CSS — только для декора
<object data> — интерактивный SVG, частично изолированный
Встроенный SVG — полный контроль через CSS/JS, без дополнительного запроса
Спрайт SVG с помощью <symbol> + <use> — эффективное повторное использование

Часто задаваемые вопросы

Урок «Встроенный SVG, img и object» бесплатный?

Да — полный текст урока «Встроенный SVG, img и object» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Встроенный SVG, img и object»?

Выбирайте подходящий способ встраивания SVG для своей задачи Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Встроенный SVG, img и object»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Встроенный SVG, img и object
Основные фигуры SVG: rect circle path
viewBox SVG и адаптивное масштабирование
Анимация SVG с помощью CSS и SMIL

← Назад к HTML Academy