ToolBox ProБлогEnglish

Конвертер SVG в PNG

Конвертируйте SVG в PNG прямо в браузере: задайте ширину и высоту, сохраните пропорции, возьмите 2× для retina. Скачивание PNG и копирование в буфер.

Всё работает в вашем браузере — данные не отправляются на сервер.

Зачем SVG превращают в PNG

Векторная графика масштабируется без потери качества, но принимают её не все программы: мессенджеры, почтовые редакторы, маркетплейсы и офисные документы ждут обычный растровый файл. Запрос «svg в png» возникает каждый раз, когда иконку или логотип нужно прикрепить к письму, вставить в презентацию, отправить в чат или загрузить туда, где разрешены только картинки. Конвертация решает одну задачу: превращает математическое описание формы в сетку пикселей, которую прочитает любая программа. Код SVG при этом остаётся под рукой — из него можно снова получить вектор, поменять цвет и отмасштабировать без потерь. Посмотреть, что внутри файла, и почистить его от лишнего помогает просмотрщик SVG, а ниже — прямая растеризация в PNG с выбором размера.

Что умеет конвертер

  • Вставка кода SVG и загрузка файла .svg перетаскиванием — два входа для одного результата
  • Ширина и высота в пикселях, режим «по ширине» или «по высоте» и чекбокс сохранения пропорций
  • Пресеты 1×, 2×, 3×, 4× и режим «оригинал»: SVG 512 × 512 при 2× даёт PNG 1024 × 1024
  • Очистка кода перед рендером: скрипты, обработчики on*, внешние ссылки и небезопасные стили вырезаются
  • Скачивание PNG, копирование картинки в буфер обмена и вес готового файла в килобайтах

Как конвертировать SVG в PNG

  1. Вставьте код SVG в поле или перетащите файл .svg в зону загрузки
  2. Проверьте исходный размер: атрибуты width и height, а при их отсутствии — viewBox
  3. Задайте ширину или высоту в пикселях, при необходимости включите сохранение пропорций и выберите множитель
  4. Нажмите «Конвертировать в PNG», затем скачайте файл или скопируйте картинку в буфер

Как устроена растеризация

Сначала код разбирается парсером XML и проходит чистку: удаляются элементы script и foreignObject, атрибуты с названиями on*, ссылки на внешние файлы и стили с подозрительным содержимым. Затем корню документа проставляются целевые width и height, а если в исходнике не было viewBox, он синтезируется из исходного размера — иначе содержимое при увеличении просто обрезалось бы. Готовый код уходит в blob-URL и загружается в тег img, где скрипты не выполняются. Дальше картинка рисуется на canvas нужного размера, а результат забирается через toDataURL и превращается в PNG. Ни одного запроса в сеть: а всё, что внутри SVG ссылалось на внешние файлы, вырезается ещё до рендера.

Типовые размеры SVG и результат в PNG

Исходный SVGМножительPNG на выходе и где применяется
16 × 161×16 × 16 — значок вкладки, минимальная иконка
32 × 322×64 × 64 — фавиконка на Retina-экране
48 × 482×96 × 96 — иконка приложения в доке macOS
180 × 1801×180 × 180 — apple-touch-icon для iOS
192 × 1921×192 × 192 — значок веб-приложения в манифесте
512 × 5121×512 × 512 — превью и шапка сайта, аватар в чате
512 × 5122×1024 × 1024 — логотип для Retina и печати
512 × 5124×2048 × 2048 — крупный баннер, слайд презентации
1000 × 10001×1000 × 1000 — превью карточки товара
1200 × 6301×1200 × 630 — картинка ссылки в мессенджере
1920 × 10801×1920 × 1080 — фон презентации или видеообложки
24 × 244×96 × 96 — мелкая иконочная картинка, увеличенная для экрана

Площадь растёт квадратично: PNG 2048 × 2048 в несколько раз тяжелее, чем 1024 × 1024, поэтому для аватаров и превью берите размер с небольшим запасом, а не в разы.

Где конвертация SVG в PNG встречается каждый день

Самый частый сценарий — логотип. Дизайнер отдаёт вектор, а разместить его нужно в презентации, в письме клиенту, в описании товара или в сообщении чата. Второй по частоте — иконка интерфейса: её просят прислать для тарифа, для подписи в CRM, для набора баннеров. Третий — превью ссылки: многие платформы показывают картинку из SVG, но при вставке в чат или письмо нужен обычный файл. Четвёртый — документы и таблицы, куда SVG вообще не вставляется, а картинка вставляется всегда.

