SVG в PNG

SVG в PNG

PNG подходит, когда SVG нужно отдать как растровое изображение: скриншоты для магазинов приложений, баннеры README, OG-изображения, UI-макеты или графика для e-mail. Этот конвертер рендерит SVG в вашем браузере, применяет выбранный коэффициент масштаба и сохраняет альфа-канал, поэтому прозрачные иконки и круглые аватары не получают белый прямоугольник.

Как экспортировать SVG в PNG

  1. 1

    Загрузите SVG

    Загрузите файл или вставьте SVG-разметку напрямую. Inline CSS и блоки <style> рендерятся браузером.

  2. 2

    Задайте масштаб

    Выберите коэффициент масштаба от 1x до 10x. Итоговый размер берется из width, height или viewBox SVG до масштабирования.

  3. 3

    Проверьте прозрачный предпросмотр

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

  4. 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.