На входе вектор, на выходе пиксели
В SVG-файле нет пикселей. Это текстовое описание фигур: круг с такими-то координатами, контур через такие-то точки, залитый таким-то цветом. Поэтому SVG-логотип одинаково чёткий и на телефоне, и на мониторе 5K, а один и тот же файл может весить 4 КБ при любом размере отображения.
Во многих местах такое описание напрямую использовать нельзя. Соцсети, маркетплейсы, email-рассылки, документы Office, большинство мессенджеров, магазины приложений и многие системы управления контентом требуют растровое изображение. Конвертация в PNG отрисовывает фигуры в фиксированном размере с сохранением прозрачности, так что результат работает везде, где принимают картинки.
Поскольку рисование происходит в момент конвертации, целевой размер не стоит ничего в плане качества. PNG шириной 3000 px, отрисованный прямо из SVG, идеально чёткий, а тот же логотип, экспортированный в 300 px и увеличенный потом, будет размытым.
Как определяется размер результата
Настройка всего одна — ширина в пикселях. Высота всегда вычисляется по пропорциям SVG, так что рисунок никогда не растягивается.
Если оставить поле пустым, конвертер берёт собственный размер SVG:
- Атрибуты
widthиheightкорневого элемента<svg>, если оба заданы простыми числами или в пикселях, напримерwidth="512" height="256". - Иначе —
viewBox:viewBox="0 0 120 80"даёт 120×80 px. То же самое происходит, когда размер указан в процентах, em или сантиметрах. - Иначе — тот размер, который назначит изображению браузер.
Многие наборы иконок объявляют размер 24×24 или 16×16, что даёт совсем маленький PNG. Введите ширину, чтобы отрисовать крупнее: 512 — для чёткой иконки в стиле приложения, 1200 — для превью в соцсетях. В списке файлов показаны итоговые ширина × высота и размер каждого PNG, так что результат можно проверить до скачивания.
Все файлы в пачке получают одну и ту же ширину. Для иконок разных пропорций это значит одинаковую ширину, но разную высоту.
Какую ширину выбрать для типичных задач
- Retina и экраны высокой плотности: отрисовывайте в два-три раза больше размера отображения. Логотип, который показывается шириной 200 px в шапке страницы, в PNG должен быть шириной 400 или 600 px.
- Документы и слайды: ширина 1500–2000 px сохраняет логотип чётким, даже когда слайд проецируется на весь экран.
- Печать: умножьте ширину печати в дюймах на 300 (дюйм — 2,54 см). Логотипу, напечатанному шириной 4 дюйма (около 10 см), нужно 1200 px.
- Favicon и иконки приложений: чтобы получить весь набор размеров иконок за раз, удобнее «Генератор favicon».
Очень большую ширину ограничивает браузер, а не инструмент. Браузеры ограничивают общее число пикселей canvas; на iPhone и iPad лимит — около 16 миллионов пикселей, примерно 4000×4000. Если на телефоне конвертация с большой шириной не удаётся, попробуйте меньшую или воспользуйтесь браузером на компьютере.
Почему PNG может отличаться от превью в редакторе
SVG отрисовывается браузером как изолированное изображение — так же, как его показал бы тег <img> на веб-странице. Ради безопасности SVG в этом режиме не может запускать скрипты или загружать что-либо из сети. На практике это даёт несколько типичных отличий:
- Шрифты. Текст, набранный веб-шрифтом, который подключён по ссылке, а не встроен, отображается шрифтом по умолчанию. Если шрифт с таким названием установлен на вашем устройстве, используется он, а значит, тот же SVG может выглядеть иначе на другом компьютере. Перевод текста в кривые в графическом редакторе снимает проблему.
- Связанные изображения. Растровые изображения, на которые ссылаются по URL, пропадают; изображения, встроенные в SVG как данные, отображаются нормально.
- Анимация и интерактивность. Эффекты при наведении и поведение на скриптах не применяются, а анимированные SVG сохраняются одним статичным кадром.
- Эффекты. Фильтры и режимы наложения зависят от поддержки SVG в браузере, поэтому сложные эффекты могут слегка различаться в Chrome, Firefox и Safari.
Фон, файлы и конфиденциальность
Пустые области в PNG остаются прозрачными. Если нужен сплошной фон, например для платформы, которая показывает прозрачность чёрным, прогоните результат через «Конвертировать PNG в JPG онлайн» и выберите там цвет фона.
Принимаются SVG-файлы до 20 МБ. Отрисовка и кодирование PNG выполняются в браузере, поэтому файлы, в которых часто лежат ещё не опубликованные логотипы и элементы фирменного стиля, никогда не загружаются на сервер. Результаты можно скачать по одному или одним ZIP.