Как выбрать размеры в пикселях при экспорте SVG в PNG

Не путайте координаты SVG с пикселями PNG

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

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

• Считайте viewBox внутренними координатами.
• Зафиксируйте максимальный реальный размер показа до экспорта.

Планируйте размер от реального места использования

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

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

Не оценивайте размер только по тому, как файл выглядит в редакторе. Масштаб предпросмотра может скрывать нехватку пикселей, а интерфейс способен уменьшать крупное изображение автоматически. Уточните фактический размер контейнера в целевом продукте и проверьте, не меняется ли он на узком экране или при другом масштабе интерфейса. Если пользователи могут приближать схему, предусмотрите этот сценарий отдельно. Для обычной веб-страницы сравните визуальную пользу более крупного источника с его весом и временем загрузки. Сохраняйте исходный SVG как мастер-файл: он позволит получить другой PNG без повторного увеличения уже готового растра и без накопления ошибок интерполяции. Такой порядок также упрощает повторную проверку, если требования к экрану или макету изменятся позднее.

• Определите размеры отдельно для сайта, приложения, документа и слайда.
• Создайте несколько вариантов, если места использования сильно различаются.

Проверяйте пропорции вместе с внутренними полями

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

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

• Согласуйте прямоугольник вывода с пропорциями исходника.
• Оценивайте холст и реальные границы фигур отдельно.

Испытайте тонкие линии, текст и связанные ресурсы

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

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

• Оценивайте линии и текст в реальном размере показа.
• Убедитесь, что шрифты и связанные изображения отрисовались.

Проверьте скачанный PNG в настоящем контексте

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

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

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

• Подтвердите размеры в действительно скачанном файле.
• Испытайте один и тот же результат в самом маленьком и самом большом месте.