Tools 4 All
Главная
Инструменты для изображений

Онлайн-редактор SVG

Быстрый профессиональный векторный редактор в браузере: рисуйте пером, редактируйте узлы, объединяйте фигуры, оформляйте градиентами, анимируйте и экспортируйте оптимизированный SVG или PNG. Ничего не загружается на сервер.

БесплатноБез регистрацииРаботает локально — файлы не покидают ваше устройство

Быстрый старт и сочетания клавиш

Выберите инструмент слева (или нажмите его клавишу), тяните по холсту, чтобы рисовать, и оформляйте выделение на панели «Дизайн» справа. В любой момент нажмите ?, чтобы увидеть полный список сочетаний клавиш.

  • Навигация: прокрутка — панорама, Ctrl/⌘ + прокрутка или щипок — масштаб, удерживайте Space и тяните для панорамы. Shift+1 — вписать в окно.
  • Выделение: щелчок, Shift-щелчок или рамка. Двойной щелчок по группе — войти в неё, по контуру — редактировать узлы, по тексту — набирать текст.
  • Трансформация: тяните маркеры для масштабирования (Shift сохраняет пропорции, Alt — от центра), тяните круглую ручку для поворота, а Ctrl/⌘ + перетаскивание бокового маркера — наклон.
  • Перо: щелчок — угол, перетаскивание — кривая; щёлкните первый узел, чтобы замкнуть контур, и нажмите Enter, чтобы закончить.
  • Файлы: перетаскивайте SVG или изображения в любое место редактора, вставляйте код SVG или скриншоты — автосохранение бережёт вашу работу.
Untitled
Guide, features and FAQ

Как пользоваться редактором SVG

  1. Откройте файл или начните рисовать

    Перетащите SVG, PNG или JPEG на холст, откройте файл или начните с чистой страницы. Ничего не загружается: редактор целиком работает в браузере.

  2. Рисуйте и редактируйте

    Используйте перо, карандаш и фигуры, затем дорабатывайте контуры по узлам, объединяйте фигуры логическими операциями и оформляйте заливки, обводки и градиенты.

  3. Упорядочивайте

    Группируйте, упорядочивайте и блокируйте объекты на панели «Слои», выравнивайте и распределяйте их, используйте графику повторно как символы и редактируйте код SVG напрямую.

  4. Экспорт

    Скачивайте оптимизированный SVG, PNG, JPEG или WebP в любом масштабе или копируйте результат как код SVG, data URI, компонент React или SVG для Tailwind, берущий цвет из CSS.

Профессиональный редактор SVG, который целиком работает в браузере

Редактор SVG от Tools 4 All — полноценное приложение для векторной графики, которое открывается мгновенно, без скачивания, аккаунта и загрузки на сервер. Рисуйте логотипы, иконки, иллюстрации, схемы и элементы интерфейса или очищайте и дорабатывайте уже имеющиеся файлы SVG. Он построен вокруг самого формата SVG, поэтому экспортируемый файл — тот же документ, который вы редактировали: без собственного формата и скрытых преобразований.

Что можно делать

  • Рисуйте точно: перо с кривыми Безье, карандаш со сглаживанием, прямоугольники с независимо скруглёнными, скошенными или вогнутыми углами, эллипсы, линии, кисть-клякса, ластик, нож и ножницы, а также редактируемые фигуры: многоугольники, звёзды, треугольники, кресты, рамки, кольца, секторы, полумесяцы, стрелки, выноски, шестерёнки, сердца, облака, цветы, спирали и текст.
  • Редактируйте контуры по узлам: перемещайте узлы и маркеры, переключайте узлы между угловыми, гладкими и симметричными, добавляйте и удаляйте узлы, соединяйте и разрывайте контуры, изгибайте сегменты напрямую и привязывайте маркеры к касательным.
  • Объединяйте фигуры: объединение, вычитание, пересечение, исключение и разделение, а также абрис обводки, смещение контура, упрощение и обращение — всё вычисляется нашим собственным геометрическим движком, сохраняющим кривые, в фоновом воркере.
  • Оформляйте всё: сплошные цвета, линейные и радиальные градиенты с маркерами на холсте, узоры, непрозрачность заливки и обводки по отдельности, штрихи, концы и соединения линий, наконечники стрелок, режимы наложения, эффекты размытия и тени, обтравочные контуры и маски.
  • Порядок во всём: панель слоёв с перетаскиванием, переименованием и вложенностью, блокировка и скрытие, группировка и разгруппировка, выравнивание и распределение относительно выделения, монтажной области или ключевого объекта, образцы документа и многократно используемые символы.
  • Работайте как профи: умные направляющие с подписями расстояний и подсказками равных интервалов, привязка к сетке, пикселям, направляющим линеек, узлам и контурам, числовые поля X/Y/W/H/поворот, неограниченная отмена и сочетания клавиш как в Figma и Illustrator.
  • Код и экспорт: двусторонний просмотр кода SVG, оптимизированный экспорт SVG с показом размера, PNG/JPEG/WebP в любом масштабе и копирование как SVG, data URI, React (JSX или TSX), Tailwind SVG или CSS-фон.
  • Создан для веб-производства: цвета документа с заменой в один клик и преобразованием в currentColor, текст в кривые, абрис обводки, сведение трансформаций и разгруппировка, подгонка холста под содержимое и упрощение «шумных» контуров.
  • Настоящее рабочее пространство: несколько рисунков во вкладках, у каждого своя история отмены, короткие меню с подменю, сворачиваемая боковая панель (Ctrl/⌘+B) и полноэкранное редактирование на телефонах и компьютерах.

