> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

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

> Выбирайте подробный или компактный SVG-логотип медиусловиями picture. Проверьте выбранный исходник при трёх ширинах области просмотра и отделите смену композиции от масштаба.

Source: https://perfectvector.com/ru/blog/responsive-svg-logo-lockup

Language: ru
Author: Irene Kim
Published: 2026-10-06T08:00:00+09:00
Updated: 2026-10-06T08:00:00+09:00

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

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

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

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

[Справочник HTML picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture) описывает альтернативные источники, выбираемые медиусловиями, и запасной `img`. Здесь мы предлагаем компактный SVG при 599 пикселях или уже и подробный SVG в остальных случаях. Рамка изображения остаётся того же размера, а содержимое меняется.

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

![Концептуальное сравнение подробной композиции полого ромба, её уменьшенной масштабированной копии и компактного знака без надписи](https://perfectvector.com/blog/responsive-svg-logo-lockup/scale-and-switch.webp)

*Иллюстрация: масштабированная композиция сохраняет детали, а отдельно созданная компактная версия может убрать надпись. Фактический выбор исходника и границы элементов ниже получены в независимом стартовом примере Cove, а не в этой сгенерированной схеме.*

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

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

```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
<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` различается из-за разных композиций, а не равномерного масштабирования одного файла.

Храните обе исходные версии. Для собственного бренда решите, какие черты должны оставаться узнаваемыми в компактной композиции, затем проверьте отверстие, поля и пропорции. Наше [руководство по форматам файлов логотипа](https://perfectvector.com/ru/blog/logo-file-formats) описывает более широкий пакет исходников и передачи; этот пример добавляет браузерный выбор двух одобренных версий.

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

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

```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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width) CSS оценивает ширину области просмотра. При 600 пикселях условие ложно, поэтому пример выбирает подробный источник `img`. Число — пример точки переключения для этой компоновки, а не правило дизайна бренда.

CSS резервирует высоту изображения в 80 пикселей и использует [`object-fit: contain`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) для вписывания выбранного изображения в прямоугольник элемента. Это сохраняет обе композиции видимыми, не растягивая до одинаковых пропорций. Применяйте стиль вписывания к `img`, который показывает выбранный источник.

`alt="Cove"` обозначает вымышленный бренд в обоих случаях. Давайте своему изображению подходящую текстовую альтернативу, как описано в [справочнике HTML img](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img). Компактный знак не должен терять доступное имя при исчезновении видимой надписи.

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

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

| Область просмотра документа | Выбор композиции, контейнер 200 пикселей | Обычный масштаб, контейнер 200 пикселей | Выбор композиции, контейнер 120 пикселей |
| --------------------------- | ---------------------------------------- | --------------------------------------- | ---------------------------------------- |
| 480 пикселей                | compact.svg                              | detailed.svg                            | compact.svg                              |
| 600 пикселей                | detailed.svg                             | detailed.svg                            | detailed.svg                             |
| 960 пикселей                | detailed.svg                             | detailed.svg                            | detailed.svg                             |

Мы проверяли выбранный URL через [`HTMLImageElement.currentSrc`](https://developer.mozilla.org/en-US/docs/Web/API/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](https://perfectvector.com/ru/blog/svg-preserveaspectratio) объясняет связанный расчёт области просмотра SVG; само изменение отображения не создаёт вторую композицию.

Этот пример использует внешние SVG-изображения через `img`. Используйте [руководство по встроенному SVG и img](https://perfectvector.com/ru/blog/inline-svg-vs-img), если нужно выбрать другой подход к встраиванию. Загруженный или напечатанный SVG-файл не содержит этой HTML-оболочки выбора источника: передавайте реальную композицию, нужную получателю, и сохраняйте редактируемые версии.

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

Если единственная графика бренда — PNG или JPG, а нужна редактируемая геометрия, [подготовьте SVG-логотип с PerfectVector](https://perfectvector.com/ru/vectorize-logo), проверьте силуэт и внутренние отверстия и сохраните чистый мастер. Затем создайте подробную и компактную композиции и проверьте выбор на странице. Векторизация готовит графику; она не решает, какую надпись убрать, и не выбирает точку переключения. Существующая чистая графика SVG может сразу перейти к работе над композицией. [Руководство по векторизации](https://perfectvector.com/ru/blog/what-is-image-vectorization) объясняет, когда помогает преобразование.

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

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

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

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

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

## Источники

1. [Элемент HTML picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture) — альтернативные источники, медиусловия и запасное поведение.
2. [Медиафункция CSS width](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width) — условие области просмотра документа в примере.
3. [Свойство изображения currentSrc](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc) — проверка URL выбранного источника.
4. [CSS object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) — вписывание каждой выбранной композиции в рамку изображения.
5. [Элемент HTML img](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) — показ изображения и текстовые альтернативы.

***

Для своего PNG- или JPG-логотипа [подготовьте редактируемый мастер SVG](https://perfectvector.com/ru/vectorize-logo), проверьте очертание и отверстия и храните рядом с одобренными композициями. Затем проверьте выбранный источник и видимую композицию при ширинах области просмотра, которые будет использовать страница.

## Explore

- [Read the HTML article](https://perfectvector.com/ru/blog/responsive-svg-logo-lockup)
- [Охранное поле логотипа: как рассчитать и сохранить отступ](https://perfectvector.com/ru/blog/logo-clear-space-calculation.md)
- [Как векторизовать логотип: автотрассировка или ручная перерисовка (и как распознать псевдовектор)](https://perfectvector.com/ru/blog/how-to-vectorize-a-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)