SVG в вёрстке

PNG и JPG — сетка пикселей. Увеличил вдвое — получил кашу. SVG устроен иначе: это текстовый файл с описанием фигур. Браузер каждый раз рисует его заново под нужный размер.

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

viewBox="0 0 24 24" означает: «внутри этой картинки система координат от 0 до 24 по обеим осям». Это не пиксели, а условные единицы.

А сколько места картинка займёт на странице, решают width, height или CSS. Одна и та же иконка с viewBox="0 0 24 24" может быть 16 или 160 пикселей — содержимое просто отмасштабируется.

<svg width="24" height="24">
  <path d="M4 12h16"/>
</svg>

<svg viewBox="0 0 24 24" width="24" height="24">
  <path d="M4 12h16"/>
</svg>

Главный водораздел — нужно ли красить иконку из CSS. Внутрь <img> и фона стили страницы не проникают: файл рисуется в изоляции.

Ключевое слово currentColor означает «текущий цвет текста». Если в иконке написать stroke="currentColor", она унаследует цвет от родителя — и не нужно ни одного отдельного правила.

<p class="row">  <span class="chip chip--ok">    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">      <path d="m5 12.5 4.5 4.5L19 7"/>    </svg>    Готово  </span>​  <span class="chip chip--bad">    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">      <path d="m6 6 12 12M18 6 6 18"/>    </svg>    Ошибка  </span>​  <span class="chip chip--wait">    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">      <circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/>    </svg>    Ждём  </span></p>

