Встроенный SVG или img: выберите поведение графики

Используйте SVG в элементе <img>, когда нужно показать готовую графику. Встраивайте SVG непосредственно в разметку, когда странице нужно менять отдельные фигуры через CSS или JavaScript. Оба подхода показывают одну векторную графику в разных размерах; встраивание не улучшает ее геометрию.

Различие важно, если логотип выглядит правильно во вкладке браузера, но игнорирует правило цвета сайта. Файл может быть исправен, а правило просто не имеет доступа внутрь. Ниже одинаковая иллюстрация гор представлена обоими способами, чтобы вы проверили разницу перед изменением процесса подготовки ресурсов.

Выберите нужное поведение

Внешний SVG остается векторным файлом при отображении через <img>. Граница проходит между страницей и внутренними элементами файла. CSS страницы может менять размер, поворачивать или делать прозрачным элемент изображения, но селектор вроде .logo path не достигает контуров внутри ресурса src. Встроенные фигуры становятся частью дерева документа страницы. Руководство MDN по встраиванию SVG описывает эти два подхода.

Если вы еще проверяете содержимое файла, начните с материала о том, что такое SVG-файл. Расширение .svg само по себе не означает, что каждая видимая деталь — контур. Для передачи в интернет-магазин следуйте руководству по пользовательским SVG-иконкам Shopify после проверки содержимого.

Проверьте одну графику обоими способами

Для демонстрации мы вручную создали два контура гор и один круг солнца. Мы загрузили графику из отдельного файла и вставили те же фигуры в HTML. Это тест встраивания, а не результат конвертации PerfectVector.

В тесте браузера Chromium обе версии сначала занимали 360 × 240 CSS-пикселей и показывали янтарное солнце. Затем мы включили правило страницы для .sun. Встроенное солнце стало коралловым, а солнце внешнего изображения осталось янтарным. Уменьшение обоих блоков до 180 × 120 изменило размеры без изменения этой разницы.

1. Сохраните отдельный файл SVG

Создайте artwork.svg с этим полным исходником. viewBox определяет пространство координат рисунка. Ширина и высота задают явные начальные размеры.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. Добавьте изображение и встроенную копию

Сохраните следующий код как index.html рядом с artwork.svg, затем откройте в браузере. Две графики имеют одинаковую геометрию и атрибуты оформления. Встроенная версия также имеет имя для вспомогательных технологий.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

Снимок использует оформленный макет сравнения вокруг тех же фигур. Меньший пример выше позволяет легко воспроизвести поведение.

3. Меняйте одну переменную за раз

Удалите class="theme" у body и перезагрузите. Теперь оба солнца должны стать янтарными. Верните класс — только встроенное солнце должно стать коралловым. Измените .artwork с width: 360px на width: 180px; при наличии места в контейнере обе графики должны уменьшиться до 180 × 120.

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

Имя .sun добавлено для этого примера. Конвертированный или экспортированный файл не обязательно содержит полезный класс для каждой смысловой части. Проверяйте и именуйте фигуры, которыми хотите управлять, а не предполагайте, что видимый объект — один выделяемый контур.

Явно задавайте размеры и доступные имена

Сохраните viewBox при переносе графики в HTML. Задайте атрибуты ширины и высоты как разумную базу, затем примените адаптивный CSS. Для иллюстрации 3:2 width: 180px; height: auto сохраняет пропорции. Большое пустое поле внутри viewBox остается частью области рисунка в обоих способах; изменение встраивания его не удаляет.

Если блок макета имеет другое соотношение, руководство по размещению preserveAspectRatio сравнивает размещение всей графики, обрезку и искажение.

Для значимого внешнего изображения пишите alt на HTML-элементе <img>. Для значимого встроенного изображения пример использует role="img" и aria-labelledby, указывающий на <title>. Встроенный SVG не использует alt HTML-изображения. Эти варианты именования описаны в руководстве MDN по SVG в HTML.