Разбор примера: как подготовить иконку логотипа в PNG за пару шагов. Возьмите SVG-файл из ассетов проекта или из исходников на сайте и вставьте его код в поле конвертера. Посмотрите на строку с исходным размером: если она показывает 512 × 512, выберите пресет 2× — на выходе получится PNG 1024 × 1024, который одинаково чётко выглядит и на обычном мониторе, и на Retina. Нажмите «Конвертировать в PNG», скачайте файл и положите его рядом с исходником. Если в SVG не было атрибутов размера, конвертер подскажет размер по viewBox, и множитель посчитает вторую сторону по пропорциям — например, 24 × 24 превратятся в 48 × 48. Цвет заливки при этом остаётся в коде: его удобно подобрать заранее в пипетке цвета.

Отдельно стоит случай с графикой, которая пришла извне: чужой SVG может ссылаться на картинку или шрифт по внешней ссылке, и при рендере такая ссылка не загрузится — на её месте окажется пустое место. Конвертер такие ссылки вырезает заранее и показывает список того, что было удалено, поэтому результат можно проверить глазами до отправки. Если исходник нужно встроить в страницу как текст, а не как файл, помогает кодирование картинки в Base64.

  • Логотип и иконки для писем, презентаций и тарифов
  • Превью ссылки в мессенджерах и соцсетях
  • Картинки в документах, таблицах и отчётах
  • Аватары и обложки там, где SVG не принимают
  • Заготовки растровых версий под печать и полиграфию
  • Подготовка превью изображений перед загрузкой на хостинг

Частые ошибки при конвертации

Первая и самая частая ошибка — рассчитывать, что PNG останется таким же чётким при любом увеличении. Растр устроен иначе: он помнит ровно те пиксели, которые были записаны. Если планируется показ на большом экране или в печати, заранее делайте версию в 2×, а не пытайтесь растянуть готовую. Вторая ошибка — брать размер с большим запасом: файл тяжелее, загрузка медленнее, а выигрыша в качестве на экране обычно нет.

Третья ошибка — забыть про внешние ресурсы. Если в SVG лежит ссылка на картинку, шрифт или css-файл, при рендере ничего не подгрузится: страница не делает запросов в сеть. Иконка останется без заливки или превратится в системный шрифт. Такие ссылки стоит либо встроить в сам SVG, либо заранее привести файл к автономному виду. Четвёртая ошибка — не посмотреть на превью результата: конвертер показывает исходник и готовый PNG рядом, и разница сразу видна.

И наконец, ошибка, связанная с безопасностью: вставленный в страницу SVG может содержать скрипт или обработчик события. Здесь код предварительно чистится — вырезаются script, foreignObject, обработчики on*, ссылки javascript: и внешние ресурсы, — а сама картинка рисуется через тег img, где код не исполняется. Поэтому и внешние запросы не уходят, и страница остаётся в безопасности.

  • Растр нельзя качественно увеличить — только заранее делать запас
  • Слишком большой размер даёт тяжёлый файл без видимой пользы
  • Внешние шрифты и картинки внутри SVG не подгружаются при рендере
  • Текст на SVG может сменить шрифт, если шрифт не встроен в файл
  • Растянутый по высоте логотип — следствие отключённых пропорций
  • Скрипты и внешние ссылки из чужого SVG вырезаются автоматически

Как проходит конвертация по шагам

Первый этап — разбор. Код SVG читается парсером XML, и из корневого тега достаются три вещи: атрибуты width и height, атрибут viewBox и необязательный xmlns. Если width и height заданы в других единицах — в пунктах, миллиметрах или дюймах, — они пересчитываются в пиксели по стандартному соотношению 96 пикселей на дюйм. Если размеры не заданы вовсе, за основу берётся viewBox, а при его отсутствии подставляется 512 × 512.

Второй этап — чистка. Из кода убирают всё, что не должно попасть в браузер: элементы script и foreignObject, обработчики on*, ссылки javascript:, внешние ресурсы и подозрительные стили. Третий этап — подготовка к отрисовке: корню задаются целевые размеры, а при необходимости синтезируется viewBox, чтобы содержимое масштабировалось, а не обрезалось. Четвёртый этап — сам рендер в canvas, и пятый — получение PNG и, по желанию, копирование картинки в буфер обмена.

