Как просматривать, перекрашивать и оптимизировать код SVG онлайн

Когда вы генерируете <svg>-иконку через Claude или ChatGPT либо скачиваете вектор из SVGRepo и Figma, по сырому XML-коду трудно оценить итоговый вид и контрастность. Браузерный инструмент позволяет мгновенно проверить графику, поменять палитру, сжать код и экспортировать растровую копию.

Предпросмотр на прозрачной сетке, светлом и тёмном фоне

Вставьте код или перетащите файл .svg в Просмотр и оптимизацию SVG. Холст автоматически определяет размеры из атрибута viewBox, даже если в теге <svg> не указаны width и height, и позволяет переключаться между сеткой, светлым и тёмным фоном.

Живая замена цветов при движении курсора

Вместо ручного поиска HEX-кодов по десяткам тегов <path>:

1. Обратите внимание на панель Найденные цвета под областью предпросмотра в Просмотре и оптимизации SVG.
2. Нажмите на нужный образец цвета и перемещайте курсор в палитре — заливка и обводка будут меняться в реальном времени.
3. Подобрать гармоничный оттенок заранее поможет Палитра цветов.

Сжатие XML и экспорт в PNG 2x / 4x

Нажмите Сжать, чтобы удалить комментарии, метаданные и лишние пробелы, или скопируйте готовый Data URI для вставки в CSS. Для презентаций и документов выберите масштаб 2x или 4x и скачайте чёткий PNG или WebP, а для пакетной конвертации используйте Конвертер изображений.