SVG в WebP v1.0

Конвертер SVG в WebP растеризует векторную графику в современный веб-формат, сохраняя прозрачность и позволяя вам самим задать размер в пикселях. У векторного файла нет собственного разрешения, поэтому при переводе в растр размер выбирается вручную: 4096, 2048 или 1200 пикселей по длинной стороне. Тестовый рендер 2048×2048 весит 77 984 байта и сохраняет 1 675 052 прозрачных пикселя. Инструмент работает прямо в браузере и входит в общий конвертер изображений от DocPivot.

Обзор конвертера SVG в WebP

Основная функциональность

Конвертер принимает SVG-файл, отрисовывает его на canvas в выбранном разрешении и кодирует результат в WebP с сохранением альфа-канала. Растеризация выполняется заново для каждого размера: при выборе 4096 пикселей движок повторно проходит по контурам вектора, а не растягивает готовую картинку меньшего разрешения. За кодирование отвечает библиотека libwebp, скомпилированная в WebAssembly, с качеством 95 и режимом sharp YUV. Если нужен формат без потерь, для той же исходной графики подойдёт конвертация SVG в PNG.

Кому подходит

Инструмент рассчитан на веб-разработчиков, дизайнеров интерфейсов и владельцев сайтов, которым нужен лёгкий растровый вариант логотипа или иконки. Типичные сценарии: подготовка графики для страниц на 1С-Битрикс и WordPress, где загрузка SVG заблокирована политикой безопасности, экспорт иконок из Figma под конкретные размеры, замена тяжёлых PNG в шаблонах ради баллов PageSpeed Insights.

Проблема и решение

Основная проблема при переводе вектора в растр состоит в том, что большинство сервисов решают вопрос размера за вас. Они отдают файл в размере, объявленном внутри SVG, или в единственном фиксированном разрешении, из-за чего иконка на 64 пикселя так и остаётся иконкой на 64 пикселя. Здесь размер задаётся явно, и результат на 4096 пикселях выходит таким же чётким, как на 1200, потому что рисуется он от геометрии, а не от увеличенного растра.

Основные преимущества

• Чёткость на любом размере. Каждый вариант разрешения получается отдельным проходом растеризатора по контурам, поэтому края и мелкие детали не размываются даже на максимальном значении.
• Прозрачность сохраняется полностью. WebP поддерживает настоящий альфа-канал, и фон не подменяется белым: на тестовом рендере 2048 пикселей уцелело 1 675 052 прозрачных пикселя.
• Небольшой вес результата. Квадрат 2048×2048 укладывается в 77 984 байта, что сопоставимо с обычной иконкой в PNG меньшего разрешения. Дополнительно уменьшить готовый файл поможет сжатие изображений.
• Работа без загрузки на сервер. Файл не покидает вкладку браузера, что важно для неопубликованного фирменного стиля и макетов под NDA.
• Пакетная обработка до 30 файлов. Целый набор иконок конвертируется за один заход и скачивается архивом ZIP.
• Апскейл, недоступный растровым конвертерам. Иконка размером 64 пикселя превращается в полноценный ассет на 4096 пикселей, потому что источник описан математически, а не пикселями.
• Отсутствие суточных лимитов. Ни регистрации, ни очереди, ни ограничения на число конверсий в день.
• Готовые размеры под фавиконки и иконки. Вариант на 1200 пикселей удобно использовать как мастер-файл, из которого затем собирается набор через генератор фавиконок.

Ключевые функции

• Три пресета разрешения. 4096, 2048 (по умолчанию) и 1200 пикселей по длинной стороне, каждый из которых рассчитывается независимо.
• Сохранение пропорций. Ограничивается длинная сторона, соотношение исходного viewBox не искажается.
• Альфа-канал без флаттенинга. Настройки фона в интерфейсе нет намеренно: подставлять цвет под прозрачные области незачем.
• Кодирование с sharp YUV. Режим бережнее обрабатывает резкие границы между цветами, а векторная графика состоит из таких границ почти целиком.
• Отрисовка текста системными шрифтами. Надписи внутри SVG рендерятся теми шрифтами, которые доступны вашему браузеру.
• Игнорирование скриптов. JavaScript внутри SVG не исполняется, анимация фиксируется одним статичным кадром.
• Показ фактических размеров. На карточке результата выводятся точные пиксельные габариты полученного файла.
• Выгрузка архивом. Один файл скачивается под своим именем, несколько собираются в ZIP.
• Точная подгонка габаритов. Если требуется нестандартное разрешение, готовый WebP дорабатывается через изменение размера изображений.
• Кадрирование лишних полей. Пустые отступы вокруг рисунка убираются с помощью обрезки изображения.
• Совместимость с растровым конвейером. Для уже растровых исходников используется отдельный маршрут: перевод PNG в WebP.
• Работа офлайн после загрузки страницы. Кодировщик выполняется локально, стабильное соединение нужно только для открытия инструмента.

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

Весь конвейер DocPivot состоит из пяти шагов и целиком выполняется на вашем устройстве.

1. Загрузка вектора. SVG подставляется в элемент img: метод createImageBitmap отказывается принимать SVG в Chrome и Firefox, поэтому рабочим остаётся именно этот путь.
2. Выбор разрешения. Вы указываете один из трёх размеров, и canvas создаётся под него до отрисовки.
3. Растеризация. Контуры отрисовываются в canvas выбранного размера, каждый раз с нуля.
4. Кодирование. libwebp собирает WebP с качеством 95, sharp YUV и полным альфа-каналом.
5. Выгрузка. Готовый файл скачивается сразу, пакет из нескольких файлов упаковывается в ZIP.

Если целевая площадка не принимает WebP, тот же исходник проходит через преобразование SVG в JPG с теми же настройками размера.

