SVG: что это за формат и как вставить его на сайт

SVG — это формат векторной графики: картинка описана не пикселями, а текстом с координатами фигур, поэтому она остаётся чёткой при любом размере. На сайт SVG вставляют четырьмя способами: кодом прямо в HTML, тегом <img>, фоном через CSS или тегом <object>. Если иконке нужно менять цвет из CSS, вставляйте её кодом и красьте свойством fill.

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

CheckroiПодборка курсов по CSS182 курса • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Что такое SVG простыми словами

Расшифровка: Scalable Vector Graphics, «масштабируемая векторная графика». Формат описывает рисунок на языке разметки, похожем на XML: круг задаётся центром и радиусом, линия двумя точками, сложная форма контуром <path>.

Стандарт ведёт W3C. Действующая рекомендация называется SVG 1.1 Second Edition от 16 августа 2011 года, а SVG 2 пока имеет статус Candidate Recommendation, последний снимок датирован 6 октября 2026 года.

Самый короткий рабочий файл выглядит так:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48">
  <path d="M12 2l3 6.5 7 .8-5.2 4.8 1.5 7L12 17.6 5.7 21.1l1.5-7L2 9.3l7-.8z"/>
</svg>

Это звезда, она же пример во всех разделах ниже. Атрибут viewBox задаёт систему координат рисунка: четыре числа означают min-x, min-y, ширину и высоту (справка MDN по viewBox). Звезда нарисована в поле 24 на 24, а width и height растягивают её до 48 пикселей без потери чёткости.

Чем SVG отличается от растровых форматов:

Отсюда и правило выбора: логотипы, иконки, схемы и графики делайте в SVG, фотографии оставляйте в JPG, PNG или WebP. Снимок векторными фигурами точно не передать: контуров понадобятся тысячи, и файл выйдет тяжелее JPG.

Как открыть файл и посмотреть его код

SVG хранится как текст, поэтому у файла две «стороны»: картинка и код. Увидеть обе можно без специальных программ.

• Картинка: перетащите файл в окно браузера. Chrome, Firefox, Safari и Яндекс Браузер показывают SVG как обычное изображение.
• Код: откройте файл любым текстовым редактором, от «Блокнота» до VS Code. Внутри будут теги <svg>, <path>, <circle> и их атрибуты.
• Код на чужом сайте: откройте инструменты разработчика в Chrome сочетанием Ctrl+Shift+C (на Mac Cmd+Option+C, справка Chrome DevTools) и наведите курсор на иконку. Если SVG вставлен в разметку, в панели «Элементы» будет виден весь его код.

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

Как вставить SVG в HTML: четыре способа

Способ выбирают по одному вопросу: нужно ли управлять картинкой из CSS и JavaScript страницы.

