Превращает SVG в data URI, который можно вставить в CSS или HTML без отдельного файла. Сначала SVG оптимизируется, затем кодируется для URL (обычно самый короткий вариант), в Base64 или оборачивается в готовую строку background-image: url("data:image/svg+xml,…"). Подходит для маленьких иконок, галочек и узоров, которые должны загружаться вместе с CSS.
Как пользоваться
- Откройте SVG, перетащите его на превью или вставьте код. Для начала загружен пример.
- Оптимизация: выберите, сколько знаков после запятой оставить и какие чистки применить. Виден размер до и после; скопируйте код, Data URI или строку CSS либо скачайте файл.
- В PNG: задайте ширину или высоту (или нажмите 2×, 4×, 1024…), выберите PNG, JPG или WebP и фон, затем скачайте.
- Векторизация: перетащите PNG или JPG, выберите число цветов и детализацию и скачайте SVG.
- Код: правьте разметку, превью обновляется по мере ввода.
- Оптимизатор никогда не меняет ширину, высоту и viewBox SVG, сохраняет используемые ID и округляет пути без накопления ошибки. Сложные файлы проверьте в превью, прежде чем заменять оригинал.
- Для большинства иконок хватает двух знаков; для больших технических чертежей берите 3–4.
- Векторизация лучше всего работает с логотипами, иконками и плоской графикой. Фото превращаются во множество крупных пятен; меньше цветов даст эффект плаката.
- Файлы обрабатываются в браузере. Скрипты внутри SVG здесь не выполняются: превью показываются как картинки.
Почему SVG-файлы такие большие
Графические редакторы экспортируют гораздо больше, чем сам рисунок: метаданные редактора, комментарии, неиспользуемые ID и определения, пустые группы, атрибуты со значениями по умолчанию и координаты с шестью и более знаками после запятой. В обычной иконке этот балласт может составлять большую часть файла. Оптимизатор убирает его, округляет данные путей до выбранной точности и схлопывает лишние группы, никогда не трогая ширину, высоту и viewBox корневого элемента и сохраняя используемые ID.
Двух знаков после запятой хватает для большинства иконок и логотипов на экране; крупным техническим чертежам может понадобиться три-четыре. Перед заменой оригинала всегда сравнивайте превью, особенно если в файле есть маски, фильтры или встроенные шрифты.
Вектор или растр
SVG описывает фигуры, поэтому остаётся чётким при любом размере и для иконок, логотипов и схем обычно весит очень мало; фотографии лучше хранить в JPG, PNG или WebP. Когда платформа требует растр — иконку для магазина приложений, PNG-фавикон или картинку для соцсетей, — экспортируйте ровно в нужном размере: viewBox 24 × 24 при 1024 px получается чётким, потому что вектор перерисовывается, а не растягивается. В JPG нет прозрачности, поэтому выберите цвет фона.
Векторизация и data URI
Векторизация лучше всего работает на плоской графике с небольшим числом цветов и чёткими краями: логотипах, иконках, подписях, линейных рисунках; фотография превращается во множество крупных пятен. Для маленьких иконок в CSS data URI с URL-кодированием обычно короче Base64: SVG — это текст, а Base64 добавляет около 33 %.
Частые вопросы
Изменит ли оптимизация вид моего SVG?
Не должна. Оптимизатор сохраняет viewBox и используемые ID и округляет координаты до заданной точности. Если сложный файл немного сместился, увеличьте число знаков и сравните снова.
Как перевести SVG в PNG в высоком разрешении?
Откройте SVG, перейдите в «В PNG» и задайте ширину или высоту либо нажмите 2×, 4× или размер вроде 1024. Изображение перерисовывается из вектора в этом размере, до 8192 px, и остаётся чётким.
Можно ли превратить PNG или JPG в настоящий векторный SVG?
Да, векторизацией: инструмент находит области похожего цвета и превращает их в контуры. Логотипы и иконки с небольшим числом цветов получаются хорошо, фотографии дают большие файлы с эффектом постеризации.
Какой data URI выбрать: Base64 или URL-кодирование?
Для SVG URL-кодирование обычно компактнее и остаётся читаемым, ведь Base64 увеличивает текст примерно на треть. Base64 нужен, только если его требует какой-то инструмент.
Безопасно ли открыть здесь SVG из неизвестного источника?
Да. SVG может содержать скрипты, но превью здесь показывается как изображение, а в изображениях браузер скрипты не выполняет. Ничего не загружается.
Сохраняет ли конвертер прозрачность?
PNG и WebP сохраняют прозрачные области, если не выбран цвет фона. JPG не умеет хранить прозрачность, поэтому такие места заливаются белым или выбранным цветом.