Иногда нужен не полноценный Illustrator, а маленький инструмент в браузере: подровнять viewBox у иконки из дизайн-системы, заменить цвет на пути, дочертить нужную форму к чужому SVG-спрайту или вытащить из готовой картинки минимальный <path> без хвоста из мета-данных. Онлайн-редакторы как раз закрывают такой сценарий «открыл — поправил — забрал чистый файл», без установки софта и без подписки на десктоп-комбайн.

Ниже — список сервисов, которые на момент проверки живы и работают, плюс бонусом AI-помощник AutoDraw. Подборка собрана не плоским списком, а по сценариям: чисто бесплатные, бесплатные с платными апгрейдами, только под анимацию, только под подписку.

На что фронтендеру смотреть при выборе

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

• Чистый экспорт. Хороший редактор отдаёт SVG без редакторских артефактов: лишних <metadata>, sodipodi:*-атрибутов, инлайн-стилей на каждом узле. Adobe Illustrator печально известен горой мусора, веб-инструменты обычно аккуратнее, но проверять стоит.
• Контроль над id и class. Если планируете класть результат в спрайт через <symbol>/<use> — нужны осмысленные имена, а не layer_1_copy_2.
• Корректный viewBox. Без него SVG не будет адаптивным: в одном контейнере он растянется, в другом — обрежется. Редактор должен либо его сохранять, либо хотя бы предсказуемо высчитывать.
• Читаемый path-data. Один и тот же контур можно записать в виде «колбасы» абсолютных команд или плотным относительным путём. Разница в размере на больших иконках — десятки процентов.
• Слои и булевые операции. Если нужно вычесть форму из формы, объединить два контура в один, разрезать линию — редактор без булевых операций (union, intersect, difference) подойдёт только для совсем простых иконок.

Финальную чистку лучше всё равно прогонять через SVGO или его веб-обёртку SVGOMG — но об этом в самом конце, после обзора инструментов.

Полностью бесплатные

ArtDraw

Бесплатный редактор с честным набором инструментов: фигуры, перья, текст, импорт JPG/PNG/WEBP с автоматической векторизацией, отдельный генератор мандал для декоративных паттернов. Есть булевые операции и горячие клавиши на основные действия — для повседневной работы с иконками этого хватает с запасом. Экспорт в SVG и PNG, публикация через привязку Google-аккаунта.

Method Draw

Форк старого SVGEdit, у которого переработали интерфейс и навели порядок в панелях. Базовые фигуры, текст, цвет, простые трансформации — всё, что нужно для быстрого «нарисовать треугольник, сохранить SVG, закрыть». Под сложные иллюстрации не годится: ни булевых операций, ни нормальной работы со слоями.

SVGEdit

Старожил жанра: open source проект на JavaScript, актуальная версия 7, живая разработка на GitHub. Интерфейс похож на упрощённый Illustrator: панель свойств, редактор цвета, прямое редактирование path-data в текстовом виде. Можно встроить редактор в собственное приложение через npm-пакет — полезно, если делаете админку с правкой иконок прямо на странице.

Vectr

Кросс-платформенный векторный редактор: работает и в браузере, и как нативное приложение под все десктопные ОС. Простой интерфейс без перегруженных панелей, совместная работа над одним файлом по ссылке, экспорт в SVG/PNG/JPG. Подойдёт, если в команде кто-то правит вектор не каждый день и не хочет осваивать Illustrator.

Бесплатный тариф + платные апгрейды

Boxy SVG

Один из самых уважаемых веб-редакторов SVG: компактный интерфейс, кастомизируемые горячие клавиши, прямой доступ к исходному коду документа в боковой панели — правишь визуально и сразу видишь, что меняется в разметке. Это и есть главная причина выбирать Boxy SVG: вы работаете с реальным SVG-кодом, а не с абстракцией редактора. Доступен как PWA, как расширение Chrome и как нативка под десктоп. Платный тариф — около $10/год, дальше расширенные возможности.

MediaModifier

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

Pixelied

Похожая история: дизайн-комбайн для бизнес-задач (мокапы товаров, обложки соцсетей, баннеры), внутри есть и работа с вектором. Большая библиотека шаблонов и стоковых ассетов, AI-генератор картинок, удаление фона. Для чистого фронтенд-сценария «сделать SVG-иконку» избыточен, но если вы один на проекте и одновременно делаете рекламные креативы — экономит контекст-свитчинг.

Canva

