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

# Логотип SVG в тёмной теме: кто управляет цветом

> Выберите, следует ли логотип SVG предпочтению пользователя или теме страницы. Сравните встроенный CSS, адаптивный внешний файл и фиксированный рисунок в браузере.

Source: https://perfectvector.com/ru/blog/dark-mode-svg-logo

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

Логотипу SVG для тёмной темы нужен явный источник информации о теме. CSS страницы может оформлять контуры встроенного SVG. Внешний SVG, загруженный элементом изображения, имеет собственный контекст стилей, но внутренний запрос `prefers-color-scheme` может реагировать на цветовую схему встраивающего элемента. Класс ручной темы и предпочтение пользователя светлой или тёмной схемы — разные входные данные; определите, какие должны управлять рисунком.

Сохраняйте утверждённые варианты для светлых и тёмных поверхностей, если они есть. Инверсия всех цветов может изменить акцент, убрать намеренный контур или дать неутверждённый логотип. Поддержка темы — решение по окраске и интеграции после того, как сам рисунок уже правильный.

## Отличайте предпочтение пользователя от темы страницы

**Медиафункция CSS `prefers-color-scheme`** определяет предпочтение светлой или тёмной схемы, передаваемое браузером или операционной системой. [MDN описывает эти источники предпочтения](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). Собственный атрибут сайта `data-theme="dark"` остаётся лишь состоянием приложения, пока CSS или код не придаст ему действие.

Это объясняет частое расхождение: предпочтение браузера остаётся светлым, хотя посетитель выбирает тёмную поверхность внутри одного сайта. Логотип, следующий только предпочтению, может сохранить цвета для светлой поверхности на тёмной странице.

**Свойство `color-scheme`** — другой механизм. Оно сообщает браузеру, какие схемы поддерживает элемент, но не меняет автоматически каждую заданную автором заливку. [Справочник свойства MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) отличает отрисовку под управлением браузера от стилей темы, которые автор всё ещё должен задать.

| Предполагаемый источник управления              | Вариант интеграции                                             | Что проверить                                               |
| ----------------------------------------------- | -------------------------------------------------------------- | ----------------------------------------------------------- |
| Ручная тема приложения                          | Встроенные контуры, оформленные селекторами темы страницы      | Обе окраски логотипа меняются при смене темы страницы       |
| Схема встраивающей поверхности                  | Внешний SVG со своими медиаправилами и подходящей схемой хоста | Один файл выбирает нужные окраски на каждом хосте           |
| Предоставленный фиксированный фирменный вариант | Выбор правильного утверждённого ресурса в приложении           | Выбранный файл соответствует поверхности и правильно назван |

Не добавляйте три независимых механизма темы в надежде на их согласие. Определите предполагаемый источник управления до отладки видимого цвета.

## Используйте селекторы страницы для встроенного логотипа с ручной темой