Почему важен редактор, изначально работающий с SVG

Многие дизайнерские программы считают SVG форматом экспорта: вы рисуете в их собственной модели, а SVG генерируется в конце. Для простых иконок это работает. Но всё ломается, когда нужно отредактировать существующий файл, сохранить id, от которых зависят ваши CSS или JavaScript, или понять, почему файл в десять раз больше, чем должен быть. Этот редактор работает с документом SVG напрямую. Группы остаются группами, градиенты — градиентами, а <symbol>, использованный пять раз, остаётся одним символом. Переименовывая слой, вы задаёте id элемента.

Быстр с большими файлами

Скорость была целью с первой строки кода. Рисунок отрисовывается браузером нативно в изолированном слое. Маркеры выделения, контуры при наведении и направляющие рисуются на отдельном оверлее, поэтому движение мыши никогда не затрагивает документ. Пространственный индекс (R-дерево) находит объект под указателем за микросекунды даже среди десятков тысяч фигур. В тяжёлых документах панорамирование и масштабирование передаются композитору GPU, а векторы перерисовываются чётко, когда вы останавливаетесь. Затратная работа — логические операции, смещение контуров и оптимизация SVG — выполняется в Web Worker, поэтому интерфейс остаётся отзывчивым.

Точные инструменты для векторной работы

Пером щёлкайте для углов и тяните для плавных кривых. Удерживайте Shift, чтобы сохранять углы по 45°, и Alt, чтобы разломить маркер. Инструментом «Узел» можно потянуть сегмент, чтобы изогнуть его, дважды щёлкнуть, чтобы добавить узел, или выделить несколько узлов и выровнять их. Умные направляющие показывают, когда объект выровнен по краям или центрам соседей и когда интервалы между объектами равны. Направляющие можно также вытягивать из линеек. Для точных значений вводите X, Y, ширину, высоту и поворот на панели «Дизайн». Поля принимают арифметику, например 120+16 или 200/3.

Чистый и компактный экспорт

Редакторы часто оставляют в сохранённых файлах метаданные, неиспользуемые определения, лишние группы и избыточно точные числа. Диалог экспорта запускает в фоне оптимизатор в стиле SVGO. Он округляет числа до выбранной точности, приводит данные контуров к кратчайшей форме, удаляет метаданные редактора и неиспользуемые определения, сокращает id и цвета и убирает бесполезные группы. Каждую оптимизацию можно отключить, а диалог показывает размер файла до и после. Для растрового вывода выберите PNG, JPEG или WebP в 1×, 2×, 4× или точном размере в пикселях, с прозрачным фоном или без.

Создан для веб-производства

SVG для сайтов и приложений требуют другого, чем графика для печати. Список «Цвета документа» показывает все цвета файла: измените один — и всё, что его использует, изменится следом, или преобразуйте его в currentColor, чтобы иконка React или Tailwind брала цвет из CSS. Импортированные файлы часто содержат вложенные группы и трансформации, из-за которых контуры трудно редактировать: «Свести трансформации и разгруппировать» за один шаг переносит их в координаты, а «Подогнать под содержимое» обрезает viewBox по графике с учётом обводок. «Текст в кривые» и «Абрис обводки» превращают шрифт и толщину линий в обычные контуры, которые везде выглядят одинаково, а «Упростить» убирает сотни точек из трассированной или нарисованной от руки фигуры.

Ваши файлы остаются на вашем устройстве

За редактором нет сервера. Открытие файла считывает его с вашего диска в страницу, а экспорт создаёт файл на вашем устройстве. Автосохранение пишет в приватное хранилище IndexedDB вашего браузера, где также хранится список недавних файлов. Если вы случайно закроете вкладку, последний документ восстановится при следующем посещении.

Другие инструменты для изображений

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

