SVG

Исходный формат

WEBP

WebP

Целевой формат

Конвертировать SVG в WebP

Растеризуйте SVG в современный WebP с альфа-каналом и выбором DPI 72/150/300/600. Включите lossless для иконок и UI-макетов без артефактов.

Перетащите SVG файлы сюда

или выберите файлы для растеризации в WebP

DPI 72/150/300/600

Кнопки пресетов для веба, Retina, печати и крупных постеров

Alpha сохраняется

Прозрачность SVG переносится в WebP RGBA — никакого сведения на белый

Lossless и санитизация

Опция lossless для иконок, теги script вырезаются перед рендером

О форматах

SVG-векторный исходник + WebP — самый компактный современный растровый формат

SVG

SVG формат

Scalable Vector Graphics

SVG описывает фигуры формулами, поэтому масштабируется без потерь. Но для веба часто нужен растровый файл с alpha — например, иконка для динамического состава или превью UI-кита. Тут и пригождается WebP.

Тип Вектор

Прозрачность Да

Скрипты Возможны

Размер вывода viewBox × DPI / 72

WEBP

WebP формат

Web Picture (Google)

WebP — лидер по компактности среди веб-форматов. В режиме lossless обходит PNG, в lossy — JPEG, при этом полноценно поддерживает альфа-канал. Идеален для иконок, скриншотов и UI-макетов, где важна прозрачность.

Сжатие Lossy / Lossless

Альфа-канал Да

Глубина 8 бит RGBA

Поддержка браузерами ~98%

Сравнение форматов

SVG как исходник, WebP как готовый веб-актив

Характеристика SVG WebP

Масштабирование без потерь

Альфа-канал

Готов как веб-актив

Lossless сжатие

Lossy сжатие

Возможны скрипты

Подходит для CDN

Как работает конвертация

От векторного SVG к компактному WebP с alpha

Загрузите SVG

Перетащите файлы в зону. Перед рендером SVG санитизируется: вырезаются script и обработчики on*.

Lossless для иконок и UI

Выберите DPI (72/150/300/600) и при необходимости включите lossless WebP — для иконок, скриншотов и макетов с резкими краями.

Скачайте WebP

Готовый WebP с alpha можно вставлять в picture/source. Размер на порядок меньше эквивалентного PNG.

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

Lossless, альфа, безопасность скриптов

Lossless обязателен для иконок, скриншотов и любых SVG с резкими цветовыми переходами и текстом. Lossy WebP в таких случаях даёт характерные «мутные» края. Для иллюстраций с градиентами и фотореалистичных SVG lossy WebP практически не отличить от оригинала, при этом он в 3-5 раз компактнее lossless.

У SVG нет собственного количества пикселей — есть только viewBox в условных единицах. Чтобы превратить вектор в растровый WebP, нужно решить, сколько пикселей займёт картинка. Конвертер берёт ширину viewBox и умножает на (DPI / 72): SVG 100×100 даст WebP 100×100 при 72 DPI и WebP 417×417 при 300 DPI.

Да. Перед передачей в cairosvg мы прогоняем SVG через регэксп-санитизер: все теги script удаляются, обработчики событий on* (onload, onclick, onerror) тоже вырезаются. Это защищает наш сервер и гарантирует, что в WebP попадёт только графика — никакого скрытого выполнения JavaScript.

WebP полностью поддерживает альфа-канал, поэтому прозрачные участки SVG переносятся в WebP без сведения на фон. Для иконок и UI-элементов это критично — они должны корректно лежать поверх любого цвета подложки. Если прозрачность не нужна, можно отключить опцию alpha и получить непрозрачный WebP меньшего размера.

cairosvg рисует текст системными шрифтами сервера. Если в SVG указан шрифт, которого у нас нет, он подменится резервным. Для надёжного результата встройте шрифт в SVG как @font-face data-URI или превратите текст в кривые в Inkscape (Object → Path) или Illustrator (Type → Create Outlines) перед загрузкой.

Растеризуйте SVG в WebP

Alpha сохраняется, есть lossless для иконок, скрипты вырезаются

Начать конвертацию