Почему SVG открывается в неправильном размере — и как это исправить

SVG и подготовка файлов

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

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

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

Почему размер SVG может интерпретироваться по-разному

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

Если одна программа опирается на пиксели, другая — на миллиметры, а третья использует собственное предположение при отсутствии единиц, один файл может выглядеть по-разному. Частая точка сравнения для SVG — 96 DPI: при такой плотности 1 дюйм соответствует 96 пикселям. Это помогает сопоставить пиксели с физическим размером, но не отменяет необходимость проверки в конкретном приложении.

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

Четыре понятия, которые стоит различать

Физическая ширина и высота

Это размер, который нужен в реальном мире: например, ширина таблички, наклейки, бирки или детали для сборки. Для производственных задач обычно удобнее мыслить миллиметрами, потому что они напрямую соотносятся с линейкой и материалом.

Единицы измерения

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

Пиксели и 96 DPI

Пиксель сам по себе не является физической длиной. При ориентире 96 DPI он помогает перевести экранный размер в дюймы и затем в миллиметры. Но разные приложения могут по-разному показывать и импортировать размеры, поэтому используйте этот расчёт как ориентир, а не замену фактическому измерению.

ViewBox

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

Безопасный порядок исправления размера

1. Запишите целевой размер готового изделия

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

2. Посмотрите, что заявлено в SVG

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

3. Создайте отдельную копию с нужным физическим размером

Не меняйте единственный исходник. Сделайте копию, назовите её по назначению и задайте целевую ширину либо высоту. Когда нужно сохранить форму, второе измерение должно меняться пропорционально. Например, sign-200mm-wide.svg понятнее, чем new-size.svg.

SVG Size Inspector предназначен для просмотра объявленных размеров SVG в миллиметрах, дюймах, пикселях при 96 DPI и viewBox. В рабочей копии он позволяет задать физическую ширину и высоту, сохраняя внутренние контуры; по умолчанию пропорции сохраняются и при их изменении должно появляться предупреждение. Всё равно откройте скачанную копию в своей целевой программе и проверьте её размер перед производством.

4. Сохраняйте пропорции, если искажение не задумано

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

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

5. Проверьте копию в целевой программе и на материале

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

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

Что не стоит делать

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

Не исправляйте размер только визуальным масштабированием на рабочем поле, если файл будет передаваться или использоваться повторно. Такая правка может существовать только внутри одного проекта и не решить проблему в следующем приложении. Лучше иметь ясно названную копию с заданным физическим размером.

Наконец, не предполагаете, что «векторный» означает «всегда подходит для любого масштаба и устройства». Геометрия масштабируется, но материал, мелкие детали и интерпретация программ всё равно требуют проверки.

Частые проблемы

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

Почему SVG, который хорошо выглядит в браузере, открывается не того размера?

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

Нужно ли всегда использовать миллиметры?

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

Что означает 96 DPI для SVG?

Это распространённый ориентир, при котором 96 пикселей соответствуют одному дюйму. Он помогает сравнивать пиксельные значения с физическими, но конечный результат всё равно нужно подтвердить в целевой программе.

Можно ли изменить только ширину SVG?

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

Что делать, если в SVG нет width, height или viewBox?

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

Гарантирует ли изменение размера, что деталь подойдёт?

Нет. Размер — только часть задачи. Материал, толщина, зазоры, контуры и особенности программы могут повлиять на физический результат. Проверьте самый критичный элемент на тестовом образце.

Следующий практический шаг

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