Бесплатный оптимизатор и конвертер SVG: минимизируйте и очищайте SVG (пакетно), конвертируйте SVG в PNG, JPG, React JSX или URI данных, редактируйте пути, обрезайте viewBox, перекрашивайте, создавайте спрайты, а также генераторы волн, BLOB-объектов, узоров, градиентов сетки и шума. Нет загрузки.
23 инструмента SVG в одном личном рабочем пространстве
Бесплатное частное рабочее пространство SVG с 23 инструментами. Оптимизируйте и минимизируйте SVG в стиле SVGO (пакетно, с проверками до/после), очищайте экспорт Figma и Illustrator и конвертируйте SVG в PNG, JPG, WebP, компоненты React или URI данных. Вы также можете проверять файлы, редактировать пути, обрезать окно просмотра, перекрашивать, создавать спрайты и создавать волны, капли, узоры, градиенты сетки, зернистые текстуры и разделители — и все это в вашем браузере.
SVG Forge объединяет задания SVG, которые вы обычно распределяете по пяти веб-сайтам, на одной странице: оптимизатор в стиле SVGO с пакетным экспортом ZIP, миниификатор, очиститель и форматировщик; конвертеры из SVG в PNG, JPG, WebP, компоненты React и URI данных; валидатор; редактор визуальных путей, обрезка viewBox, замена цвета и построитель спрайтов; и десять генераторов волн, пятен, узоров, градиентов сетки, текстур зерна и разделителей секций. Любой результат можно передать следующему инструменту одним щелчком мыши. Вы можете создать большой двоичный объект, перекрасить его, оптимизировать и экспортировать как компонент React без копирования и вставки между вкладками.
Функции
23 инструмента SVG: оптимизируйте, конвертируйте, редактируйте и генерируйте
Оптимизатор в стиле SVGO: 21 переключатель, предустановки, пакетный ZIP-архив и визуальные различия.
SVG в PNG, JPG и WebP любого размера, включая набор значков размером 16–512 пикселей.
Компонент SVG для React/React Native (TSX или JSX)
Кодер и декодер URI данных, фон CSS и вывод маски CSS
Валидатор: отчет о безопасности, доступности, размере и gzip
Редактор путей с опорными точками, преобразованием abs↔rel и подгонкой по значку
Обрезка содержимого ViewBox, замена цвета (оттенок, оттенки серого, текущий цвет) и построитель спрайтов
Генераторы волн, пятен, узоров, градиента сетки, шума, разделителей, многоугольников, звезд, спиралей и волнистых линий
Сначала локально: файлы никогда не загружаются
Как использовать Оптимизатор, конвертер и генератор SVG
1
Выберите инструмент
Выберите «Оптимизировать», «Преобразовать», «Редактировать» или «Создать» на боковой панели (или в средстве выбора на мобильном устройстве). У каждого инструмента также есть собственная ссылка, например #svg-to-png.
2
Добавьте свой SVG
Вставьте разметку, загрузите или перетащите один или несколько файлов .svg или прочитайте их из буфера обмена. Генераторы начинаются с готового дизайна, который можно рандомизировать.
3
Отрегулируйте и проверьте
Настройте пресеты, ползунки и переключатели. Предварительный просмотр обновляется в реальном времени, и оптимизатор показывает оригинал и результат рядом с экономией байтов и gzip.
4
Экспортируйте или передайте
Скопируйте в формате SVG, React, URI данных, Base64 или CSS, загрузите .svg, экспортируйте PNG/JPG/WebP или отправьте результат прямо в другой инструмент с помощью «Открыть в…».
Распространенные случаи использования
Оптимизируйте и минимизируйте значки и иллюстрации перед отправкой в производство.
Очистите раздутый экспорт SVG из Figma, Illustrator, Inkscape или Sketch.
Пакетное сжатие всей папки с значками и загрузка ее в виде ZIP-файла.
Преобразуйте логотип SVG в PNG для электронной почты, социальных сетей или набора значков.
Превратите значки SVG в типизированные компоненты React или React Native.
Встроенные маленькие значки в CSS как минимально возможный URI данных.
Обрежьте пустое пространство вокруг SVG, подобрав viewBox к его содержимому.
Перекрасьте SVG в палитру бренда или переключите его на currentColor.
Объедините значки в один многоразовый спрайт <symbol>.
Создавайте волнистые, каплевидные, градиентные и зернистые фоны для целевых страниц.
Подробное руководство
Какой инструмент SVG мне нужен?
Начните с задания, а не с названия инструмента. Чтобы уменьшить размер файла, используйте «Оптимизировать». Чтобы использовать SVG там, где требуется растровое изображение, код или CSS, используйте Convert. Чтобы исправить или изменить стиль существующего SVG, используйте «Правка». Чтобы создать новую иллюстрацию из ползунков, используйте «Создать».
Группа
Инструменты
Лучшее для
Оптимизация и очистка
Оптимизатор, Миниификатор, Очиститель, Форматер, Упроститель пути
Уменьшение значков и иллюстраций перед отправкой
Преобразование и проверка
SVG → PNG/JPG/WebP, SVG → React (JSX/TSX), кодер/декодер URI данных, средство просмотра и проверки
Преобразование SVG в формат, необходимый вашему приложению, электронной почте или CSS.
Редактировать
Редактор путей, область просмотра и обрезка, замена цвета, генератор спрайтов
Исправление путей, обрезка пробелов, перекрашивание и объединение значков.
Генерировать
Волны, капли, узоры, градиент сетки, шум и зернистость, разделитель формы, многоугольник, звезда, спираль, волнистая линия
Фоны, главные разделы, разделители и декоративные формы.
Как работает оптимизатор SVG и какие настройки безопасны
Оптимизатор преобразует ваш файл в настоящий XML-документ в браузере и применяет 21 оптимизацию по образцу SVGO. Каждый из них можно включить или выключить, а три предустановки («Сбалансированный», «Максимум», «Только чистый») охватывают общие случаи. Параллельная визуальная проверка показывает исходный и оптимизированный рендеринг, поэтому перед загрузкой вы можете убедиться, что ничего не изменилось. Вы можете загрузить десятки файлов одновременно и получить их обратно в виде одного ZIP-архива. Типичный экспорт из Illustrator, Inkscape или Figma сокращается на 30–70 %, и отображается размер gzip, потому что именно его на самом деле отправляет ваш сервер.
Оптимизация
Что он делает
Визуальный риск
Удаление данных и метаданных редактора
Удаляет пространства имен Inkscape, Sodipodi, Illustrator, Sketch и Figma, <метаданные> и комментарии.
Никто
Округление чисел/сжатие путей
Округляет координаты до выбранной вами точности и перезаписывает данные пути в более короткой абсолютной или относительной форме.
Нет с точностью до 2–3 десятичных знаков; проверьте крошечные значки в диапазоне 0–1
Удалить неиспользуемые определения и идентификаторы
Удаляет градиенты, контуры обрезки и идентификаторы, на которые ничего не ссылается.
Никто
Свернуть группы/удалить значения по умолчанию
Разворачивает пустые оболочки <g> и удаляет значения типа fill-opacity="1"
Никто
Стили → атрибуты, сокращение цветов
style="fill:#ffffff" становится fill="#fff"
Нет (пропускается автоматически, если существует блок <style>)
Адаптивный (ширина/высота капли)
Сохраняет только viewBox, поэтому CSS контролирует размер.
Макет может измениться, если вы полагались на фиксированный размер.
Удалить <title>/<desc>
Удаляет доступные имена
Визуально нет, но это вредит пользователям программ чтения с экрана.
Очистите код SVG, экспортированный из Figma, Illustrator или Inkscape.
Инструменты проектирования дополняют экспорт SVG комментариями генератора, объявлениями XML, пространствами имен редактора, идентификаторами слоев, такими как Layer_1 и SVGID_1_, пустыми группами, стилями включения фона и числами с шестью десятичными знаками. Средство очистки SVG удаляет этот мусор, но сохраняет разметку с отступами и делает ее читабельной, что полезно, когда вы вручную редактируете или анимируете файл. Оптимизатор идет дальше для производства, а Валидатор точно перечисляет, что находится внутри (количество элементов, цвета, шрифты, встроенные растровые изображения, сценарии и внешние ссылки), чтобы вы могли понять, почему файл тяжелый или небезопасный, прежде чем использовать его.
SVG в PNG, компонент React или URI данных: какой формат использовать
SVG — лучший выбор для иконок и иллюстраций в Интернете. Однако в некоторых местах по-прежнему требуется растровое изображение или код. Конвертеры обрабатывают каждый случай без загрузки.
Экспорт
Используйте его, когда
Примечания
PNG / WebP
Электронная почта, публикации в социальных сетях, магазины приложений, значки — везде, где SVG не принимается.
Любой размер до 8192 пикселей, прозрачный фон, пакетный ZIP-архив и набор значков размером 16–512 пикселей одним щелчком мыши.
JPG
Места, которым нужно маленькое непрозрачное изображение
Выберите цвет фона, который заменяет прозрачность.
Реагировать / Реагировать Нативный
Иконки внутри кодовой базы React, Next.js или Expo
Атрибуты CamelCase, объекты стиля, {...props}, необязательный currentColor и доступный заголовок.
URI данных (в URL-кодировке)
Маленькие значки, встроенные в CSS или HTML без дополнительных запросов.
Обычно примерно на 30% меньше, чем Base64. Вывод маски CSS позволяет перекрашивать фоновый цвет.
SVG-спрайт
Многие значки повторно используются на сайте.
Один файл из <symbol>, на который ссылается <use href="#id">
Генераторы создают чистый, редактируемый вручную SVG, а не экспорт растровых изображений. Многослойные волны и морфируемые капли можно анимировать с помощью SMIL, который работает внутри <img> и фонов CSS без использования JavaScript. Генератор узоров экспортирует 16 бесшовных мотивов либо в виде одной плитки для повторения фона, либо в виде полного холста. Генераторы градиента сетки и шума создают мягкий градиент и эффект зернистости, популярный на современных целевых страницах, а разделитель формы поставляется с готовым к вставке фрагментом HTML и CSS для краев разделов. Каждый вывод можно скопировать в формате SVG, React, URI данных или CSS или экспортировать в PNG.
Анализ, оптимизация, растрирование и архивирование выполняются в вашем браузере с помощью стандартных веб-API (DOMParser, Canvas и CompressionStream). Ваши произведения искусства никогда не попадают на сервер, поэтому инструменты также подходят для работы с клиентами в соответствии с соглашением о неразглашении. Предварительный просмотр отображается через изолированный <img>, поэтому любые вставленные вами сценарии в SVG не могут быть запущены, а оптимизатор может удалить теги <script> и обработчики событий перед встраиванием файла на свой сайт.
Часто задаваемые вопросы
Какие инструменты SVG включены?
Двадцать три, сгруппированные в четыре области. Оптимизация: оптимизатор, минимизатор, очиститель, форматтер и упроститель пути. Преобразование: SVG в PNG/JPG/WebP, SVG в React, URI данных, а также средство просмотра и проверки. Редактировать: Редактор путей, ViewBox и обрезка, Заменитель цвета и Генератор спрайтов. Создать: волну, каплю, узор, градиент сетки, шум, разделитель формы, многоугольник, звезду, спираль и волнистую линию.
Как бесплатно оптимизировать файл SVG?
Откройте оптимизатор, вставьте SVG или вставьте один или несколько файлов .svg и выберите предустановку (только «Сбалансированный», «Максимальный» или «Чистый») или переключите любую из 21 оптимизации. Инструмент показывает исходные, оптимизированные и заархивированные размеры, а также осуществляет параллельную визуальную проверку. Затем скопируйте результат, загрузите его или загрузите каждый файл в формате ZIP.
Как создать волну или каплю SVG?
Используйте генератор Wave или Blob, настраивайте ползунки (слои, амплитуду, сложность, случайность) и цвета, и векторные изображения будут обновляться в реальном времени. Нажмите «Случайно», чтобы изучить варианты, включите анимацию для эффекта морфинга, затем скопируйте или экспортируйте SVG.
Могу ли я получить SVG в качестве фона CSS или URI данных?
Да. Каждый результат имеет вкладки экспорта для необработанного SVG, React, компактного URI данных в URL-кодировке, Base64 и готового к вставке правила CSS, а также загрузки .svg и PNG/JPG/WebP. Инструмент URI данных также создает фрагмент маски CSS и может декодировать URI данных обратно в SVG.
Что удаляет очиститель SVG?
XML-объявления, DOCTYPE, комментарии, <метаданные>, а также пространства имен и атрибуты редактора из Inkscape, Sodipodi, Illustrator, Sketch, Serif и Figma. Он сохраняет разметку с отступами и делает ее читабельной, поэтому это правильный выбор, если вы все же хотите редактировать файл вручную.
Загружен ли мой SVG на сервер?
Нет. Все, включая оптимизацию, рендеринг PNG и создание ZIP, выполняется локально в вашем браузере. Ваши файлы никогда не покидают ваше устройство, поэтому это конфиденциально и мгновенно.
Как минимизировать или оптимизировать файл SVG?
Вставьте или загрузите свой SVG, и редактор оптимизатора удаляет метаданные, комментарии, неиспользуемые определения и избыточный код, округляет числа и сжимает данные пути (например, SVGO). Часто при этом файл сжимается на 30–70 % без изменения его внешнего вида, и все это выполняется в вашем браузере.
Как очистить беспорядочный SVG-код из Figma или Illustrator?
Инструменты дизайна добавляют раздувания, такие как комментарии генератора, идентификаторы слоев, пустые группы и шестизначные числа. Вставьте экспортированный результат в очиститель (чтобы он оставался читабельным) или оптимизатор (наименьший результат), чтобы получить облегченную, готовую к использованию в Интернете разметку.
Могу ли я преобразовать SVG в URI данных?
Да. Используйте инструмент URI данных или вкладку URI данных для любого результата. Он использует URL-кодировку, которая обычно примерно на 30 % меньше, чем Base64, а также предоставляет Base64, фоновое правило CSS и тег <img>.
Как преобразовать SVG в PNG с прозрачным фоном?
Откройте SVG в PNG/JPG, добавьте файлы, выберите PNG и масштаб (например, 4 ×) или точную ширину или высоту и оставьте включенным параметр «Прозрачный фон». Вы можете пакетно конвертировать множество SVG-файлов в ZIP, вместо этого выбрать JPG или WebP или выбрать набор значков для экспорта PNG-файлов размером 16–512 пикселей для значков значков и приложений.
Как преобразовать SVG в компонент React?
Вставьте SVG в SVG для React (JSX), назовите компонент и выберите TypeScript или JavaScript, React или React Native. Атрибуты преобразуются в CamelCase, встроенные стили становятся объектами, а {...props} распространяется в корне. Вы также можете переключить цвета на currentColor и добавить доступный заголовок.
Изменит ли оптимизация внешний вид моего SVG?
Не с предустановкой «Сбалансированный» по умолчанию. Каждая оптимизация в нем только удаляет невидимые данные или эквивалентно перезаписывает значения. Очень низкая точность (0–1 десятичный знак) может привести к небольшому смещению точек на крошечных значках, поэтому перед загрузкой оптимизатор показывает рядом оригинал и результат.
Как удалить пустое пространство вокруг SVG?
Откройте ViewBox и обрежьте, вставьте SVG и нажмите «Обрезать по содержимому». Инструмент измеряет реальные границы рисунка, устанавливает плотный viewBox с выбранными вами отступами и может обновлять или удалять атрибуты ширины и высоты.
Как изменить цвета SVG?
Средство замены цвета определяет каждый цвет заливки, обводки и градиента (шестнадцатеричный, rgb(), hsl() и именованные цвета) и перечисляет частоту появления каждого из них. Вы можете переназначить их один за другим, изменить оттенок, насыщенность и яркость для всего файла, преобразовать в оттенки серого или инвертировать или заменить все на currentColor, чтобы значок соответствовал цвету вашего текста CSS.
Что такое спрайт SVG и как его использовать?
Спрайт — это один SVG-файл, содержащий множество значков в виде элементов <symbol>. Добавьте свои значки в генератор спрайтов, а затем укажите на каждый из них <svg><use href="#icon-id"/></svg>. Инструмент может префиксировать внутренние идентификаторы, чтобы избежать конфликтов градиентов и преобразовывать цвета в currentColor, а также генерирует для вас код использования.
Безопасно ли вставлять SVG из неизвестного источника?
Да. Предварительный просмотр отображается внутри изолированного <img>, где сценарии не могут выполняться. Валидатор помечает теги <script>, обработчики событий и внешние ссылки, а оптимизатор по умолчанию удаляет скрипты и обработчики перед встраиванием файла на сайт.
Могу ли я анимировать сгенерированные волны и капли?
Да. Генераторы Wave и Blob имеют переключатель Animate, который добавляет автономную трансформацию SMIL. Он воспроизводится в браузерах внутри <img>, фонов CSS и встроенного SVG без необходимости использования JavaScript или CSS.