При повторении встроенного примера дайте каждому ID заголовка уникальное значение и обновите соответствующий aria-labelledby. То же правило относится к ID градиентов, масок и контуров обрезки. Для декоративной графики рядом с равноценным видимым текстом используйте пустой alt у <img> или скрывайте встроенный SVG от вспомогательных технологий через aria-hidden="true". Проверьте всю ссылку или кнопку в контексте, чтобы ее название по-прежнему объясняло назначение.

Для множества повторно используемых иконок спрайт symbol SVG вводит отдельный подход определения и экземпляра. Решите, нужно ли это повторное использование, прежде чем вставлять много копий на каждую страницу.

Измеряйте производительность

Встроенная разметка помещает фигуры в документ вместо получения графики отдельным ресурсом изображения. Она также увеличивает разметку документа. Внешний файл может повторно использоваться из кеша браузера в зависимости от URL, заголовков ответа и состояния кеша. Руководство MDN по HTTP-кешированию объясняет условия.

Ни один из этих фактов не доказывает, какой способ ускорит страницу. Сравните реальную страницу при первом и повторном посещении с настоящим количеством копий и сложностью SVG. Демонстрация проверяет доступ к оформлению и размеры, а не скорость загрузки.

У режима внешнего изображения есть ограничения и кроме CSS. MDN описывает отключение JavaScript и ограничения внешних ресурсов у SVG как изображения. Не встраивайте незнакомый SVG лишь ради работы отсутствующей возможности. Проверьте и очистите недоверенную разметку перед включением в страницу.

Если исходная графика — только PNG

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

PerfectVector предоставляет векторную графику. Вы все равно выбираете части, реагирующие на CSS, добавляете смысловые имена и проверяете конечную страницу. Конвертация изображения не создает автоматически компонент с семантическими классами. Если существующий SVG уже содержит пригодные контуры, работайте с ними вместо трассировки отрендеренной копии.

Также проверьте наличие SVG со встроенным растровым изображением. Встраивание такого файла открывает доступ к элементу <image>, а не превращает его пиксели в отдельные перекрашиваемые фигуры. Для фотографии, которая должна остаться фотографией, сохраняйте подходящий растровый формат передачи.

Проверьте конечную страницу

• Подтвердите правильность самостоятельной графики перед проверкой CSS страницы.
• Выберите <img> для готового отображения или встроенный SVG для прямого управления элементами.
• Проверьте размер и пропорции в самом узком поддерживаемом макете.
• Проверьте именно нужную перекрашиваемую фигуру; не полагайтесь на общее правило path.
• Проверьте имена изображений, повторяющиеся ID и окружающую ссылку или кнопку.
• Измерьте загрузку, если она влияет на выбор; не делайте выводов о скорости по этому примеру.

Частые вопросы

Становится ли SVG растром при использовании тега img? Нет. SVG через img все еще может отображать векторную геометрию. Элемент изображения мешает странице напрямую выбирать внутренние фигуры, а не преобразует их в PNG.

Почему currentColor не следует цвету текста страницы? У внешнего изображения SVG собственный контекст стилей. Цвет страницы не становится автоматически currentColor внутри файла. Используйте встроенный SVG, если оформление должно наследоваться от страницы, и задайте нужной заливке или обводке currentColor.

Нужно ли конвертировать существующий SVG перед встраиванием? Конвертация не нужна, если он уже содержит нужные векторные фигуры. Проверьте разметку, сохраните необходимые ссылки, добавьте подходящее именование и протестируйте на странице. Преобразование растра в вектор нужно только для восстановления фигур из растрового исходника.

Источники

1. MDN — Including vector graphics in HTML — Поведение внешних изображений и встроенной разметки.
2. MDN — SVG in HTML introduction — Встроенная разметка, viewBox и доступные имена.
3. MDN — HTTP caching — Повторное использование кеша зависит от политики ответа и идентичности ресурса.
4. MDN — SVG as an image — Ограничения скриптов и ресурсов в контексте изображения.

Выберите встраивание по задаче графики, затем проверьте с реальными стилями страницы. Если единственный исходник — подходящий PNG, сначала восстановите векторные фигуры, проверьте результат и подготовьте принятую графику для этого встраивания.