Когда использовать этот формат

WebP из вектора имеет смысл, когда графика идёт на веб-страницу и вес файла влияет на скорость загрузки. В остальных случаях чаще выигрывает либо исходный SVG, либо PNG.

• Карточки товаров и баннеры. Иллюстрации в каталоге интернет-магазина занимают меньше места и быстрее отдаются посетителю.
• Обход запрета на SVG в CMS. WordPress и 1С-Битрикс по умолчанию блокируют загрузку SVG из-за риска XSS, а растровый WebP проходит без правки настроек.
• Метрики Core Web Vitals. Замена тяжёлых PNG снижает объём страницы и убирает замечание про современные форматы изображений.
• Открытая графика для соцсетей. Оформление сообществ ВКонтакте и каналов Telegram, где вектор не поддерживается.
• Email-рассылки и лендинги. Логотип нужен растром, но с прозрачным фоном под разные цвета подложки.
• Экспорт из Figma под фиксированный размер. Дизайнер отдаёт SVG, а вёрстке требуется конкретное разрешение.
• Мобильный трафик. Экономия на каждом изображении заметна при медленном соединении.

Не стоит переводить в WebP графику для печати и макеты, которые ещё будут редактироваться: растр обратно в кривые не превращается. Для растровых исходников из фотоаппарата или скриншотов подойдёт конвертация JPG в WebP.

Примеры использования

Интернет-магазин на 1С-Битрикс

Каталог использует одинаковые векторные пиктограммы категорий, но админка не принимает SVG. Разработчик конвертирует 24 иконки пакетом в WebP на 1200 пикселей, получает ZIP и загружает файлы штатным способом. Прозрачность остаётся, значит пиктограммы одинаково смотрятся на светлой и тёмной теме.

Фирменный стиль для подрядчика

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

Документация и презентации

Технические схемы из Inkscape вставляются в Word и PowerPoint, которые старых версий вектор не понимают. Рендер на 2048 пикселей даёт достаточную детализацию для проектора. Если схема нужна отдельным документом, применяется перевод SVG в PDF.

Апскейл иконки из библиотеки

Пиктограмма из набора Material Icons объявлена в 24 пикселя, а нужна как крупный элемент промо-страницы. Растеризация на 4096 пикселей даёт чистый результат, потому что рисунок пересчитывается от контуров, а не увеличивается из миниатюры.

Почему размер растеризации важнее качества сжатия

При переводе вектора в растр разрешение определяет судьбу файла сильнее, чем настройки компрессии. Вектор не содержит пикселей: атрибуты width и height внутри SVG задают только рекомендуемый размер отрисовки, и многие конвертеры принимают его буквально. В результате иконка, объявленная в 24 или 64 пикселя, выходит крошечной картинкой, которую потом растягивают в вёрстке с потерей чёткости. Правильный порядок действий обратный: сначала определите, в каком максимальном размере графика появится на экране с учётом ретина-дисплеев, и растеризуйте под это значение сразу.

Второй практический момент касается памяти. Квадратный холст 4096×4096 занимает около 67 МБ ещё до сжатия, поэтому на слабом ноутбуке или телефоне пакет из десятков крупных файлов лучше разбивать на части.

SVG, WebP и российские CMS

В российских проектах перевод вектора в растр чаще всего вызван ограничениями платформы, а не эстетикой. WordPress и 1С-Битрикс не разрешают загрузку SVG штатно: файл формата XML может содержать теги script, что открывает дорогу XSS-атакам. Обход через плагины и фильтры upload_mimes требует правок кода и создаёт зону риска, тогда как WebP является обычным растровым файлом и загружается без исключений в политике безопасности.

Есть и вторая ловушка. Серверная конвертация в WebP на Битрикс опирается на библиотеку GD, а корректная поддержка альфа-канала появилась только в версии GD 2.2.5. На хостингах со старой сборкой прозрачность молча заменяется чёрным или белым фоном, и обнаруживается это уже на боевом сайте. Локальная растеризация в браузере от этого не зависит. Если часть аудитории приходит из браузеров без поддержки WebP, для запасного варианта в nginx пригодится конвертация WebP в JPG.

Ограничения, о которых стоит знать

• Шрифты берутся из системы. Если SVG ссылается на гарнитуру, которой нет в вашем браузере, текст отрисуется подстановочным шрифтом. Переведите надписи в кривые заранее, когда типографика принципиальна.
• Внешние ресурсы не подгружаются. Картинки и таблицы стилей, указанные по URL, при растеризации игнорируются.
• Результат не масштабируется дальше. Полученный WebP является растром, увеличить его без потерь уже нельзя.
• Сжатие с потерями. Качество 95 близко к оригиналу, но вектор был безупречным источником, и это первый шаг с потерями. Для критичных случаев используйте PNG.
• Анимация теряется. SMIL-анимация и скрипты внутри SVG превращаются в один статичный кадр.
• Поддержка WebP не универсальна. Совсем старые браузеры и часть почтовых клиентов формат не открывают. Похожая ситуация с более новым AVIF, куда ведёт отдельный маршрут преобразования AVIF в WebP.

Обработка данных и требования 152-ФЗ

Конвертация выполняется целиком на стороне клиента: файлы не отправляются на сервер, не попадают в очередь обработки и не сохраняются во временных хранилищах. Для компаний это архитектурное свойство, а не обещание в политике конфиденциальности. Если изображение содержит персональные данные, например скан документа или схему с фамилиями сотрудников, вопрос трансграничной передачи по статье 12 закона 152-ФЗ просто не возникает: данные никуда не передаются. При работе с зарубежными онлайн-конвертерами тот же файл покидает периметр организации, тогда как DocPivot не запрашивает ни ключей доступа, ни учётной записи.

Часто задаваемые вопросы