На кадре ниже одна и та же звезда вставлена четырьмя способами. В стилях страницы написано .star path { fill: #7324FF; }, но фиолетовой стала только звезда, вставленная кодом.

Почему так: при вставке через <img> и background-image браузер обращается с SVG как с картинкой. В этом режиме, по справке MDN, на SVG могут действовать ограничения безопасности: JavaScript отключён, а внешние ресурсы (изображения, таблицы стилей) не загружаются, если они не встроены в файл через data:URL. У <object> скрипты работают, но файл живёт отдельным документом, и правила CSS страницы до него не доходят.

Решение для типичной задачи: иконку, которая меняет цвет при наведении, вставляйте кодом, а логотип в шапке тегом <img> с атрибутом alt. Подробнее о связке стилей и разметки — в статье как подключить CSS к HTML.

Как поменять цвет иконки через fill и currentColor

Цвет заливки фигуры задаёт fill. Принцип тот же, что у любых каскадных стилей CSS: правило с более высоким приоритетом перекрывает остальные. Он бывает атрибутом прямо в разметке и CSS-свойством, и при конфликте выигрывает CSS: в справке MDN по fill сказано, что, когда заданы оба, приоритет у CSS-свойства. Если не задано ничего, фигура чёрная.

<style>
  circle { fill: blue; }
</style>
<svg viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="pink"/>
</svg>
<!-- круг будет синим: правило CSS сильнее атрибута -->

Обводку красят отдельно: stroke задаёт её цвет, stroke-width толщину. Прозрачность заливки меняет fill-opacity со значением от 0 до 1.

Одна иконка в трёх цветах

Значение currentColor берёт цвет текста родителя. Пропишите его иконке один раз, и она будет перекрашиваться вместе с кнопкой:

<button class="ok">
  <svg class="icon" viewBox="0 0 24 24"><path d="M12 2l3 6.5 …z"/></svg>
  В избранное
</button>

.icon { width: 20px; height: 20px; fill: currentColor; }
.ok   { color: #1a7f37; }
.warn { color: #b35900; }
.del  { color: #c62828; }

Так обычно подключают иконочные наборы: одна звезда в коде, а цвет задают классы кнопок. Для тёмной темы достаточно поменять color у родителя.

Иконка не перекрашивается, хотя fill: currentColor на месте? Откройте код SVG и поищите style="fill:#000000" внутри <path>. Инлайн-стиль сильнее правила из таблицы стилей, его нужно удалить.

Векторный фон в CSS через data:URL

Мелкую декоративную графику (галочку чекбокса, свой маркер для списков в HTML) удобно хранить прямо в CSS, без отдельного файла. Для этого SVG записывают в адрес вида data:image/svg+xml,…:

.marker {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23c62828'/%3E%3C/svg%3E");
}

Три правила, без которых такой фон не появится:

1. Решётку в цвете кодируйте как %23. В адресе символ # начинает фрагмент, по RFC 3986 он зарезервирован. С fill='#c62828' браузер обрезает адрес на решётке, и круга нет.
2. Внутри используйте одинарные кавычки, если весь адрес обёрнут в двойные.
3. Угловые скобки лучше заменить на %3C и %3E: в адресе их нет среди допустимых символов, а по правилу из справки MDN о data:URL зарезервированные символы, пробелы и переводы строк в данных тоже кодируют процентами.

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

Трансформации: transform и rotate

Повернуть, сдвинуть или растянуть фигуру можно атрибутом transform. Главная ловушка здесь в точке вращения. Запись rotate(45) поворачивает фигуру вокруг начала координат, то есть верхнего левого угла viewBox, и квадрат уезжает за край. Чтобы повернуть его вокруг своего центра, передайте координаты центра вторым и третьим числом:

<svg viewBox="0 0 100 100" width="160" height="160">
  <rect x="30" y="30" width="40" height="40" fill="#7324FF"
        transform="rotate(45 50 50)"/>
</svg>

С CSS-свойством transform та же история. У SVG-элементов начальное значение transform-box равно view-box (справка MDN по transform-box), поэтому transform-origin: center отсчитывается от поля рисунка, а не от фигуры. Для вращения вокруг центра фигуры добавьте пару строк:

.spinner path {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

Анимация из стилей страницы работает только у SVG, вставленного кодом. Внутри <img> браузер покажет её, лишь если она прописана в самом файле. Тот же SVG в коде можно менять и скриптом: его элементы входят в DOM-дерево страницы наравне с HTML-тегами.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Как подготовить файл к загрузке на сайт

Файл, сохранённый из графического редактора, почти всегда тянет за собой служебные данные: комментарии, настройки окна, слои, лишние знаки после запятой в координатах. Их убирает оптимизатор SVGO, это бесплатная утилита на Node.js:

npm install -g svgo
svgo star.svg -o star.min.svg

Наша звезда в формате «Inkscape SVG» весила 1 533 байта. После SVGO 4.1.0 осталось 235 байт, утилита сама отчиталась о сжатии на 84,7 %. Ушли комментарий редактора, блок sodipodi:namedview с масштабом и размером окна, пустой <defs> и группа-слой. Сам контур не изменился.

Нарисовать или поправить исходник можно в бесплатном Inkscape, а если нужен векторный редактор в браузере, посмотрите наш разбор, чем заменить Illustrator онлайн. Перед заливкой пройдитесь по короткому чек-листу:

• в корневом <svg> есть viewBox, иначе картинка не масштабируется;
• жёсткие width и height в миллиметрах заменены пикселями или убраны в пользу CSS;
• у иконки без подписи рядом есть текстовая альтернатива: alt у <img> или элемент <title> первым внутри <svg>;
• в коде не осталось <script> и обработчиков вроде onclick, если вы их сами не писали.

Про <title> в справке MDN сказано, что он даёт доступное короткое описание графики, а браузеры обычно показывают его как всплывающую подсказку. Для совместимости с SVG 1.1 его ставят первым дочерним элементом.

Последний пункт не формальность. SVG состоит из текста, и в нём может оказаться скрипт. Поэтому WordPress из коробки не принимает SVG в медиатеку: в списке типов файлов ядра его нет, разрешение добавляют плагином или кодом темы. Файлы от посетителей сайта без очистки на сервер не пускайте.

Маленький SVG пригодится и как значок вкладки: как его подключить, разобрано в статье как добавить фавикон на сайт.

Частые ошибки и что с ними делать

1. Картинка не видна, место под ней пустое. Причина обычно в data:-адресе с решёткой или двойными кавычками внутри. Решение: # заменить на %23, внутренние кавычки сделать одинарными.
2. Иконка не меняет цвет из CSS. Она вставлена через <img> или фоном. Решение: вставить код SVG в HTML или сделать отдельные файлы под каждый цвет.
3. Цвет из CSS не применяется к SVG в коде. Внутри <path> остался style="fill:…" из редактора. Решение: удалить инлайн-стиль, а атрибут fill можно оставить, CSS его перекроет.
4. SVG огромный или крошечный и не слушается CSS. В файле размеры в миллиметрах и нет viewBox. Решение: добавить viewBox с исходными размерами рисунка, а размер задавать стилями.
5. Фигура при повороте улетает. Вращение идёт вокруг начала координат. Решение: rotate(угол cx cy) в атрибуте или transform-box: fill-box в CSS.

Где освоить вёрстку и CSS системно

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

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	29 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям29 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по CSS