Этапы растеризации

ЭтапЧто происходитНа что обратить внимание
1Разбор кодаXML-парсер читает корневой тег
2Определение размераЧитаются width, height и viewBox
3Подстановка размераНет width и height — берётся viewBox
4ЧисткаУдаляются script, on*, внешние ссылки
5ПодготовкаСтавятся width, height, при необходимости viewBox
6РендерКартинка рисуется на canvas нужного размера
7КодированиеCanvas отдаёт PNG в виде data URL
8ВыдачаСкачивание файла или копирование в буфер

Все шаги выполняются в браузере: исходный код никуда не отправляется, а готовый PNG собирается на устройстве пользователя.

SVG, PNG и другие форматы: что выбрать под задачу

Выбор формата почти всегда сводится к одному вопросу: где будет жить картинка. На сайте, в приложении, в документе, который переживёт смену дизайна, — нужен SVG: он не зависит от экрана, весит мало и остаётся чётким на любом расстоянии. В переписке, в письме, в карточке товара, в превью — нужен PNG: его примет любая программа, и вид он будет одинаковым везде. Для фотографий и сложных полотен вопрос не стоит: там нужен JPEG или WebP, потому что PNG в фотографии неэкономно расходует место.

Отдельная строка — WebP и AVIF: они сжимают лучше PNG при том же качестве и поддерживаются всеми современными браузерами, но не всеми редакторами и не всеми мессенджерами. Если картинка уходит в неизвестное окружение, PNG остаётся самым совместимым выбором. Проверить, как кадр будет выглядеть на нужном размере, можно на картинке-заглушке. Подробности про размеры и соотношения сторон есть в материале о соотношении сторон экранов, а пережать уже готовую картинку помогает изменение размера изображения.

  • Логотип и иконка на сайте — SVG, он не теряет качество
  • Иконка в интерфейсе под Retina — PNG в 2×, например 48 × 48 из 24 × 24
  • Фотография — JPEG или WebP, растр здесь единственно уместен
  • Скриншот или схема с текстом — PNG, он держит чёткие края
  • Превью ссылки — PNG 1200 × 630, такой размер понимают все площадки
  • Готовую картинку обрезать и подгонять удобнее отдельным инструментом — обрезкой изображения

Частые вопросы

Чем SVG отличается от PNG

SVG описывает форму формулами: координаты точек, радиусы, повороты, правила заливки. Размер у такого файла не задан жёстко, поэтому один и тот же код можно нарисовать хоть в 16, хоть в 4096 пикселей без потери качества. PNG хранит готовую сетку пикселей, и она остаётся такой, какой была создана: увеличить её можно только с размытием. Отсюда разница в применении — SVG удобен для логотипов, иконок и схем на сайте, PNG — для фотографий, скриншотов и всего, что должно выглядеть одинаково в любом редакторе. Прозрачность поддерживают оба формата, но у PNG она ограничена одним уровнем альфа-канала без полупрозрачных слоёв.

Зачем вообще растрировать вектор

Причин несколько, и они разные. Ограничения формата: загрузчик аватара, редактор письма или поле вложения в документах могут принимать только JPEG и PNG. Требования площадки: часть рекламных кабинетов и социальных сетей не показывает SVG вообще. Рабочие сценарии: печать, выгрузка в презентацию, отправка в чат, где картинка должна быть обычным файлом. Отдельный случай — предсказуемость: PNG открывается везде одинаково, а SVG может отрисоваться по-разному в разных программах, особенно со шрифтами. Обратный переход не симметричен: PNG в SVG превращается только приблизительной обводкой, а вот вектор в PNG пересчитывается точно.

Как выбрать размер PNG

Отталкивайтесь от того, на каком размере картинка будет смотреться, и умножьте его на плотность пикселей экрана. Обычный монитор — это 1×, Retina и многие телефоны — 2×, отдельные флагманские модели дают 3×. Практическое правило: иконка 24 × 24 в интерфейсе превращается в 48 × 48 для Retina, логотип 512 × 512 стоит отдавать в 1024 × 1024. Если исходник задаёт только одну сторону, вторую лучше посчитать через калькулятор пропорций, чтобы картинка не растянулась. Не перебарщивайте с размером: площадь растёт квадратично, и PNG 2048 × 2048 весит в несколько раз больше, чем 1024 × 1024, а разница на экране часто не видна. Проверить заранее, что картинка помещается в нужный кадр, проще всего на картинке-заглушке нужного размера.

