> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Охранное поле логотипа: как рассчитать и сохранить отступ > Выберите единицу охранного поля логотипа, рассчитайте всю свободную зону и сохраните её в SVG, различая размер рисунка и холст с отступами. Source: https://perfectvector.com/ru/blog/logo-clear-space-calculation Language: ru Author: Irene Kim Published: 2026-10-12T08:00:00+09:00 Рассчитывайте охранное поле логотипа по заданной единице утверждённого рисунка, отмеряя отступ наружу от видимых границ полного логотипа. Если единица равна 10, а логотип — 150 на 40, свободная зона по одной единице с каждой стороны занимает 170 на 60. Сам логотип остаётся 150 на 40. Охранное поле — область вокруг логотипа, которую другое содержимое должно оставлять пустой. Отступы файла помогают переносить её в макет, но пустой холст — лишь один способ передачи. Правило задаёт руководство бренда. При подготовке материалов существующего бренда используйте утверждённое правило, прежде чем придумывать новое. Руководство прослеживает собственную композицию логотипа от расчёта до экспорта SVG и изменения размера. Если источник только растровый, сначала восстановите видимые фигуры: векторизатор не определит утверждённое охранное поле. ## Выберите единицу, относящуюся к этому логотипу Используйте измеряемую деталь, пропорционально меняющуюся вместе с утверждённым логотипом: высоту символа, размер конкретной буквы или заданную долю всего рисунка. Точно назовите измеренное. Избегайте правил вроде «оставьте немного места» и необъяснённого квадрата X. Официальные руководства показывают, почему это политика дизайна, а не универсальное отношение. [Руководство Университета Буффало по охранному полю](https://www.buffalo.edu/brand/identity/usage/Clear-space.html) использует высоту переплетённых UB вокруг основной композиции и отдельно описывает линейные варианты. [Руководство Vevo](https://brand.vevo.com/logo/clearspace/) различает знаки выше и ниже 30 px и задаёт контекстные интервалы для веба и планшетов. Следуйте правилу конкретного знака и применения. В нашем собственном примере круглый символ имеет высоту 40 единиц. Мы выбираем X как четверть высоты: X = 10. Нужный отступ — один X с каждой стороны. Это придуманное правило примера, а не рекомендация всем брендам использовать 25% высоты символа. Запишите простыми словами: «Для этой горизонтальной композиции X равен четверти диаметра круга. Оставляйте не менее одного X снаружи каждого края полной композиции». Формулировка сохраняет политику, даже когда программа обрезает пустой холст. ## Измерьте полную композицию, затем добавьте поле Композиция логотипа — утверждённое взаимное расположение символа и шрифтовой части. Измеряйте его целиком. Только границы круга оставили бы буквы вне расчёта охранного поля. Круг и три нарисованные буквы занимают от x = 0 до 150 и от y = 0 до 40. Обводок, теней и скрытых объектов нет. Поэтому прямоугольник охранного поля идёт от x = -10 до 160 и от y = -10 до 50. ```text X = circle height / 4 = 40 / 4 = 10 zone width = artwork width + 2X = 150 + 20 = 170 zone height = artwork height + 2X = 40 + 20 = 60 ``` Если есть видимые обводки или эффекты, включите их видимые границы в проверку. Геометрическое измерение может отличаться от закрашенного результата. Это различие объясняет [руководство по ограничивающей рамке SVG](https://perfectvector.com/ru/blog/svg-bounding-box); здесь намеренно используется простая залитая геометрия. ![Одна исходная композиция круга и надписи с плотными границами, направляющей охранного поля в десять единиц и SVG с отступами в двух размерах](https://perfectvector.com/blog/logo-clear-space-calculation/clear-space-bounds.webp) *Залитый рисунок имеет размер 150 на 40 единиц. Выбранный отступ 10 единиц даёт холст 170 на 60. Направляющая нужна для документации и отсутствует в передаваемом рисунке.* ## Передайте правило через SVG с отступами [SVG viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) отображает внутренний прямоугольник координат в видимую область. В примере `viewBox="-10 -10 170 60"` включает рассчитанное поле, не перемещая и не увеличивая рисунок. Сохраните полный пример как `logo-padded.svg`. Буквы нарисованы фигурами, поэтому зависимости от шрифта нет. Дизайн круга с буквами — собственный пример, а не утверждённый файл другого бренда. ```xml ``` Для парного файла без полей используйте `width="150"`, `height="40"` и `viewBox="0 0 150 40"`, оставив те же круг и контуры. Назовите файлы так, чтобы получатель различал вариант с полем. Размерные направляющие держите в руководстве бренда или отдельном проверочном слое, а не в размещаемом рисунке. > **Пустой холст тоже требует проверки размещения** > > SVG с отступами резервирует место внутри своей области просмотра. Он не препятствует наложению другого объекта и не гарантирует сохранения границ при импорте. Проверяйте реальное размещение по письменному правилу. ## Меняйте размер файла, не уменьшая нужный логотип Решите, относится ли ширина к видимому рисунку или ко всему файлу с полями. При ширине файла 170 px рисунок имеет 150 px и поле 10 px. При ширине 340 px рисунок имеет 300 px и поле 20 px. Пропорциональное правило сохраняется при равномерном масштабировании. Если нужен видимый логотип 300 px, задайте этому файлу с полями ширину 340 px. Ширина файла 300 px дала бы лишь около 264,7 px рисунка, потому что 300 × 150 / 170 примерно равно 264,7. | Что задано | Ширина области с полями | Ширина видимого рисунка | Боковое поле | | ------------------------ | ----------------------- | ----------------------- | ------------- | | Исходный пример | 170 px | 150 px | 10 px | | Удвоенный пример | 340 px | 300 px | 20 px | | Весь файл шириной 300 px | 300 px | Около 264,7 px | Около 17,6 px | Примечание о методе: мы отрисовали полные SVG с полями и без них в Chromium. Геометрические границы рисунка — 150 на 40 единиц. При ширине файла с полями 170 и 340 px измеренная ширина рисунка была 150 и 300 px с отступами 10 и 20 px. Это проверяет созданный браузерный пример, а не поведение импорта любого редактора. Если логотип выглядит слишком маленьким, сначала проверьте холст, а не увеличивайте случайные объекты. Если после импорта поле исчезло, изучите импортированные границы и восстановите отступ по письменному правилу X. Для широкого логотипа в иной рамке используйте [подгонку SVG по соотношению сторон](https://perfectvector.com/ru/blog/svg-preserveaspectratio), чтобы понять дополнительное пустое место при размещении. ## Где PerfectVector помогает при передаче логотипа PerfectVector восстанавливает векторные фигуры, если у бренда есть только растровая копия. Получив фигуры, сравните полный знак с утверждённым эталоном, уберите случайные фоновые части и отдельно примените документированное охранное поле. Этап восстановления рассматривает [процесс векторизации логотипа](https://perfectvector.com/ru/vectorize-logo). Сначала запросите исходный векторный оригинал и руководство бренда. Они лучше новой трассировки сохраняют рисунок и решения об интервалах. Пустая рамка JPG может быть случайным экспортным полем, а не доказательством политики бренда. [Руководство по форматам логотипа](https://perfectvector.com/ru/blog/logo-file-formats) помогает выбрать передаваемые файлы, а [руководство по векторизации](https://perfectvector.com/ru/blog/how-to-vectorize-a-logo) — подготовить и проверить источник. Завершите проверкой полного рисунка, письменного определения X, размеров файла с полями и реального окружающего макета. Сохраните плотный оригинал и файл для размещения. Другие проверки передачи есть в [библиотеке рабочих процессов блога](https://perfectvector.com/ru/blog). ## Частые вопросы ### Охранное поле всегда равно четверти высоты логотипа? Нет. Четверть высоты круга — выбранное правило этого собственного примера. Существующие бренды могут определять другие единицы, отношения и исключения для конкретного применения. ### Нужно ли добавить белый прямоугольник для сохранения поля? Пустое место можно зарезервировать через SVG viewBox без закрашенного прямоугольника. Белый прямоугольник меняет рисунок на цветном фоне. Проверьте прозрачный файл с отступами в нужном размещении. ### Обеспечивает ли SVG с полями соблюдение правил бренда автоматически? Нет. Он переносит пустое место внутри области просмотра, но импортёр может обрезать границы, а объекты макета — перекрыть её. Письменное правило и итоговая проверка размещения остаются необходимыми. ## Источники 1. [Университет Буффало — Охранное поле](https://www.buffalo.edu/brand/identity/usage/Clear-space.html) — Официальный пример единицы по знаку и исключений по применению. 2. [Vevo — Охранное поле логотипа](https://brand.vevo.com/logo/clearspace/) — Показывает изменение правил по размеру знака и цифровому контексту. 3. [MDN — SVG viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) — Объясняет прямоугольник координат, передающий пустое поле примера. *** Если исходный вектор отсутствует, [восстановите растровый логотип в PerfectVector](https://perfectvector.com/ru/vectorize-logo). Сравните полную композицию с эталоном, затем примените утверждённое охранное поле и проверьте видимый размер логотипа в итоговом размещении. ## Explore - [Read the HTML article](https://perfectvector.com/ru/blog/logo-clear-space-calculation) - [Оптическое центрирование логотипа без изменения оригинала](https://perfectvector.com/ru/blog/logo-optical-centering.md) - [Макет тканой этикетки: чёткий логотип в малом размере](https://perfectvector.com/ru/blog/woven-label-logo-artwork.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)