SVG импортируется в неверном размере: диагностика и исправление

Когда SVG импортируется в неверном размере, его контуры обычно не повреждены. Приложение экспорта и приложение импорта по-разному сопоставляют координатные единицы SVG с пикселями, дюймами или миллиметрами. Поэтому один и тот же файл может выглядеть правильно в браузере, оказаться крошечным в Figma и получить другой масштаб в CAD или ПО для резки.

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

Три размера внутри SVG

SVG может описывать три связанные величины, которые в разговоре называют его «размером». Спецификация координатных систем SVG 2 определяет связь пользовательских координат, области отображения и viewBox.

1. Геометрия — координаты внутри контуров и фигур. Прямоугольник может занимать диапазон от 0 до 100 в собственной системе координат файла.
2. viewBox задаёт прямоугольник этой системы координат, который должен быть видимым. viewBox="0 0 100 100" означает, что видимая область рисунка занимает 100 пользовательских единиц в каждом направлении.
3. Область отображения — размер при показе или импорте. Корневой элемент может задавать width="100mm", width="400" или вообще не содержать ширину. Принимающее приложение решает, как перевести это значение в единицы своего документа.

Вот полный пример квадрата со стороной 100 единиц и явно заданным физическим размером:

<svg xmlns="http://www.w3.org/2000/svg"
  width="25mm" height="25mm" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="#2563eb" />
</svg>

Геометрия составляет 100 на 100 пользовательских единиц, а предполагаемая область отображения — 25 на 25 мм. viewBox отображает одно координатное пространство в другое. Если удалить width и height или заменить их числами без единиц, у импортёра будет больше свободы при выборе размера отображения.

Подробное руководство по редактированию SVG описывает безопасные изменения кода. Для этой проблемы оставьте данные контуров нетронутыми, пока проверяете корневой элемент <svg>.

Почему обвиняют DPI

У контуров SVG нет пиксельного разрешения, как у PNG или JPG. DPI обсуждают, когда программа переводит пиксели CSS в физические единицы или когда графическое приложение применяет к этим единицам собственные правила экспорта.

Спецификация CSS Values определяет 1in как 96 пикселей CSS, а 1pt — как 1/72 дюйма. Если процесс ошибочно трактует пиксели CSS как пункты, возникает знакомое несоответствие масштаба 96 к 72, то есть 1,333. Другие коэффициенты могут появиться, когда импортёр игнорирует физические width и height, использует только viewBox или применяет собственную настройку единиц документа.

Поэтому совет «измените DPI» неполон. Растрового значения DPI для изменения может вообще не быть. Сначала рассчитайте коэффициент масштаба:

scale factor = intended size / imported size

Если квадрат 100 мм импортируется как 75 мм, поправочный коэффициент равен 100 / 75 = 1.3333. Масштабируйте весь импортированный эскиз или документ с этим коэффициентом, затем снова проверьте квадрат.

Эталонный квадрат разделяет две проблемы, которые при первом импорте выглядят одинаково. Если квадрат и рисунок изменились в одной пропорции, исправьте весь документ. Если квадрат правильный, а рисунок нет, не трогайте единицы документа и проверьте границы или преобразования рисунка.

Выполните тест с эталонным квадратом

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

1. В исходном редакторе нарисуйте квадрат со стороной ровно 10 мм, 1 дюйм или другого известного размера.
2. Задайте ему отличающуюся заливку или обводку и разместите за пределами готового дизайна.
3. Экспортируйте рисунок и квадрат вместе в один SVG.
4. Импортируйте файл в целевое приложение, не перетаскивая маркеры изменения размера.
5. Измерьте квадрат инструментом размеров целевого приложения.
6. Разделите предполагаемый размер на импортированный.
7. Масштабируйте весь импорт одним действием. Не меняйте размеры отдельных фигур.
8. Удалите квадрат только после успешной окончательной проверки размеров.

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

Для CNC, лазера и 3D используйте квадрат в физических единицах. Квадрат в пикселях может подтвердить пропорциональное масштабирование, но не доказывает правильность миллиметров, необходимых в работе с устройством.

