Почему у SVG нет размера, пока вы его не сконвертируете
Часто спрашивают, как конвертировать SVG в PNG «без потери качества», и в самом вопросе есть недоразумение, которое стоит прояснить сначала. У SVG нет качества, которое можно потерять. У него вообще нет пикселей.
Вектор описывает, пиксели хранят
SVG — это описание фигур — кривых, заливок, текста — в системе координат без фиксированного размера в пикселях. PNG — это фиксированная сетка пикселей. Поэтому конвертация SVG в PNG всегда означает выбор размера, и результат будет чётким в любом выбранном размере.
Откройте SVG в текстовом редакторе — и вы увидите инструкции: перейти в эту точку, провести кривую к той, залить этим цветом. Нигде не сказано, сколько пикселей в ширину занимает рисунок. Это браузер решает в момент показа, и каждый раз может решить по-разному.
Что на самом деле означают viewBox, width и height
Размером управляют три атрибута корневого элемента. viewBox задаёт систему координат — «этот рисунок простирается от 0 до 240 по горизонтали и от 0 до 160 по вертикали». width и height, если они есть, подсказывают размер показа по умолчанию. У многих SVG есть только viewBox, у некоторых — только width и height, а у отдельных нет ни того, ни другого.
Этот конвертер читает то, что есть, вычисляет собственный размер так, как это сделал бы браузер, и использует его как базу 1×. Если ничего не объявлено, он берёт 1 024 пикселя, чтобы вы всё равно получили пригодное изображение.
Почему «без потери качества» — неправильный вопрос
Поскольку SVG можно отрисовать в любом размере из одних и тех же инструкций, PNG в 4 000 пикселей ровно так же чёток, как и в 400 — рендерер просто рисует больше деталей. Единственный способ потерять качество — отрисовать мелко, а потом увеличить PNG. Решение: выбрать итоговый размер здесь, в момент конвертации, и никогда не увеличивать PNG.
Что делает этот конвертер SVG в PNG
Этот инструмент читает ваши SVG-файлы в браузере, удаляет всё исполняемое, рендерит каждый в выбранном размере собственным движком браузера и возвращает PNG без потерь с сохранённой прозрачностью — по отдельности или в ZIP.
Тот же рендерер, что и в вашем браузере
Серверные конвертеры используют отдельную библиотеку — librsvg, Inkscape, ImageMagick, — и у каждой есть пробелы: фильтр, который она не поддерживает, шрифт, который подменяет, градиент, который рисует чуть иначе. PNG, который вы получите, может не совпасть с SVG, на который вы смотрели.
Здесь рендеринг выполняет Blink, Gecko или WebKit — в зависимости от вашего браузера, — рисуя SVG на canvas. Если SVG правильно выглядит в браузере, PNG будет выглядеть так же, потому что это буквально тот же рисунок.
Скрипты удалены, ничего не загружается
SVG — это XML, и он может содержать элементы <script>, обработчики onload и встроенный HTML. Файл из неизвестного источника не стоит открывать бездумно. Перед рендерингом конвертер удаляет скрипты, атрибуты событий и блоки foreignObject, а результат отрисовывает внутри элемента изображения, который в любом случае не может выполнять код. Два уровня защиты, оба локальные.
Ничего никуда не загружается. Панель Network в инструментах разработчика браузера остаётся пустой, пока конвертируется пакет.
Как конвертировать SVG в PNG за 3 шага
Перетащите SVG-файлы
Перетащите один или несколько файлов .svg в пунктирную область или нажмите, чтобы выбрать. На компьютере — до 10 за раз. В каждой строке показывается живой предпросмотр вектора: браузеры отображают SVG нативно, так что вы видите именно то, что будет отрисовано.
Выберите размер и фон
В настройках конвертации выберите Масштаб (1×, 2×, 3× или 4× от собственного размера SVG) или Ширину (пресет или любая ширина в пикселях; высота следует за соотношением сторон). Затем выберите фон: по умолчанию прозрачный, либо белый, чёрный или любой цвет для сведения.
Скачайте PNG или ZIP
Нажмите «Конвертировать». Для каждого файла показываются размеры результата и вес PNG. Скачивайте по одному или нажмите «Скачать всё» — получите ZIP с исходными именами и расширением .png.
Перетащите до 10 SVG-файлов. Они читаются локально и никогда не загружаются на сервер.
Выберите масштаб или введите ширину, затем выберите прозрачный или сплошной фон.
Скачайте каждый PNG по отдельности или всё сразу в ZIP.
Как выбрать правильный размер результата
Раз размер — это выбор, полезно понимать, для чего нужны варианты. Два режима покрывают почти все случаи.
1×, 2×, 3× — под плотность экрана
Обычный монитор показывает один пиксель на CSS-пункт. Retina или HiDPI-дисплей — два; большинство современных телефонов — три. Поэтому иконке, которая занимает на экране 32 пункта, нужен PNG в 32 пикселя для первого случая, 64 для второго и 96 для третьего. В этом и весь смысл 1×, 2× и 3×.
В веб- и мобильной разработке один и тот же SVG обычно экспортируют во всех трёх масштабах. Перетащите файл один раз, сконвертируйте при 1×, поменяйте настройку, сконвертируйте снова — или просто экспортируйте при 3× и дайте платформе уменьшить.
Таблица размеров для частых задач
Фавиконки: 16, 32 и 48 пикселей, лучше всего делать инструментом PNG в ICO из PNG в 512 пикселей. Иконки приложений: 1024 пикселя для магазинов, затем генератор набора иконок. Аватары в соцсетях: 400–800 пикселей. Изображения Open Graph: 1200 × 630. Карточки на маркетплейсах: обычно 2000 пикселей по длинной стороне.
Своя ширина для печати и маркетплейсов
Для печати считайте от физического размера при 300 DPI: страница A4 — 2 480 пикселей в ширину, A3 — 3 508, наклейка 15 см — 1 800. Переключитесь в режим Ширина, введите число — и высота подстроится под соотношение сторон SVG. Конвертер ограничивает результат 16 384 пикселями по длинной стороне — это предел, который браузеры ставят для canvas, — и сообщает, если запрос пришлось уменьшить.
Прозрачность, фон и края
У большинства SVG — логотипов, иконок, иллюстраций — нет фона: фигуры висят в пустоте. PNG умеет это хранить, и это одна из двух причин предпочесть его JPG для такой задачи.
Сохранить прозрачный фон
Прозрачный фон здесь по умолчанию. Каждый пиксель, который SVG не закрасил, остаётся пустым, включая частично закрытые пиксели вдоль изогнутых и диагональных краёв. Именно эти мягкие краевые пиксели позволяют PNG лежать на тёмном слайде, цветной кнопке или фотографии без видимого контура.
Результаты показываются на шахматной подложке, чтобы вы могли проверить прозрачность до скачивания.
Когда сводить на цвет
Некоторые получатели не работают с альфа-каналом — старые почтовые клиенты, отдельные печатные процессы, некоторые загрузчики маркетплейсов, которые незаметно конвертируют в JPG. Для них выберите Белый, Чёрный или свой цвет в настройке фона. Фигура накладывается на этот цвет, и PNG получается полностью непрозрачным.
Выбирайте цвет, совпадающий с тем местом, куда ляжет изображение. Сведите на белый, а потом положите PNG на тёмный фон — и краевые пиксели, теперь бледно-оранжевые, бледно-голубые, какого бы цвета ни была фигура, проявятся слабым ореолом. Этот ореол — самая частая жалоба на сконвертированные логотипы, и это вопрос выбора фона, а не ошибка рендеринга.
Что может пойти не так (и как это исправить)
Рендеринг в браузере означает, что PNG совпадает с экраном, но вместе с этим он наследует правила браузера о том, что изображению разрешено загружать.
Отсутствующие шрифты
Текст в SVG отрисовывается тем шрифтом, который в нём указан. Если этот шрифт не установлен на вашем компьютере и не встроен в файл, браузер подменит его, и в PNG окажется замена. Веб-шрифты по URL тоже не загрузятся: SVG, отрисовываемому как изображение, запрещено запрашивать внешние ресурсы.
Надёжное решение — перевести текст в кривые в дизайн-программе перед экспортом SVG. Буквы становятся контурами и рендерятся одинаково везде.
Отсутствующие связанные изображения
То же правило действует для <image href="https://…">. Растровое изображение, подтянутое по URL, выйдет пустым. Вместо этого встройте его — в большинстве редакторов есть опция экспорта «встроить изображения», которая превращает ссылку в data URI внутри SVG. Встроенные изображения рендерятся нормально.
Пустой или крошечный результат
SVG без viewBox и без width и height рендерится здесь в запасном размере; если рисунок далеко от начала координат, он может оказаться вне видимой области. Добавьте viewBox, охватывающий графику. Крошечный результат почти всегда означает, что в SVG объявлены маленькие width и height — переключитесь в режим Ширина и введите нужный размер.
Симптом, причина, решение
| Симптом | Вероятная причина | Решение |
|---|---|---|
| Неправильный шрифт в PNG | Шрифт не установлен / веб-шрифт заблокирован | Перевести текст в кривые перед экспортом |
| Фото внутри SVG пустое | Подключено по URL, а не встроено | Переэкспортировать со встроенными изображениями |
| PNG крошечный | В SVG объявлены маленькие width/height | Использовать режим Ширина и ввести нужный размер |
| Графика обрезана | viewBox не охватывает рисунок | Исправить viewBox в редакторе |
| Ореол на тёмном фоне | Сведено на белый | Оставить прозрачным или свести на реальный цвет фона |
| Фильтр или размытие выглядят иначе | Серверный конвертер использовал другой движок | Конвертировать здесь — рендерит браузер |
Для чего людям нужен SVG в виде PNG
Если SVG масштабируется идеально, зачем вообще конвертировать SVG в PNG? Потому что очень много программ до сих пор не принимают вектор.
Наборы иконок и фавиконки
Магазины приложений, форматы фавиконок и многие системы иконок требуют PNG фиксированного размера. Сконвертируйте SVG в PNG один раз в самом большом нужном размере, а остальное нарежьте генератором иконок или PNG в ICO.
Платформы, которые не принимают SVG
Соцсети, маркетплейсы, форумы и большинство медиатек CMS отклоняют загрузку SVG — отчасти из соображений безопасности, ведь SVG может содержать скрипты. PNG в 2× с прозрачным фоном — универсальная замена.
Подписи в письмах и рассылки
Почтовые клиенты вырезают SVG или показывают битую картинку. Логотипы в письмах — это PNG, в идеале экспортированные при 2× и показанные в половинном размере, чтобы оставаться чёткими на Retina-экранах.
Печать и крупный формат
Типографии принимают PDF и растр высокого разрешения. Отрисуйте логотип в режиме Ширина при 3 000 или 4 000 пикселей — и он чисто напечатается в размере постера: у вектора, растрированного в целевом размере, нет размытия от увеличения.
Браузерные и серверные конвертеры SVG
Почти каждый онлайн-конвертер SVG в PNG загружает файл и рендерит его на сервере с помощью librsvg, Inkscape или headless-браузера. С простыми фигурами это работает, а на всём сложном расходится.
Точность
Каждая библиотека рендеринга поддерживает немного разный кусок спецификации SVG. Фильтры, маски, режимы наложения, CSS внутри файла и текст по контуру — обычные жертвы. Браузерные движки — самые полные рендереры SVG из существующих, и рендеринг тем, что стоит на вашем компьютере, означает, что PNG не может разойтись с предпросмотром.
Приватность и лимиты
Неопубликованный логотип, схема продукта, график с внутренними цифрами: загрузка их в конвертер — небольшая утечка, которой никто не хотел. Серверные инструменты к тому же ограничивают размер файла и количество операций в день, потому что рендеринг стоит им денег. Рендеринг на собственном устройстве убирает и то, и другое — нечему утекать и нечего считать.
Что сервер делает лучше: очень старое железо отрисует пакет сложных SVG медленнее, чем дата-центр. Для десяти логотипов разницы нет.
Что делать с PNG дальше
После конвертации SVG в PNG на выходе стандартный PNG, поэтому любой инструмент здесь примет его без повторной загрузки.
Для веба прогоните через Сжать PNG или конвертируйте в WebP — оба сохраняют прозрачность и уменьшают размер. Для почты или фотографий PNG в JPG сводит фон и сжимает. Для точных размеров постфактум — Изменить размер. А если вы начали с растра и хотели бы иметь вектор, PNG в SVG идёт в обратную сторону.