Этот редактор SVG действительно бесплатный и конфиденциальный?
Да. Он бесплатный, не требует аккаунта и на 100% работает в браузере. Ваши рисунки никогда не загружаются: файлы читаются локально, автосохранение идёт в собственное хранилище браузера (IndexedDB), а экспорт создаётся на вашем устройстве.
Открывает ли он файлы SVG из Illustrator, Inkscape, Figma или библиотек иконок?
Да. Редактор работает с документом SVG напрямую, поэтому реальные файлы сохраняют структуру, id, стили, градиенты, символы, обтравочные контуры и маски. Неаккуратные или некорректные файлы исправляются при открытии, скрипты при редактировании отключаются, а файлы .svgz распаковываются автоматически.
Есть ли перо и логические операции, как в Illustrator?
Да. Перо рисует контуры Безье с угловыми, гладкими и симметричными узлами, а инструмент «Узел» позволяет добавлять, удалять, преобразовывать, соединять, разрывать и выравнивать узлы. Объединение, вычитание, пересечение, исключение и разделение работают с кривыми и сохраняют их кривыми; можно также создавать абрис обводки, смещать и упрощать контуры.
Можно ли анимировать SVG?
Да. Откройте рабочее пространство «Анимация», переместите указатель воспроизведения и измените положение, поворот, масштаб, непрозрачность или цвета объекта: каждое изменение станет ключевым кадром с кривой плавности, а уже анимированные свойства получат новый ключевой кадр автоматически. Анимации сохраняются в стандартном SVG (SMIL), поэтому воспроизводятся в любом браузере без скриптов.
Можно ли редактировать код SVG напрямую?
Да. Панель «Код» показывает живой исходный код SVG с подсветкой синтаксиса. Изменение кода обновляет рисунок, а изменение рисунка — код. Любое изменение с любой стороны можно отменить.
Какие форматы экспорта поддерживаются?
Оптимизированный SVG, созданный встроенным оптимизатором в стиле SVGO с показом размера до и после, а также PNG, JPEG и WebP в 1×, 2×, 4× или своём размере, с прозрачностью по желанию. Выделение можно также скопировать как код SVG, data URI или JSX для React.
Потеряю ли я работу, если браузер закроется?
Нет. Документ автоматически сохраняется в локальное хранилище браузера через мгновение после каждого изменения. При следующем открытии редактор восстановит последнюю сессию, а более старые документы доступны в меню «Файл → Недавние файлы».
Можно ли сделать так, чтобы иконка использовала currentColor для React или Tailwind?
Да. Раздел «Цвета документа» перечисляет все цвета рисунка (каждое написание цвета учитывается один раз). Нажмите на образец, чтобы выделить всё, что его использует, и изменить его везде сразу, или выберите «Преобразовать в currentColor»: тогда иконка будет брать цвет из CSS, например из класса Tailwind text-…, сохраняя свой вид в редакторе. Скопируйте её как компонент React или SVG для Tailwind из меню «Правка» или контекстного меню.
Как преобразовать текст в кривые или обводку в залитую фигуру?
Выделите текст и выберите «Текст в кривые» (Ctrl/⌘+Shift+O): каждый глиф станет контуром ровно там, где его нарисовал браузер, включая текст по контуру и оформленные фрагменты. Для обводок команда «Абрис обводки» превращает обводку в залитую фигуру с той же толщиной, концами, соединениями и штрихами, поэтому логотип сохраняет вес при любом размере.
Может ли он очистить импортированные SVG с трансформациями и вложенными группами?
Да. «Свести трансформации и разгруппировать» записывает все трансформации в координаты контуров и растворяет группы за один шаг отмены, оставляя только то, что иначе изменило бы вид (обрезанные, замаскированные группы или группы, на которые есть ссылки). «Подогнать под содержимое» обрезает холст (viewBox, ширину и высоту) по графике с учётом обводок, с отступом по желанию, а «Упростить» уменьшает число точек на «шумных» контурах.
Можно ли работать над несколькими рисунками сразу?
Да. Каждый рисунок открывается в своей вкладке над холстом, со своей историей отмены, выделением и масштабом. Свободно переключайтесь между ними; закрытая вкладка остаётся в «Файл → Недавние файлы», а открытые вкладки вернутся при следующем посещении.
Где все команды? Меню короткие.
Связанные команды находятся в подменю («Упорядочить», «Трансформировать», «Контур», «Обрезка и маска», «Копировать как», «Выровнять и распределить»…). Наведите указатель или коснитесь их либо используйте клавиши со стрелками. У каждой команды есть и сочетание клавиш: нажмите ?, чтобы увидеть полный список. На компьютере боковую панель можно свернуть сочетанием Ctrl/⌘+B, чтобы освободить место для холста.
Работает ли он на телефонах и планшетах?
Да. На маленьких экранах инструменты переходят на нижнюю панель, а панели открываются как выдвижные листы. Щипок — масштаб, перетаскивание двумя пальцами — панорама, долгое нажатие — контекстное меню.
Насколько большими могут быть мои рисунки?
Редактор создан для тяжёлых файлов. Он использует пространственный индекс для определения попаданий и выделения, отдельный слой-оверлей для маркеров и направляющих, панорамирование и масштабирование только через композитор в больших документах и Web Workers для геометрии и оптимизации. Документы с десятками тысяч элементов остаются отзывчивыми.
Все инструменты для изображений →
Сжатие изображений Уменьшайте размер файлов изображений, сохраняя качество. Конвертер изображений Конвертируйте изображения между PNG, JPEG, WebP, GIF, BMP, ICO, TIFF и другими форматами. Изменение размера изображений Изменяйте размер изображений до точных значений — идеально для фото на паспорт. Изображения в PDF Объединяйте одно или несколько изображений в один документ PDF.