Теряется ли качество при конвертации

В точке, в которую вы отрисовали, качество не теряется: SVG считается сразу в нужном разрешении, поэтому края линий остаются чёткими, а не мыльными. Растеризация — это не сжатие, а вычисление, и на экране результат выглядит так же, как оригинальный вектор. Ограничение возникает в другом месте: готовый PNG нельзя увеличить без потерь, потому что пиксели уже записаны. Если картинку придётся показывать в большом размере, разумнее оставить SVG или сделать растровую версию с запасом — в два раза по каждой стороне. Отдельная тонкость: текст внутри SVG, использующий внешний шрифт, при рендере может превратиться в системный шрифт, потому что внешние ресурсы не загружаются.

Нужен ли PNG для социальных сетей

Почти всегда да. Площадки принимают картинки в растровых форматах, а часть из них пережимает картинку сама и переписывает в JPEG. PNG для аватаров, обложек и карточек товаров — самый предсказуемый выбор: он сохраняет резкие края логотипа и прозрачность, чего JPEG не умеет. Если SVG площадка принимает, стоит всё равно держать PNG под рукой — для превью ссылки, для загрузки в личный кабинет и для вставки в сообщение. Берите размер чуть больше нужного, а не в разы: площадка всё равно приведёт картинку к своим размерам, а лишние мегабайты только замедлят загрузку.

Насколько безопасно вставлять чужой SVG

Специально для этого код проходит чистку перед рендером. Удаляются элементы script и foreignObject, все атрибуты, начинающиеся с on, ссылки вида javascript:, внешние ресурсы по http и style с опасными конструкциями. Плюс сам рендер идёт через тег img с blob-URL, где скрипты не выполняются в принципе, а страница не получает никаких внешних запросов. Но и расслабляться не стоит: конвертер показывает картинку, а не исполняет код, и перед публикацией результата стоит взглянуть на превью. Если в SVG был посторонний код, вы увидите это в списке того, что было удалено.

Что будет, если в SVG нет width и height

Конвертер посчитает размер по viewBox — это и есть главный признак того, что файл масштабируемый. Если viewBox тоже нет, подставляется 512 × 512, и в поле появляется предупреждение, что исходный размер был предложен, а не взят из файла. Дальше всё работает как обычно: предложенный размер становится базой, а множитель 2× превращает 24 × 24 в 48 × 48. Кстати, именно так работает большинство иконок из библиотек: у них часто есть только viewBox, а размер задаётся при вставке на страницу.

Можно ли сделать PNG обратно в SVG

Это уже другая задача — трассировка. Она восстанавливает контуры приблизительно, теряя исходные кривые, цвета и структуру, и результат получается заметно тяжелее оригинала. Поэтому хранить SVG нужно отдельно: он занимает меньше места, не зависит от разрешения и остаётся редактируемым. Если исходник потерялся, из PNG можно получить только приближённую реконструкцию. Для растровых картинок, которые рисуют попиксельно, есть отдельный класс инструментов, и их задача другая.

Похожие инструменты

Конвертер WebP в JPG

Конвертируйте WebP в JPG, PNG или WebP прямо в браузере: качество на ползунке, заливка прозрачности, сравнение до и после. Файл никуда не отправляется.

Удаление EXIF из фото

Посмотрите, что лежит в метаданных JPEG или PNG, и скачайте копию файла без EXIF, GPS и других блоков

Выбор цвета и конвертер

Выбирайте цвета и конвертируйте между форматами HEX, RGB, HSL и HSV

Конвертер HEX в RGB

Конвертируйте HEX-коды цветов в значения RGB и RGBA

Конвертер RGB в HEX

Конвертируйте значения RGB в HEX-коды

Генератор цветовых палитр

Создавайте цветовые палитры из базового цвета — комплементарные, аналоговые, триадные и другие

Проверка контрастности WCAG

Проверяйте коэффициенты контрастности цветов на соответствие WCAG AA и AAA

Генератор хеш-цвета

Генерируйте согласованные, детерминированные цвета из любой текстовой строки

← На главную