SVG в PNG
PNG подходит, когда SVG нужно отдать как растровое изображение: скриншоты для магазинов приложений, баннеры README, OG-изображения, UI-макеты или графика для e-mail. Этот конвертер рендерит SVG в вашем браузере, применяет выбранный коэффициент масштаба и сохраняет альфа-канал, поэтому прозрачные иконки и круглые аватары не получают белый прямоугольник.
Как экспортировать SVG в PNG
-
1
Загрузите SVG
Загрузите файл или вставьте SVG-разметку напрямую. Inline CSS и блоки <style> рендерятся браузером.
-
2
Задайте масштаб
Выберите коэффициент масштаба от 1x до 10x. Итоговый размер берется из width, height или viewBox SVG до масштабирования.
-
3
Проверьте прозрачный предпросмотр
Предпросмотр сохраняет альфа-прозрачность. Если нужен сплошной фон, добавьте соответствующую фигуру в SVG перед экспортом.
-
4
Скачайте PNG
Сохраните image.png из canvas в браузере. SVG-разметка не отправляется на сервер.
Частые размеры вывода и где они используются
| Назначение | Типичный размер PNG | Примечания |
|---|---|---|
| Мастер-иконка приложения (iOS/Android) | 1024 × 1024 | Используйте квадратный SVG; магазины обычно требуют непрозрачный фон |
| OG/социальная карточка | 1200 × 630 | Поместите фирменный фон в SVG до экспорта |
| Заголовок README или документации | ширина 1280-1600 | Сохраните прозрачность, чтобы изображение работало со светлой и темной темами GitHub |
| Материал для слайда или презентации | ширина 1920 | Экспортируйте в 2x, если изображение будут проецировать или масштабировать |
| Заголовок письма или hero-изображение | ширина 600-1200 | Сожмите результат и по возможности держите его меньше 200 KB |
Почему SVG может выглядеть иначе после экспорта
- Дробные размеры. Экспорт при 33.5 px вызывает субпиксельное округление. Используйте целые числа, лучше кратные 8.
- Отсутствующие шрифты. Если SVG ссылается на шрифт, недоступный в браузере, браузер заменит его, и кернинг может сместиться. Для самого надежного экспорта переводите текст в кривые.
- Внешние ссылки.
<image href="...">, указывающий на удаленный URL, может быть заблокирован или сделать canvas непригодным для экспорта. Встройте ресурс как base64 перед конвертацией. - Фильтры и тени. Размытие и drop-shadow считаются в пользовательских единицах, поэтому экспорт в 3x может смягчить тени. При необходимости настройте значения фильтров в исходном SVG.
- Нет явного размера. Если у SVG нет width, height или viewBox, инструмент использует 300 × 150 px перед применением коэффициента масштаба.
Быстрые советы
- Экспортируйте в 2x или 3x для экранов high-DPI, а затем уменьшайте PNG через CSS или макет.
- Сохраняйте прозрачность для иконок и логотипов; если месту назначения нужен сплошной цвет, сначала добавьте прямоугольник в SVG.
- Пропустите PNG через компрессор изображений, чтобы удалить метаданные и перепаковать палитру.
- Для очень больших иллюстраций уменьшайте коэффициент масштаба перед скачиванием, потому что PNG хранит каждый пиксель.
Часто задаваемые вопросы
Инструмент использует коэффициент масштаба. Сначала задайте width, height или viewBox в SVG, затем выберите масштаб, который даст нужный размер PNG.
Да, используется SVG-рендерер браузера. Для более стабильного результата встраивайте внешние изображения и переводите важный текст в кривые перед экспортом.
SVG - это инструкции рисования, а PNG - сетка пикселей. Экспорт 4000 × 4000 px хранит 16 миллионов пикселей с данными RGBA, поэтому снижение масштаба может резко уменьшить файл.
Нет. Файл или вставленная разметка читается и рендерится локально через HTML canvas в вашем браузере.
Сопутствующие инструменты
Палитра цветов Material Design
Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.
Конструктор тир-листов
Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.
Изменение размера изображений
Меняйте размер изображений до точных пиксельных размеров или процентов, сохраняя пропорции. Подходит для пакетной подготовки, без загрузки файлов.
WebP в JPG
Конвертируйте изображения WebP в JPG/JPEG прямо в браузере. Выберите качество, объедините прозрачность с цветом фона и скачайте без загрузки файлов на сервер.
Генератор надписей граффити
Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.
Создатель карточек рецептов
Создайте одну личную карточку рецепта для печати с ингредиентами, последовательными шагами и заметками. Выберите в браузере фиксированный макет 4 × 6 дюймов или A6.