> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Оптическое центрирование логотипа без изменения оригинала > Начните с геометрических границ логотипа, сравните оптическое смещение в нужном размере и запишите положение отдельно, сохранив векторный оригинал. Source: https://perfectvector.com/ru/blog/logo-optical-centering Language: ru Author: Irene Kim Published: 2026-10-12T08:00:00+09:00 Чтобы оптически отцентрировать логотип, сначала геометрически расположите видимый рисунок по центру нужной рамки. Затем сравните небольшую поправку положения при скрытых направляющих и в размере, который увидят люди. Форма логотипа в обеих версиях должна быть одинаковой. Запишите принятое смещение как решение о размещении, оставив векторный оригинал неизменным. Оптическое центрирование — визуальная поправка положения, когда равные геометрические поля не дают нужного равновесия. Это оценка данной фигуры в данном окружении. Расчёт центроида или фиксированный сдвиг в пикселях может предложить исходную точку, но ни один не определяет универсальный визуальный оптимум. В примере используется собственный асимметричный знак в рамке 200 на 140. Широкая левая часть и узкий правый кончик позволяют легко измерить равные границы и сравнить варианты. Файлы ниже можно воспроизвести без платной графической программы. ## Задайте геометрическую основу до оценки равновесия Ограничивающая рамка — минимальный прямоугольник по осям координат вокруг измеряемой геометрии. Его середина полезна для начального размещения. Она не описывает количество залитой площади по сторонам или часть, привлекающую внимание. [Примеры оптического дизайна Рафала Томала](https://rafaltomal.com/optically-perfect/) показывают, когда визуальное размещение отличается от числового выравнивания. Они поддерживают сравнение реального результата, а не дают единую поправку для всех логотипов. До изменения положения убедитесь, что выравниваете рисунок, а не файл со случайными полями. Широкая пустая рамка может сместить на вид даже симметричный логотип. Осмотрите холст, удалите случайные фоновые части и подтвердите состав полного знака. Сохраняйте утверждённое охранное поле, не обрезайте его. Для измерений SVG [getBBox()](https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox) сообщает границы в пользовательской системе элемента без его собственных и родительских преобразований. Измерения области браузера отвечают на другой вопрос. [Руководство по ограничивающей рамке SVG](https://perfectvector.com/ru/blog/svg-bounding-box) объясняет, как разделять эти измерения. ## Сравните неизменный знак в одинаковых рамках Исходный контур ниже идёт от x = 20 до 140 и от y = 20 до 80. Его размер — 120 на 60, середина — (80, 50). Середина рамки — (100, 70). Перенос группы на (20, 20) центрирует эти границы. Сохраните следующий код как `logo-geometric.svg` и откройте в браузере. Бледный прямоугольник — рамка размещения, а не часть рисунка логотипа. ```xml ``` Теперь видимый рисунок занимает от x = 40 до 160 и от y = 40 до 100, давая равные горизонтальные поля 40 единиц и равные вертикальные поля 40 единиц. Это исходная основа, а не требование оставить финальное положение именно таким. Для пробного оптического размещения сохраните второй файл с `transform="translate(32 20)"`. Сдвиг вправо на 12 единиц меняет только положение. Значение `d`, заливку, рамку и размер отображения оставьте одинаковыми. [Перенос SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) перемещает систему координат, не требуя переписывать контур. ![Собственный асимметричный знак по центру границ, сдвинутый вправо на двенадцать единиц в той же рамке и сравнённый в меньшем размере](https://perfectvector.com/blog/logo-optical-centering/placement-comparison.webp) *Обе версии используют один контур. Сдвиг вправо — пробное положение для знака с широкой левой частью; измерения доказывают перемещение, а не универсальное зрительное предпочтение.* Наше редакционное предпочтение в этой рамке — пробный сдвиг вправо: широкая левая часть ближе к середине, узкий кончик выступает дальше вправо. В другом макете вам может больше понравиться геометрический вариант. До записи решения сравните оба с настоящим окружающим содержимым. ## Проверьте положение без направляющих и в размере использования Сравнивайте в настоящих рамке и фоне. До оценки скройте центральные линии и ограничивающие рамки, иначе взгляд может остаться на измеренных полях вместо знака. 1. Откройте геометрическую и пробную версии в одинаковом размере. 2. Посмотрите каждую отдельно в нужном макете, затем сравните вместе. 3. Проверьте малое размещение, где логотип действительно появится. Сохраните пропорции рамки и окружение. 4. Подтвердите сохранение охранного поля и отсутствие обрезки после перемещения. 5. Запишите выбранное смещение и его размещение. Вернитесь к геометрической основе, если проба создаёт новый дисбаланс. При ширине рамки 200 px пробный сдвиг 12 единиц равен 12 px. При ширине 100 px тот же сдвиг SVG равен 6 px. Он масштабируется с viewBox. Отдельный фиксированный CSS-сдвиг 12 px для всех размеров дал бы другое правило. Примечание о методе: мы отрисовали оба полных SVG в Chromium, сравнили границы отображения при ширине 200 и 100 px и подтвердили одинаковые данные контуров. У геометрического варианта при полном размере были поля 40 px слева и справа. У пробного — 52 px слева и 28 px справа, с относительным сдвигом 6 px при половинном размере. Это геометрические проверки и редакционное сравнение, а не исследование восприятия. Если между версиями меняется форма, восстановите оригинал и изменяйте только преобразование размещения. Если сдвиг обрезает кончик, проверьте область просмотра и смещение до изменения логотипа. Если другая композиция или фон меняют равновесие, оцените применение отдельно. Для более широкой или высокой рамки см. [руководство по адаптивной композиции SVG-логотипа](https://perfectvector.com/ru/blog/responsive-svg-logo-lockup). ## Сохраните исходный оригинал и решение о размещении Храните исходный логотип независимо от оболочки размещения макета. Запишите размеры рамки, эталонный размер, преобразование и фон. Для примера полезна заметка: «Исходный знак 120 на 60; рамка размещения 200 на 140; пробный перенос (32, 20); пересмотреть для других композиций». Утверждённый фирменный файл может уже иметь оптические поправки в форме или экспортных границах. Используйте этот файл и инструкции размещения. Не переделывайте существующий логотип только из-за неравных измеренных полей. Размещение всего знака также отличается от центрирования редактируемого текста по базовой линии. Для подписи внутри элемента управления используйте [руководство по вертикальному выравниванию текста SVG](https://perfectvector.com/ru/blog/svg-text-vertical-alignment). Остальные процессы источников и передачи есть в [руководствах блога](https://perfectvector.com/ru/blog). ## Где пригодится PerfectVector до размещения PerfectVector поможет восстановить векторные фигуры растрового логотипа до сравнения положений. Сначала сравните силуэт, отверстия и случайные фоновые части с исходным эталоном. [Процесс векторизации логотипа](https://perfectvector.com/ru/vectorize-logo) даёт этот этап восстановления; оптическое размещение остаётся вашим решением. Если утверждённый векторный оригинал есть, размещайте его напрямую. Если трассировка меняет намеренную асимметрию, исправьте исходную геометрию до оценки центра. Это рассматривает [руководство по векторизации логотипа](https://perfectvector.com/ru/blog/how-to-vectorize-a-logo). Масштабируемый файл упрощает изменение размещения, но не решает, что люди воспримут как сбалансированное. ## Частые вопросы ### Должны ли поля асимметричного логотипа быть равными? Равные поля дают измеримую геометрическую основу. Конкретный асимметричный логотип может лучше выглядеть с документированным смещением. Сравнивайте в нужном размере и сохраняйте утверждённый рисунок неизменным. ### Является ли центроид оптическим центром логотипа? Геометрический центроид описывает определённое распределение геометрии или площади. Он помогает выбрать пробное положение, но не определяет воспринимаемое равновесие любого логотипа в любой рамке и на любом фоне. ### Нужно ли менять контур, чтобы переместить логотип? Для сравнения положений сохраняйте исходный контур и используйте отдельное преобразование или позицию в макете. Это сохраняет оригинал и позволяет легко сравнить или отменить поправку. ## Источники 1. [Рафал Томал — Как сделать дизайн оптически точным](https://rafaltomal.com/optically-perfect/) — Собственные примеры дизайнера, где визуальные поправки отличаются от числового выравнивания. 2. [MDN — SVGGraphicsElement getBBox()](https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox) — Объясняет локальные границы для геометрической основы. 3. [MDN — SVG transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) — Описывает перенос неизменного контура через группу размещения. *** Если логотип сохранился только в растре, [восстановите векторные фигуры в PerfectVector](https://perfectvector.com/ru/vectorize-logo). Сравните силуэт с эталоном, затем геометрическое и оптическое положения в размере использования и сохраните смещение отдельно от оригинала. ## Explore - [Read the HTML article](https://perfectvector.com/ru/blog/logo-optical-centering) - [Охранное поле логотипа: как рассчитать и сохранить отступ](https://perfectvector.com/ru/blog/logo-clear-space-calculation.md) - [Какой формат файла должен быть у логотипа? Руководство под каждую задачу (и что делать, если у вас есть только PNG)](https://perfectvector.com/ru/blog/logo-file-formats.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)