Адаптивные SVG-логотипы: меняйте композицию в малом размере

Адаптивный SVG-логотип может переключаться между подробной композицией и компактным знаком вместо совместного уменьшения всех частей. Сначала создайте обе композиции, затем выбирайте их источником <picture> с медиусловием. Проверяйте currentSrc изображения на ширинах, которые планируете поддерживать.

В примере используется оригинальная композиция вымышленного Cove: полый ромб с нарисованными буквами и версия только со знаком. Переключение зависит от ширины области просмотра документа. Узкий контейнер внутри широкой страницы не вызывает того же переключения.

Масштабирование и смена композиции решают разные задачи

Обычное масштабирование сохраняет всю композицию: символ, надпись и расстояние между ними уменьшаются вместе. Художественное управление выбирает другую созданную композицию. Удаление надписи или перестановка знака — дизайнерское решение; SVG-файл не принимает его автоматически благодаря масштабируемости.

Справочник HTML picture описывает альтернативные источники, выбираемые медиусловиями, и запасной img. Здесь мы предлагаем компактный SVG при 599 пикселях или уже и подробный SVG в остальных случаях. Рамка изображения остаётся того же размера, а содержимое меняется.

Масштабируйте композицию или выбирайте другую

Создайте два редактируемых файла

Сохраните эту оригинальную подробную композицию как detailed.svg. Буквы нарисованы контурами, поэтому небольшому примеру не нужен файл шрифта:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="96" viewBox="0 0 300 96">
  <g fill="#176b5b" fill-rule="evenodd">
    <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z"/>
    <path d="M130 24 H160 V32 H138 V64 H160 V72 H130 Z"/>
    <path d="M168 24 H198 V72 H168 Z M176 32 V64 H190 V32 Z"/>
    <path d="M206 24 H214 L225 60 L236 24 H244 L229 72 H221 Z"/>
    <path d="M252 24 H282 V32 H260 V43 H278 V51 H260 V64 H282 V72 H252 Z"/>
  </g>
</svg>

Сохраните компактную версию как compact.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z" fill="#176b5b" fill-rule="evenodd"/>
</svg>

Контур ромба одинаков в обоих файлах. Подробный файл содержит пять контуров, компактный — один. Ни один не содержит элемент image или живой текст. Ширина двух viewBox различается из-за разных композиций, а не равномерного масштабирования одного файла.

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

Запустите полный стартовый пример picture