Самый известный шаблонный редактор: тысячи макетов под Instagram, Facebook, постеры, презентации, лого, видео. Освоить можно за вечер, без художественного образования. Экспорт в SVG доступен только на платных тарифах. Если задача звучит как «сделать обложку статьи на сайт за 15 минут» — это про Canva, не про SVGEdit. Если нужно отрисовать аккуратную векторную иконку под спрайт — не сюда.

Vecteezy

Браузерный редактор от стокового сервиса Vecteezy: можно либо открыть готовый ассет из их библиотеки и допилить, либо нарисовать с нуля. Горячие клавиши, продвинутые трансформации, прямой экспорт — всё на месте. Хорошо стыкуется с их же стоком: нашёл подходящий вектор, открыл, поменял текст/цвета, забрал.

VectorInk

Делает ставку на AI: image-to-SVG, sketch-to-SVG, генератор иконок по текстовому описанию, AI-апскейл и in-painting. Из классики — шейп-билдер, перо, кривые Безье, паттерны на сетке и в радиальном массиве. Все иконки во встроенной библиотеке отдают как royalty-free под коммерческое использование, что для джуна на боевом проекте бывает важнее самого редактора. Экспорт в SVG, PNG, JPG.

Только по подписке

Janvas

Профессиональный SVG-редактор с подпиской от €6 в месяц (раньше брали €72 в год сразу). Полный набор геометрических инструментов, развёрнутые булевые операции над контурами (add, subtract, exclude, intersect, divide), нормальная работа со слоями и группами. Если вы рисуете лого и иллюстрации каждый день и нужна стабильность настольного инструмента, но в облаке — стоит посмотреть. На разовые правки переплачивать не имеет смысла.

Под анимацию SVG — SVGator

SVGator

Это уже не редактор статичного SVG, а полноценная таймлайн-анимация в браузере. Можно собрать анимированный логотип, иконку с микро-интеракцией или сложный сценарий с морфингом форм — и забрать на выходе либо анимированный SVG (с инлайн <animate> и CSS-анимациями), либо Lottie JSON, либо GIF/MP4. Бесплатный тариф с водяным знаком; без вотермарки — платно (Starter и Pro отдают от $20–$24 в месяц при годовой оплате). Альтернатива — писать @keyframes руками, чему мы и посвящали отдельную статью про CSS-анимации. SVGator выигрывает, когда анимация сложнее, чем покачивание прозрачности.

Бонус: AI-генератор скетчей AutoDraw

AutoDraw

Эксперимент от Google: вы рисуете каракулю мышкой или пальцем, нейросеть угадывает, что вы пытаетесь изобразить, и предлагает несколько готовых аккуратных иконок на замену. Это не редактор SVG в полном смысле — здесь нельзя редактировать пути и слои — но если нужно быстро накидать иконку под чёрно-белый интерфейс, экономит время на поиск стоков. Работает в любом современном браузере, ничего не требует.

После редактора: чистка и спрайт

Какой бы инструмент ни отдал вам файл — перед заливкой в продакшен прогоняйте его через оптимизатор. Среднестатистический «чистый» SVG из веб-редактора всё равно содержит лишние пустые группы, дробные координаты с десятым знаком после запятой и инлайн-стили, которые проще задать классом. SVGOMG делает это в браузере с превью и слайдерами на каждое правило; SVGO — то же самое из командной строки или как webpack/vite-плагин. Типичная экономия на иконке — от 20 до 60 процентов веса без визуальных потерь.

Если иконок много и они переиспользуются на сайте — собирайте их в один спрайт-файл через <symbol> и подключайте через <use>. Это и быстрее (один HTTP-запрос на все иконки сразу), и удобнее в правке.

И не забывайте, что иногда вектор — вообще лишняя сущность. Если нужно вырезать у блока угол, скруглить нестандартную форму или сделать маску — чистый CSS зачастую справляется без единого SVG-байта. Что выбрать в каждом конкретном случае, разбирали в материале «Вырезание элемента: CSS или SVG?»

Итого

Базовая дилемма при выборе сводится к двум вопросам. Что вы рисуете? Иконки и логотипы — SVGEdit, Method Draw, ArtDraw, Boxy SVG. Маркетинговые креативы под соцсети — Canva, Pixelied, MediaModifier. Анимированный SVG — SVGator. AI-помощь с набросками — AutoDraw. Сколько готовы платить? На разовые правки бесплатных инструментов хватает с большим запасом; если редактор векторов стал ежедневным — имеет смысл присмотреться к Boxy SVG или Janvas. И в любом случае финальный файл прогоняйте через SVGO — он сделает с весом то, чего не сделает ни один редактор.