svg {  fill: none;  /* Вот из-за этой строки иконка красится вместе с текстом */  stroke: currentColor;  stroke-width: 2;  stroke-linecap: round;  stroke-linejoin: round;}​.chip {  display: inline-flex;  align-items: center;  gap: 6px;  padding: 6px 12px;  border-radius: 999px;  font-size: 14px;  font-weight: 600;}​.chip--ok { color: #0f8f6a; background: #e6f6f0; }.chip--bad { color: #c8394a; background: #fdecee; }.chip--wait { color: #9a6a13; background: #fdf3e0; }​.row { display: flex; gap: 10px; flex-wrap: wrap; }

Инлайнить одну и ту же иконку двадцать раз — значит двадцать раз повторить её код. Спрайт решает это: все иконки описываются один раз внутри <symbol>, а в местах использования остаётся короткая ссылка.

1<svg width="0" height="0" aria-hidden="true" style="position:absolute">2  <symbol id="i-check" viewBox="0 0 24 24">3    <path d="m5 12.5 4.5 4.5L19 7"/>4  </symbol>56  <symbol id="i-cross" viewBox="0 0 24 24">7    <path d="m6 6 12 12M18 6 6 18"/>8  </symbol>9</svg>1011<!-- Дальше по странице — только ссылки -->12<svg class="icon"><use href="#i-check"/></svg>13<svg class="icon"><use href="#i-cross"/></svg>

viewBox задаётся у <symbol>, а не у места использования. Размер задаётся снаружи — обычно классом.

Файл, выгруженный из редактора, обычно вдвое-втрое больше нужного. Редактор кладёт в него служебные данные, которые браузеру не нужны.

Маленькую графику можно положить прямо в стили — как data-URI. Это экономит запрос и удобно для декоративных мелочей: галочки в списке, стрелки у выпадающего списка, узора на фоне.

Важная тонкость: в url() нужно экранировать решётку и кавычки, иначе браузер разберёт значение неправильно.

1.checklist li {2  padding-inline-start: 28px;3  background-image: url('data:image/svg+xml;utf8,        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"         fill="none" stroke="%230f8f6a" stroke-width="2.5"><path d="m5 12.5 4.5 4.5L19 7"/></svg>');4  background-repeat: no-repeat;5  background-size: 18px;6  background-position: 0 .2em;7}

Иконки бывают двух видов, и обращаться с ними надо по-разному.

Декоративная — рядом есть текст, иконка просто дублирует смысл. Её прячут: aria-hidden="true".

Смысловая — иконка сама по себе несёт информацию, например кнопка-крестик без подписи. Ей нужно имя.

1<!-- Рядом есть текст: иконку прячем от читалки -->2<button type="button">3  <svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>4  Сохранить5</button>67<!-- Текста нет: имя даём кнопке, а не картинке -->8<button type="button" aria-label="Закрыть окно">9  <svg class="icon" aria-hidden="true"><use href="#i-cross"/></svg>10</button>1112<!-- Самостоятельная иллюстрация: роль и заголовок на самом svg -->13<svg role="img" aria-labelledby="chart-title" viewBox="0 0 200 120">14  <title id="chart-title">Продажи выросли вдвое за квартал</title>15  <path d="M10 100 L60 70 L120 40 L190 20"/>16</svg>

1@layer components {2  .icon {3    /* Размер по шрифту рядом: иконка растёт вместе с текстом */4    inline-size: 1.25em;5    block-size: 1.25em;6    flex: none;78    fill: none;9    stroke: currentColor;10    stroke-width: 1.7;11    stroke-linecap: round;12    stroke-linejoin: round;1314    /* Оптическая посадка на строку: иконки кажутся выше текста */15    vertical-align: -0.16em;16  }1718  .icon--sm { inline-size: 1em; block-size: 1em; }19  .icon--lg { inline-size: 1.75em; block-size: 1.75em; }2021  /* Заливочные иконки — отдельным модификатором */22  .icon--solid { fill: currentColor; stroke: none; }23}

• Фотографии. SVG описывает фигуры. Попытка сохранить в него фото даёт файл на несколько мегабайт — это делают только автоматические трассировщики, и результат всегда хуже WebP.
• Сложные иллюстрации инлайном. Карта страны с тысячей контуров в разметке раздувает HTML и тормозит первый рендер. Такое подключают через img.
• Иконочные шрифты «зато привычно». Иконочный шрифт ломается при отключённых шрифтах, требует псевдоэлементов и не даёт многоцветности. Спрайт лучше по всем пунктам.
• Инлайн одинаковых иконок. Двадцать копий одной иконки в разметке — это двадцать копий её кода. Для повторяющихся нужен спрайт.

<button class="btn btn--ok">  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#000" stroke-width="2">    <path d="m5 12.5 4.5 4.5L19 7"/>  </svg>  Сохранить</button>​<button class="btn btn--bad">  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#000" stroke-width="2">    <path d="m6 6 12 12M18 6 6 18"/>  </svg>  Удалить</button>

.btn {  display: inline-flex;  align-items: center;  gap: 8px;  padding: 9px 16px;  font: inherit;  font-weight: 600;  background: #f4f4f8;  border: 0;  border-radius: 999px;}​.btn--ok { color: #0f8f6a; }.btn--bad { color: #c8394a; }​/* Задай тут стили для .icon */​

1<svg width="0" height="0" aria-hidden="true" style="position:absolute">2  <symbol id="i-check" viewBox="0 0 24 24">3    <path d="m5 12.5 4.5 4.5L19 7"/>4  </symbol>5  <symbol id="i-cross" viewBox="0 0 24 24">6    <path d="m6 6 12 12M18 6 6 18"/>7  </symbol>8</svg>910<button class="btn btn--ok">11  <svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>12  Сохранить13</button>1415<button class="btn btn--bad">16  <svg class="icon" aria-hidden="true"><use href="#i-cross"/></svg>17  Удалить18</button>

1.icon {2  width: 18px;3  height: 18px;4  flex: none;5  fill: none;6  stroke: currentColor;7  stroke-width: 2;8  stroke-linecap: round;9  stroke-linejoin: round;10}1112.btn {13  display: inline-flex;14  align-items: center;15  gap: 8px;16  padding: 9px 16px;17  font: inherit;18  font-weight: 600;19  background: #f4f4f8;20  border: 0;21  border-radius: 999px;22}2324.btn--ok { color: #0f8f6a; }25.btn--bad { color: #c8394a; }