Встроенный SVG принадлежит документу страницы, поэтому целевые селекторы могут достигать его контуров. [Сравнение встроенного SVG и изображения](https://perfectvector.com/ru/blog/inline-svg-vs-img) подробнее объясняет границу доступа.

Мы создали знак F с двумя ролями окраски: основной фигурой и отдельным круглым акцентом. Условные цвета — собственные примеры, а не фирменный стандарт.

```css
.ink { fill: #183c35; }
.accent { fill: #c58868; }
[data-theme="dark"] .ink { fill: #f5f0e7; }
[data-theme="dark"] .accent { fill: #ffc34d; }
```

Применяйте правила к нужному встроенному рисунку, а не каждому контуру сайта. Логотип может содержать несколько намеренных окрасок, масок или градиентов. [Руководство по изменению цвета SVG](https://perfectvector.com/ru/blog/how-to-change-svg-color) рассматривает проверку фактического источника окраски формы до изменения стилей.

`currentColor` полезен, когда фигура должна использовать цвет текста своего элемента. Для многоцветного логотипа это не обязательное требование. Оставляйте акцент отдельным, если дизайн предполагает другую окраску, и проверяйте весь знак на каждой заданной поверхности.

## Пусть внешний SVG управляет внутренними медиаправилами

Внешнее изображение — отдельный контекст стилей. Значение `color: rebeccapurple` на его HTML-элементе изображения не проникает внутрь и не перекрашивает произвольные контуры. Даже `currentColor` внутри файла SVG не становится автоматически цветом текста страницы-хоста.

Вместо этого файл может содержать собственные правила темы. Вот полный небольшой адаптивный SVG из нашего собственного теста:

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="105"
  viewBox="0 0 140 105">
  <style>
    .ink { fill: #183c35; }
    .accent { fill: #c58868; }
    @media (prefers-color-scheme: dark) {
      .ink { fill: #f5f0e7; }
      .accent { fill: #ffc34d; }
    }
  </style>
  <path class="ink" d="M15 15H85V30H33V48H70V63H33V90H15Z"/>
  <circle class="accent" cx="102" cy="73" r="17"/>
</svg>
```

У встроенного изображения SVG запрос предпочтения может отражать используемую цветовую схему встраивающего элемента. [Спецификация CSS Color Adjustment](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) описывает эту связь. Это сигнал схемы, а не переход обычных CSS-селекторов страницы-хоста внутрь файла.

В нашем тестовом примере один хост явно задаёт `color-scheme: light`, другой — `color-scheme: dark`. Оба загружают одинаковый адаптивный файл. Их фон и цвет текста тоже заданы намеренно. Одно свойство не обеспечило бы эти полные стили.

Если тема управляется приложением, при таком подходе согласуйте схему хоста с выбранной темой. Тёмный фон при хосте, всё ещё объявляющем светлую схему, может передавать не тот сигнал, который вы предполагали.

## Сравните три пути в реальном браузере

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

Браузер сообщал о светлом пользовательском предпочтении. Нажатие кнопки ручной темы меняло основную встроенную заливку с `rgb(24, 60, 53)` на `rgb(245, 240, 231)`, а акцент — с `rgb(197, 136, 104)` на `rgb(255, 195, 77)`. Индикатор предпочтения оставался светлым. Изменение окраски вызывали собственные селекторы страницы.

Два верхних изображения показывали светлую и тёмную окраску, выбранную соответствующими схемами хостов. Фиксированное внешнее изображение сохраняло зелёный и медный рисунок, хотя окружающая поверхность становилась тёмной, а вычисленный `color` его HTML-элемента изображения был фиолетовым.

![Реальный браузерный пример с одним адаптивным внешним SVG на светлом и тёмном хостах, встроенным логотипом с ручной темой и фиксированным внешним контролем, сохраняющим исходные цвета](https://perfectvector.com/blog/dark-mode-svg-logo/theme-ownership.webp)

*Фактический собственный тест HTML/CSS во встроенном браузере Codex. Ручная тема страницы тёмная, а запрос пользовательского предпочтения сообщает светлую. Схемы верхних хостов — явно заданные входные условия теста; предпочтение операционной системы не менялось.*

Мы проверили вычисленные стили и фактическую отрисовку. Все три внешних изображения загрузились в естественном размере 140 × 105 и отображались в размере 280 × 210. Тест устанавливает поведение этих файлов в данной браузерной сессии. Это не испытание разных браузеров, почтовых клиентов, экспорта PDF или переключения операционной системы.

## Испытывайте конечное применение, а не только отдельный файл

Откройте исходный SVG отдельно для проверки геометрии, затем изучите его в реальном встраивании страницы. Проверьте оба состояния темы, акцент, прозрачные отверстия и ближайший фон. Адаптивный логотип также может менять композицию при узком размере; [руководство по адаптивной компоновке SVG-логотипа](https://perfectvector.com/ru/blog/responsive-svg-logo-lockup) рассматривает это отдельное решение.

Внешнее изображение SVG имеет ограничения: [MDN отмечает отключение скриптов и ограничение внешних ресурсов](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image). Для показанного подхода держите нужные стили внутри ресурса и испытывайте настоящий контекст доставки. Результат браузера не обещает такого же поведения в почтовом рендерере или импортёре дизайна.

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

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

**Перекрасит ли тёмная страница внешний SVG-логотип автоматически?**
Нет. Внутренние правила окраски изображения всё ещё важны. Адаптивный внешний SVG может использовать собственный запрос предпочтения со схемой встраивающего элемента, а SVG с фиксированными цветами — сохранять исходные окраски.

**Меняет ли ручной класс тёмной темы prefers-color-scheme?**
Сам по себе нет. Класс или data-атрибут — состояние приложения. В тесте ручная тема страницы менялась, а запрос пользовательского предпочтения браузера оставался светлым.

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

## Источники

1. [MDN: prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) — Источники пользовательского предпочтения и поведение встроенного SVG.
2. [MDN: color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) — Поддержка схем и отдельная ответственность автора за стили.
3. [CSS Color Adjustment: эффекты используемой цветовой схемы](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) — Сигнал схемы, передаваемый встроенному содержимому.
4. [MDN: SVG как изображение](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — Ограничения скриптов и ресурсов в контексте изображения.

***

Нужны редактируемые контуры из растрового логотипа? [Создайте и проверьте кандидат SVG](https://perfectvector.com/ru/vectorize-logo), сохраните принятый мастер, затем определите роли окрасок и испытайте реальную страницу с темой.

## Explore

- [Read the HTML article](https://perfectvector.com/ru/blog/dark-mode-svg-logo)
- [Как убрать сдвиги вёрстки из-за логотипа SVG](https://perfectvector.com/ru/blog/svg-logo-layout-reservation.md)
- [Уберите зазор под встроенным SVG с помощью CSS](https://perfectvector.com/ru/blog/inline-svg-baseline-gap.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)