Конвертируйте SVG в PNG для преобразования бесконечно масштабируемой векторной графики в растровые изображения с фиксированным разрешением. Файлы SVG идеальны для адаптивного веб-дизайна, тогда как PNG обеспечивает универсальную совместимость с почтовыми клиентами, устаревшим ПО и рабочими процессами печати, которые не поддерживают векторные форматы.
Что вы получите: детали PNG-результата
При конвертации SVG в PNG вы получаете растровое изображение того размера, что задан в SVG, — ширины и высоты или viewBox, — либо той ширины, что вы ввели в поле «Ширина результата» (высота подбирается по пропорциям), со всей прозрачностью. Конвертация фиксирует графику в пиксельных размерах: PNG 1000×1000 пикселей остаётся чётким в этом размере, но пикселизуется при увеличении. Прозрачность переходит в альфа-канал PNG, поэтому формат идеален для логотипов и значков, которые должны работать на любом фоне.
Главный компромисс: вы получаете универсальную совместимость, но теряете бесконечную масштабируемость SVG. Перед конвертацией задайте в SVG ширину и высоту под конечное использование — вернуться к векторному качеству потом не получится.
Зачем конвертировать SVG в формат PNG
Главная причина конвертации SVG в PNG — это совместимость. Многие почтовые клиенты удаляют SVG-файлы из соображений безопасности. Outlook, Gmail и Apple Mail надёжно отображают PNG, но нередко полностью блокируют или удаляют SVG-вложения. При отправке логотипа через email-рассылку PNG гарантирует, что он действительно отобразится.
Устаревшее ПО создаёт аналогичные проблемы. Более старые версии PowerPoint (до 2016), Photoshop (CS6 и ранее) и многие инструменты печатного производства испытывают трудности с импортом SVG. Конвертация в PNG в требуемом разрешении (как правило, 300 DPI для печати) создаёт файлы, которые эти инструменты обрабатывают нативно.
Рабочие процессы печати требуют растровых форматов в определённых разрешениях. Большинство коммерческих типографий ожидают TIFF или PNG при 300 DPI. Печать 4×6 дюймов требует 1200×1800 пикселей при 300 DPI — конвертация SVG в PNG в точных размерах обеспечивает предсказуемые результаты.
Некоторые платформы имеют непредсказуемый рендеринг SVG. Facebook и LinkedIn поддерживают загрузку SVG, но иногда неправильно отображают фильтры или встроенные шрифты. Конвертация в PNG гарантирует, что ваша графика выглядит одинаково на всех платформах.
Разрешение и DPI: правильный выбор
- Для веба (72-96 DPI): Стандартные веб-дисплеи используют 72-96 DPI. Для заголовка сайта 1920×1080px покрывает Full HD-экраны. Для логотипов 800×800px или 1000×1000px подходит для большинства макетов. Экспортируйте в фактическом размере отображения, если не планируете High-DPI-экраны.
- Retina/High-DPI-дисплеи (2×-3×): Современные смартфоны и MacBook используют плотность пикселей 2× или 3×. Иконка размером 500px требует PNG 1000px (2×) или 1500px (3×), чтобы оставаться чёткой. Всегда экспортируйте в 2× от предполагаемого размера отображения для веб-графики на экранах высокого разрешения.
- Печать (300 DPI): Профессиональная печать требует 300 DPI. Рассчитайте пиксели: ширина_дюймов × 300 и высота_дюймов × 300. Логотип 5×5 дюймов требует 1500×1500px. Любое разрешение ниже 300 DPI выглядит размытым при печати.
- Социальные сети: Каждая платформа имеет свои требования. Open Graph изображения Facebook/Twitter: 1200×630px. Посты Instagram: 1080×1080px. Баннеры LinkedIn: 1584×396px. Проверяйте документацию платформы для точных размеров.
Понимание ограничений
- Потеря масштабируемости: SVG-файлы масштабируются бесконечно без потери качества, потому что хранят математические описания фигур. PNG фиксирует вас в определённых пиксельных размерах. Если вы конвертировали в 800×800px и позже нужно 2000×2000px — придётся повторно конвертировать из исходного SVG.
- Взрывной рост размера файла при высоких разрешениях: SVG-логотип в 5 КБ может стать 50 КБ в PNG при 800×800px или 500 КБ при 3000×3000px. PNG хранит каждый пиксель, поэтому размер файла растёт квадратично с размерами.
- Нет простого редактирования: SVG позволяет изменять отдельные фигуры, цвета и пути в векторном редакторе. После конвертации в PNG вы работаете с пикселями. Сохраняйте исходные SVG-файлы для будущих правок.
Когда оставлять SVG вместо конвертации
Не конвертируйте в PNG, если используете графику на современном сайте, где у всех посетителей актуальные браузеры. SVG меньше для простой графики, идеально масштабируется на любые размеры экрана и загружается быстрее, чем несколько вариантов PNG (1×, 2×, 3×).
Для адаптивного дизайна SVG блестяще подходит, потому что адаптируется к любому размеру без дополнительных HTTP-запросов. Один SVG в 5 КБ отлично работает от мобильных иконок 50px до десктопных заголовков 2000px.
Если ваш SVG содержит анимации или интерактивные элементы (эффекты наведения, кликабельные области), PNG не сможет воспроизвести эту функциональность. SVG поддерживает CSS-анимации и JavaScript-интерактивность, которые полностью исчезают при растеризации в PNG.
Рассмотрите эти альтернативы
Если вам нужна более широкая совместимость, чем у SVG, но лучшее сжатие, чем у PNG, попробуйте конвертировать SVG в WebP. WebP поддерживает прозрачность, как PNG, но даёт гораздо меньшие файлы: в нашем тесте логотип 1024×1024, растеризованный из SVG, занимал 21 КБ в PNG и 7 КБ в WebP. Работает во всех современных браузерах (Chrome, Firefox, Edge, Safari 14+).
Для современного веба оставляйте SVG. Это рекомендуемый формат для логотипов, иконок и графики в 2026 году. Конвертируйте в PNG только когда проблемы совместимости вынуждают это сделать — почтовые клиенты, устаревшее ПО или платформы со сломанным рендерингом SVG.
Нужна обратная конвертация? PNG в SVG использует трассировку изображения для преобразования растровых изображений в векторы. Учтите, что трассированные векторы никогда не будут такими же чистыми, как нативная SVG-графика.
Советы для лучших результатов
- Подбирайте размер под конечное использование: не задавайте в SVG 5000×5000 пикселей, если на сайте изображение показывается в 500×500. Слишком большие PNG расходуют трафик и замедляют загрузку страниц.
- Экспортируйте в 2× для retina: Если ваша графика отображается шириной 600px на сайте, экспортируйте шириной 1200px для чёткости на High-DPI-дисплеях вроде MacBook и современных смартфонов.
- Проверяйте прозрачность: Если ваш SVG содержит прозрачность, убедитесь, что она корректно определена (не белые заливки). Просматривайте PNG после конвертации на светлом и тёмном фоне.
- Аккуратно обращайтесь со шрифтами: Если ваш SVG содержит текст, растеризация фиксирует текущий рендеринг шрифтов. Для гарантированной согласованности конвертируйте текст в контуры в векторном редакторе перед конвертацией.
- Используйте пакетную конвертацию для наборов иконок: Если конвертируете 50 иконок, обрабатывайте их все сразу с одинаковыми настройками, а не по одной.
Типичные проблемы и решения
- Выбрано неверное разрешение: Наиболее частая ошибка — экспорт в неправильном размере. При сомнениях выбирайте чуть больший размер — проще уменьшить, чем увеличивать пикселизированные изображения. Для веба 2× от предполагаемого размера отображения — безопасный выбор.
- Слишком большой размер файла: Если PNG превышает 1 МБ, вы, вероятно, экспортировали в избыточном разрешении. Логотип 1000×1000px не должен превышать 200-300 КБ. Уменьшите выходные размеры или воспользуйтесь инструментами сжатия PNG.
- Размытый результат: Если PNG выглядит нечётким, ваш SVG может содержать растровые элементы (встроенные JPG или PNG), которые плохо масштабируются. Настоящий векторный SVG конвертируется в чёткий PNG в любом разрешении.
- Прозрачность утрачена: Если прозрачные области стали белыми, ваш SVG скорее всего использует белые заливки вместо настоящей прозрачности. Откройте в векторном редакторе (Inkscape, Illustrator) и удалите белые фоновые заливки.
Как конвертировать SVG в PNG
- Загрузите SVG-файлы: Выберите один или несколько SVG-файлов с помощью формы выше. Поддерживается пакетная конвертация для одновременной обработки наборов иконок или вариаций логотипа.
- Задайте размер: PNG отрисовывается в собственных ширине и высоте SVG, поэтому сначала задайте их под задачу. Для веба при размере показа 500 пикселей ставьте 1000 для чёткости на ретине. Для печати считайте пиксели как дюймы × 300.
- Конвертируйте и скачайте: Конвертация растеризует ваш SVG в указанном разрешении, сохраняя цвета, формы и прозрачность. Скачайте отдельные PNG-файлы или ZIP-архив для пакетных конвертаций.
Типичные случаи использования для конвертации SVG в PNG
- Email-рассылки и подписи: Большинство почтовых клиентов (Outlook, Gmail, Apple Mail) блокируют или удаляют SVG-файлы из соображений безопасности. PNG гарантирует надёжное отображение вашего логотипа или графики в почтовых контекстах.
- Совместимость с устаревшим ПО: Более старые версии PowerPoint, Photoshop и InDesign имеют ограниченную или неработающую поддержку SVG. PNG импортируется универсально во всё дизайнерское и презентационное ПО.
- Передача в печатное производство: Коммерческие типографии ожидают растровые форматы при 300 DPI. Конвертация SVG в PNG в точных размерах для печати (рассчитанных из дюймов × 300) обеспечивает предсказуемые результаты.
- Платформы социальных сетей: Хотя большинство платформ принимают SVG, рендеринг может быть непоследовательным. PNG гарантирует одинаковый вид на всех платформах.
- Мобильные и десктопные приложения: Многие фреймворки ожидают PNG-ресурсы в нескольких разрешениях (1×, 2×, 3×) для иконок и элементов UI. Конвертируйте SVG в каждом необходимом разрешении.
SVG против PNG: сравнение форматов
- Масштабируемость: SVG масштабируется бесконечно без потери качества. PNG имеет фиксированное разрешение и пикселизируется при увеличении сверх исходных размеров.
- Размер файла: SVG меньше для простой графики (логотипы, иконки). Размер PNG-файла растёт с разрешением — PNG 3000×3000px может быть во много раз больше эквивалентного SVG.
- Совместимость: PNG работает универсально во всём ПО, браузерах и устройствах. SVG отлично поддерживается в современных браузерах, но не работает в почтовых клиентах и устаревшем ПО.
- Редактируемость: SVG позволяет легко изменять фигуры, цвета и пути в векторных редакторах. PNG требует редактирования на уровне пикселей в растровых редакторах вроде Photoshop.
- Прозрачность: Оба формата полностью поддерживают прозрачность альфа-канала. Конвертация идеально сохраняет прозрачные фоны.
- Веб-производительность: Для простой графики SVG быстрее (меньший файл). Для сложной графики с большим количеством градиентов PNG может рендериться быстрее в браузерах.
Связанные инструменты конвертации изображений
- SVG в WebP — современный формат с лучшим сжатием, чем PNG
- PNG в SVG — трассировать растровые изображения для создания векторной графики
- SVG в JPG — конвертировать в JPG для фотографий или когда прозрачность не нужна
- Все инструменты конвертации изображений — изучить все конвертации форматов изображений
Конвертация SVG в PNG сохраняет чёткость графики в размере, заданном в SVG, с полной поддержкой прозрачности.