Сохраните это как starter.html рядом с двумя SVG и раздавайте папку локально. Если установлен Python, один из вариантов — python3 -m http.server 8766; затем откройте http://localhost:8766/starter.html в браузере.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cove logo source selection</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  .slot { width: 200px; border: 1px dashed #b9c8be; margin-bottom: 24px; }
  .narrow { width: 120px; }
  .slot img { display: block; width: 100%; height: 80px; object-fit: contain; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Cove: choose the composition</h1>
<p>Art-directed image, constant 200-pixel container:</p>
<div class="slot">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="directed" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<p>Ordinary scaling, same container:</p>
<div class="slot">
  <img id="scaled" src="detailed.svg" width="300" height="96" alt="Cove">
</div>
<p>Art direction in a narrower 120-pixel container:</p>
<div class="slot narrow">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="narrow" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<pre id="report"></pre>
<script>
  const images = [...document.images];
  function report() {
    document.getElementById('report').textContent = JSON.stringify({
      viewportWidth: innerWidth,
      mediaMatches: matchMedia('(max-width: 599px)').matches,
      images: images.map(image => ({ id: image.id, currentSrc: image.currentSrc,
        complete: image.complete, naturalWidth: image.naturalWidth,
        naturalHeight: image.naturalHeight,
        containerWidth: image.parentElement.closest('.slot').clientWidth,
        elementWidth: image.getBoundingClientRect().width,
        elementHeight: image.getBoundingClientRect().height, alt: image.alt })),
    }, null, 2);
  }
  images.forEach(image => image.addEventListener('load', report));
  addEventListener('resize', report);
  report();
</script>
</html>

Медиусловие — (max-width: 599px). Медиафункция width CSS оценивает ширину области просмотра. При 600 пикселях условие ложно, поэтому пример выбирает подробный источник img. Число — пример точки переключения для этой компоновки, а не правило дизайна бренда.

CSS резервирует высоту изображения в 80 пикселей и использует object-fit: contain для вписывания выбранного изображения в прямоугольник элемента. Это сохраняет обе композиции видимыми, не растягивая до одинаковых пропорций. Применяйте стиль вписывания к img, который показывает выбранный источник.

alt="Cove" обозначает вымышленный бренд в обоих случаях. Давайте своему изображению подходящую текстовую альтернативу, как описано в справочнике HTML img. Компактный знак не должен терять доступное имя при исчезновении видимой надписи.

Что выбрал браузер при трёх ширинах

Мы открыли точный стартовый пример в Chrome при ширине области просмотра документа 480, 600 и 960 пикселей. При каждой ширине все три изображения завершили загрузку. Основной контейнер оставался шириной 200 пикселей, а более узкий контроль — 120 пикселей.

Мы проверяли выбранный URL через HTMLImageElement.currentSrc вместе с размерами загруженного изображения. Один выбранный URL не является проверкой успешной загрузки: проверяйте также complete и собственные размеры. Компактный исходник сообщил 96×96, подробный — 300×96.

Основной элемент изображения оставался 200×80 при всех трёх ширинах. Узкий контроль оставался 120×80. При 480 пикселях компактный знак центрировался в каждой рамке, а контроль обычного масштабирования всё ещё показывал полную композицию. При 600 и 960 пикселях сужение контейнера до 120 пикселей уменьшало подробную композицию, а не выбирало компактный файл.

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

Результаты охватывают оригинальные файлы, один браузер и три явно заданные ширины области просмотра. Они не устанавливают поведение всех браузеров, способов встраивания или экспорта. Стартовый пример также не проверяет медиаправила внутри внешнего SVG.

Проверяйте рамку и графику отдельно

Прямоугольник элемента — не то же, что закрашенные границы логотипа. Браузерные границы геометрии подробного исходника были x8, y8, ширина274, высота80 в viewBox 300×96. У компактного — x8, y8, ширина80, высота80 в viewBox 96×96. Эти поля остаются частью расчёта вписывания исходника.

Если выбранный логотип выглядит слишком маленьким, проверьте пустое пространство исходника до увеличения размеров элемента. Если растянутым — проверьте прямоугольник изображения и правило вписывания. Руководство по preserveAspectRatio объясняет связанный расчёт области просмотра SVG; само изменение отображения не создаёт вторую композицию.

Этот пример использует внешние SVG-изображения через img. Используйте руководство по встроенному SVG и img, если нужно выбрать другой подход к встраиванию. Загруженный или напечатанный SVG-файл не содержит этой HTML-оболочки выбора источника: передавайте реальную композицию, нужную получателю, и сохраняйте редактируемые версии.

Подготовьте версии из растрового логотипа

Если единственная графика бренда — PNG или JPG, а нужна редактируемая геометрия, подготовьте SVG-логотип с PerfectVector, проверьте силуэт и внутренние отверстия и сохраните чистый мастер. Затем создайте подробную и компактную композиции и проверьте выбор на странице. Векторизация готовит графику; она не решает, какую надпись убрать, и не выбирает точку переключения. Существующая чистая графика SVG может сразу перейти к работе над композицией. Руководство по векторизации объясняет, когда помогает преобразование.

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

Упрощает ли SVG логотип автоматически на маленьком экране? Этот пример выбирает два отдельно созданных файла SVG. Масштабирование одного файла сохраняет исходную композицию; упрощению нужно отдельное дизайнерское решение.

Почему узкий контейнер всё ещё показывает подробный логотип? Условие ширины источника picture проверяет область просмотра документа. В проверенных областях 600 и 960 пикселей даже контейнер 120 пикселей сохранял подробный исходник.

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

Войдёт ли адаптивное переключение в скачанный SVG? Правило выбора источника находится в HTML-оболочке. Сохраняйте и передавайте подробный или компактный SVG для фактического применения получателя.

Источники

1. Элемент HTML picture — альтернативные источники, медиусловия и запасное поведение.
2. Медиафункция CSS width — условие области просмотра документа в примере.
3. Свойство изображения currentSrc — проверка URL выбранного источника.
4. CSS object-fit — вписывание каждой выбранной композиции в рамку изображения.
5. Элемент HTML img — показ изображения и текстовые альтернативы.

Для своего PNG- или JPG-логотипа подготовьте редактируемый мастер SVG, проверьте очертание и отверстия и храните рядом с одобренными композициями. Затем проверьте выбранный источник и видимую композицию при ширинах области просмотра, которые будет использовать страница.