SVG preserveAspectRatio: вписать без растягивания

Используйте preserveAspectRatio="xMidYMid meet", когда весь viewBox SVG должен поместиться в области отображения без растягивания. Используйте slice, если эту область нужно покрыть целиком и часть содержимого может выйти за её края. Используйте none только тогда, когда неравное горизонтальное и вертикальное масштабирование намеренно.

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

Сначала выберите поведение вписывания

Справочник MDN по preserveAspectRatio описывает эти значения и значение по умолчанию xMidYMid meet. Для элемента svg это отображение требует viewBox. Атрибут чувствителен к регистру: сохраните прописные A и R.

Для логотипа начните с meet. Потеря буквы или превращение круга в овал обычно хуже, чем свободное пространство. Для декоративного фона намеренная обрезка может быть допустима. Решите это перед выбором выравнивания.

Проверьте одну эмблему в двух формах области просмотра

Этот собственный пример использует круг, прямоугольник и смещённый от центра треугольник. Круг делает растягивание заметным; неодинаковые части помогают увидеть изменения выравнивания лучше, чем симметричный значок.

Вставьте это в HTML-файл и откройте в браузере:

<svg width="300" height="100" viewBox="0 0 200 100"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="Circle, rectangle, and triangle emblem"
     style="background:#f4ead4; overflow:hidden">
  <circle cx="40" cy="50" r="25" fill="#147d78" />
  <path d="M85 20 H130 V80 H85Z" fill="#e5a340" />
  <path d="M145 70 L170 25 L190 70Z" fill="#183549" />
</svg>

ViewBox имеет ширину 200 единиц и высоту 100. Его пропорция — 2:1. Первая область просмотра — 300 на 100 CSS-пикселей, пропорция 3:1. Измените только атрибут для сравнения xMidYMid slice и none. Затем задайте области просмотра width="100" height="300" и повторите.

Мы отрисовали эту геометрию в Chrome с небольшим тестовым интерфейсом на основе переключателя. Показания использовали текущую матрицу преобразования группы иллюстрации. Полученные масштабы и переносы совпали со значениями ниже; смещение slice примерно −25 пикселей здесь округлено.

В высокой области просмотра meet показал все три небольшие фигуры. Центрированный slice показал лишь часть увеличенной композиции с преобладанием золотого прямоугольника. none сделал круг узким и высоким. Это проверка данного образца в Chrome, а не обещание поведения импорта всех графических редакторов.

Для этого примера с нулевым началом правило масштаба простое. Разделите ширину области просмотра на ширину viewBox, затем высоту области просмотра на высоту viewBox. meet использует меньшее отношение для обеих осей; slice — большее. none сохраняет два отношения раздельно. Спецификация системы координат SVG определяет отображение, включая выравнивание и ненулевые начала viewBox.

Выравниванием выбирайте место для свободного пространства

Первое ключевое слово управляет выравниванием. xMin, xMid и xMax выравнивают левый край, горизонтальный центр или правый край viewBox. YMin, YMid и YMax делают то же по вертикали. Они относятся к прямоугольнику viewBox, который может содержать пустое пространство вокруг реальных контуров.

Для высокой тестовой области просмотра:

• xMinYMin meet размещает вписанный viewBox вверху вместо вертикального центрирования.
• xMinYMin slice сохраняет левую сторону viewBox выровненной с левой стороной области просмотра. Увеличенная правая сторона выходит за её границы.
• xMidYMid slice распределяет горизонтальный выход за границы по обеим сторонам.

Мы переключили тестовый интерфейс с центрирования на xMinYMin. Переносы и meet, и slice стали нулевыми, а коэффициенты масштабирования остались соответственно 0.5 и 3. Выравнивание переместило композицию, но не изменило масштаб вписывания.

Изменение выравнивания видно только по оси со свободным пространством или выходом за границы. В широком случае meet viewBox уже заполняет высоту, поэтому замена YMid на YMin не имеет вертикального пространства для перемещения.

Выбирайте обрезку явно