Исправлять файл или импорт?

Редактировать файл полезно, если вы управляете оригиналом и регулярно отправляете его в один и тот же тип рабочего процесса. Исправлять импорт безопаснее, если CAD или ПО для резки использует известные правила масштаба, а SVG уже ведёт себя правильно во всех остальных средах.

Для CAD и ПО для резки нужна дополнительная проверка

Браузеру достаточно нарисовать изображение. Процессам CNC, лазерной обработки и 3D нужен точный физический результат. После проверки масштаба отдельно проверьте геометрию:

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

Руководство по преобразованию изображения в SVG для CNC описывает очистку контуров и передачу в CAM. Если следующий этап — выдавливание, воспользуйтесь процессом подготовки SVG для 3D-печати после исправления масштаба.

Для Shaper Origin продолжите по списку проверок физического размера и типа реза. Проверка масштаба — один этап; перед фрезерованием импортированным контурам также нужно назначить задуманные типы реза.

После подтверждения нужных размеров сопоставьте их с ковриком для резки до последнего экрана подготовки вашего режущего устройства.

Для печатных карточек с изображениями руководство по раскладке карточек визуального расписания проверяет размещение рисунка, размеры страницы PDF и масштаб печати. SVG правильного размера всё равно может оказаться на странице, которую принтер уменьшит.

Где подходит PerfectVector

PerfectVector преобразует растровый рисунок в редактируемые контуры SVG. Процесс подготовки SVG и DXF для CNC полезен, если единственный исходник — PNG или JPG, а вам нужна векторная геометрия для CAM. Он не знает окончательный физический размер детали, поэтому размеры всё равно нужно задать и проверить в целевом ПО.

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

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

Почему SVG импортируется меньше, чем был экспортирован? Приложения экспорта и импорта могут по-разному сопоставлять пользовательские единицы SVG, пиксели CSS, пункты или физические единицы. Добавьте квадрат известного размера и сравните предполагаемые и импортированные размеры. Если весь файл изменился с одним коэффициентом, масштабируйте документ один раз вместо редактирования отдельных контуров.

Есть ли у SVG DPI? Геометрия SVG не зависит от разрешения, поэтому у неё нет фиксированной плотности пикселей, как у растра. Преобразования, похожие на DPI, важны, когда программа переводит пиксели CSS или единицы дизайна в дюймы или миллиметры. Часто причина несоответствия — правила импортёра, а не скрытое разрешение изображения.

Как viewBox влияет на размер SVG? viewBox определяет видимый прямоугольник координат и позволяет рендереру отобразить эти пользовательские единицы в область отображения. Сам по себе он не задаёт физический размер. Размер этой области определяется корневыми width и height, CSS или принимающим приложением.

Почему SVG правильного размера в браузере, но неправильного в Fusion или LightBurn? Браузер отображает SVG в области CSS, а CAD и лазерное ПО должны перевести его в физические единицы документа. Эти импортёры могут использовать другие правила или игнорировать часть метаданных размеров SVG. Измерьте эталонный квадрат и исправьте весь импорт полученным коэффициентом масштаба.

Нужно ли преобразовать SVG в DXF, чтобы исправить размер? Это не первый шаг. Преобразование формата может сохранить ту же неоднозначность масштаба или добавить новую. Сначала определите коэффициент с помощью эталонного квадрата. Используйте DXF, если он предпочтителен для целевого процесса, затем снова проверьте размеры после импорта.

Источники

1. W3C — координатные системы SVG 2 — Определяет пользовательские единицы, области отображения, viewBox и преобразования.
2. W3C — значения и единицы CSS, уровень 4 — Определяет эталонные соотношения пикселей CSS, дюймов и пунктов.
3. Autodesk Fusion — вставка SVG — Описывает размещение SVG и управление масштабом в эскизах Fusion.

Перед созданием траектории инструмента или резкой подготовьте SVG или DXF для CNC и проверьте результат. Измерьте эталонный квадрат и реальный элемент, проверьте окончательный предпросмотр CAM и лишь затем удалите квадрат из производственного файла.