Что такое SVG-редактор?

Рисуйте фигуры, контуры и текст на визуальном холсте, настраивайте цвета обводки и заливки и экспортируйте SVG-код. Без настольного ПО.

Инструменты: прямоугольник, эллипс, линия, свободный путь, текст, а также библиотека фигур (треугольник, шестиугольник, звезда, стрелка). Текст редактируется прямо на холсте — выберите инструмент «Текст» и набирайте, либо дважды кликните по существующему тексту, чтобы его изменить. У каждого элемента собственная заливка, цвет и толщина обводки, прозрачность, а в панели свойств можно ввести точные значения X, Y, ширины и высоты. Импортируйте готовый SVG одним кликом, привязывайте рисование к сетке в 10 пикселей и используйте отмену или повтор на пятьдесят шагов. Экспортируйте результат в обычную разметку SVG для HTML и React JSX или в растровый PNG для мест, где SVG не принимают.

Как использовать

1. Выберите инструмент рисования (прямоугольник, эллипс, линия, контур или текст) и рисуйте на холсте.
2. Выделяйте элементы для перемещения, изменения размера, поворота или изменения заливки, обводки и прозрачности.
3. Экспортируйте готовую графику как SVG-файл или скопируйте необработанную SVG-разметку.

Когда использовать

• Нарисовать разовый лого-знак, разделитель или фигуру для лендинга.
• Поправить готовый SVG вручную, не открывая тяжёлый десктоп-редактор.
• Преподавать основы SVG, показывая, как код меняется во время рисования.

Результат

Веб-разработчику нужен простой логотип — два перекрывающихся круга с градиентной заливкой. Он рисует фигуры на холсте, применяет цвета и копирует SVG-код прямо в свой HTML.

Частые вопросы

Можно ли скопированный SVG безопасно вставить прямо в JSX React?

В целом да, но: атрибуты вроде stroke-width и stop-color в JSX надо привести к strokeWidth и stopColor. Скопированный здесь SVG в kebab-case подходит для HTML напрямую и легко конвертируется через поиск с заменой.

Можно ли импортировать готовый SVG и продолжить редактирование?

Да — кнопка «Импорт SVG» загружает любой .svg-файл с вашего устройства. Прямоугольники, эллипсы, круги, линии, пути и текст становятся редактируемыми элементами на холсте. Градиенты, фильтры и вложенные группы пропускаются, потому что редактор хранит каждую фигуру как отдельный примитив.

Почему мой SVG в Illustrator или Figma выглядит иначе?

Разные рендереры по-своему трактуют выравнивание обводки, градиенты и фильтры. Вывод здесь соответствует тому, как рендерят все современные браузеры, то есть спецификации; различие обычно — интерпретация другой программы.

Поддерживает ли редактор кривые Безье с контрольными точками?

Инструмент свободного пути записывает точки и экспортирует их как ломаную. Для настоящих кубических кривых Безье экспортируйте SVG и поправьте атрибут d вручную или откройте результат в векторном редакторе с ручками.

Сколько элементов можно добавить, прежде чем холст начнёт тормозить?

Несколько сотен фигур комфортно идут на любом современном устройстве. Тысячи элементов (сложные карты, сетки иконок) уже тормозят, потому что каждое перетаскивание перерисовывает весь холст. Сводите графику в меньшее число составных путей..

Похожие инструменты