slice выбирает масштаб. Обрезка определяет, видны ли части за пределами области просмотра. Пример явно задаёт overflow:hidden, чтобы обрезка была предсказуемой.

В высоком тестовом интерфейсе переключение overflow на visible показало увеличенные круг и треугольник за пределами области просмотра slice. Геометрия не исчезла. Справочник MDN по SVG overflow объясняет связь overflow и обрезки по области просмотра, включая различия стилей по умолчанию между контекстами SVG.

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

Аналогично, meet гарантирует вписывание viewBox, но не гарантирует, что всё нарисованное содержимое помещается. Обводка, фильтр или контур вне этого исходного прямоугольника всё ещё могут выходить за него. Проверяйте видимые края, не доверяя одному атрибуту.

Исправьте пустое пространство исходника перед борьбой с выравниванием

Допустим, маленький знак занимает только середину очень большого viewBox. meet вписывает весь координатный прямоугольник вместе с пустыми отступами. Результат может выглядеть слишком маленьким даже при правильном масштабировании.

Проверьте экспортированный холст или монтажную область в редакторе. Если меняете viewBox для более плотной композиции, включите нужные обводки и эффекты и перепроверьте каждое размещение. Не убирайте все отступы автоматически: исходник может содержать намеренное охранное поле вокруг фирменного знака.

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

Различайте встроенный SVG и вписывание изображения

Для встроенного SVG меняйте атрибут нужного элемента svg. CSS может задавать размер его рамки, а preserveAspectRatio отображает viewBox в эту рамку.

Для внешнего SVG в HTML-элементе изображения CSS управляет вписыванием замещаемого изображения:

<img class="brand-mark" src="emblem.svg" alt="Brand emblem">
<style>
  .brand-mark {
    width: 300px;
    height: 100px;
    object-fit: contain;
    object-position: center;
  }
</style>

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

Есть также SVG-элемент image, записываемый полным словом, а не HTML img. Его preserveAspectRatio управляет вписыванием ссылочного изображения в прямоугольник этого элемента. Это исключение из общего требования задавать viewBox на том же элементе, как объясняет справочник MDN по атрибуту. Разделение этих трёх случаев помогает избежать попытки исправить HTML-изображение добавлением к нему атрибута только для SVG.

Сохраните пропорции исходника перед размещением

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

Существующий качественный SVG можно сразу проверять на вписывание. Для простой эмблемы выше достаточно геометрии, написанной вручную. Обзор векторизации изображений объясняет, когда полезно восстановление контуров из растра.

Для знака, существующего только в растре, попробуйте исходник в PerfectVector, проверьте SVG, затем сравните широкое и высокое размещение с meet перед рассмотрением обрезки. Сохраните исходный векторный оригинал, чтобы решения макета оставались обратимыми.

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

Почему при meet в моём SVG всё ещё пустое пространство? У области просмотра и viewBox могут различаться пропорции, оставляя свободное пространство после равномерного масштабирования. Исходный viewBox также может содержать отступы вокруг контуров. Выравнивание перемещает этот прямоугольник, но не удаляет его внутреннюю пустоту.

slice навсегда обрезает иллюстрацию? Нет. Он меняет масштаб для покрытия области просмотра. Overflow и обрезка управляют видимыми частями. Исходная геометрия контуров остаётся в документе, если вы не редактируете её отдельно.

Почему none превращает мой круг в овал? Он допускает разные горизонтальные и вертикальные коэффициенты масштаба. Когда пропорции области просмотра и viewBox различаются, круг может стать эллипсом. Используйте meet или slice с ключевым словом выравнивания для равномерного масштабирования.

Источники

1. MDN preserveAspectRatio — Определяет значения вписывания, выравнивание, значения по умолчанию и исключение для SVG image.
2. SVG coordinate-system specification — Определяет расчёт масштаба и переноса для области просмотра.
3. MDN SVG overflow — Объясняет управление обрезкой по области просмотра через overflow.
4. MDN object-fit — Описывает вписывание замещаемого содержимого изображения в CSS-рамку.