Как редактировать SVG онлайн

Способ 1: Method Draw

Векторный редактор Method Draw обладает основным набором инструментов, предназначенных для рисования и редактирования уже существующих файлов. С его помощью можно быстро открыть SVG и внести должные изменения, что выглядит следующим образом:

Перейти к онлайн-сервису Method Draw

  1. Щелкните по кнопке выше, чтобы сразу запустить графический редактор. В нем вызовите меню «File» и выберите вариант «Open SVG».

    Переход к открытию файла для редактирования SVG-файла через онлайн-сервис Method Draw

  2. В открывшемся окне «Проводника» отыщите подходящий SVG-файл и дважды кликните по нему для добавления.

    Открытие файла для редактирования SVG-файла через онлайн-сервис Method Draw

  3. Обратите внимание на название проекта и параметры холста справа: вы можете изменить размер вручную, выбрать цвет фона или пресет, развернув соответствующий список.

    Настройки проекта и холста для редактирования SVG-файла через онлайн-сервис Method Draw

  4. Палитра расположена внизу, поэтому для выбора конкретного оттенка понадобится нажать по нему левой кнопкой мыши.

    Панель с цветами для редактирования SVG-файла через онлайн-сервис Method Draw

  5. Слева представлена панель с основными инструментами рисования и редактирования. Добавляйте обычные линии, геометрические фигуры и текст.

    Основная панель инструментов для редактирования SVG-файла через онлайн-сервис Method Draw

  6. Кликните по любому из объектов ЛКМ, чтобы отобразить точки трансформирования и дополнительные параметры редактирования справа. Изменяйте объекты так, как это нужно именно вам.

    Редактирование объекта для редактирования SVG-файла через онлайн-сервис Method Draw

  7. Обратите внимание на то, что при рисовании фигур или линий толщина и тип обводки настраиваются с помощью двух последних настроек вручную.

    Добавление фигур для редактирования SVG-файла через онлайн-сервис Method Draw

  8. В случае с текстом появляются дополнительные настройки, отвечающие за сам шрифт, его размер и стиль.

    Добавление текста для редактирования SVG-файла через онлайн-сервис Method Draw

  9. Откройте меню «Object», если надо изменить ориентацию, сгруппировать несколько элементов, отменить группировку или конвертировать их.

    Инструменты верхней панели для редактирования SVG-файла через онлайн-сервис Method Draw

  10. Почти то же самое можно сделать, вызвав контекстное меню кликом ПКМ по необходимому объекту.

    Инструменты контекстного меню для редактирования SVG-файла через онлайн-сервис Method Draw

  11. По завершении редактирования откройте уже знакомое меню «File» и сохраните картинку. Если нужно экспортировать изображение не в SVG, а в PNG, щелкните по «Export as PNG».

    Переход к сохранению для редактирования SVG-файла через онлайн-сервис Method Draw

Способ 2: Boxy SVG

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

Перейти к онлайн-сервису Boxy SVG

  1. На главной странице сайта нажмите кнопку «Launch App», чтобы запустить редактор.

    Переход к редактору для редактирования SVG-файла через онлайн-сервис Boxy SVG

  2. В нем разверните меню «File» и выберите пункт «Open from Disk».

    Переход к открытию изображения для редактирования SVG-файла через онлайн-сервис Boxy SVG

  3. Отыщите в «Проводнике» файл для открытия и дважды кликните по нему, чтобы выбрать.

    Открытие изображения для редактирования SVG-файла через онлайн-сервис Boxy SVG

  4. Нажмите по текущей группе объектов левой кнопкой мыши, после чего передвиньте в подходящую позицию или измените размер.

    Выбор объекта для редактирования SVG-файла через онлайн-сервис Boxy SVG

  5. Обратим внимание, что в некоторых случаях группу можно разгруппировать и получить возможность управлять каждой составляющей отдельно. Для этого вызовите меню «Objects» и посмотрите, есть ли в каталоге «Group» несколько частей, которые можно было бы разъединить.

    Просмотр группы объектов для редактирования SVG-файла через онлайн-сервис Boxy SVG

  6. Используйте инструмент рисования с автоматическим заполнением, создавая необходимое количество точек и формируя требуемую фигуру.

    Добавление фигур для редактирования SVG-файла через онлайн-сервис Boxy SVG

  7. Разверните меню заливки, чтобы выбрать цвет и тип заполнения. Это осуществляется через ту же панель справа.

    Управление заливкой для редактирования SVG-файла через онлайн-сервис Boxy SVG

  8. Следующий инструмент — «Stoke» — предназначен для выбора цвета и типа границы.

    Управление линиями для редактирования SVG-файла через онлайн-сервис Boxy SVG

  9. Если нужны не прямые, а произвольные линии, выберите другой инструмент и точно так же создайте необходимый рисунок.

    Произвольная линия для редактирования SVG-файла через онлайн-сервис Boxy SVG

  10. Остальные опции функционируют так же, как и в обычном графическом редакторе, создают различные геометрические фигуры и добавляют текст.

    Другие инструменты сайта для редактирования SVG-файла через онлайн-сервис Boxy SVG

  11. Работа с точками осуществляется через меню «Shape», где вы увидите различные виды действий, которые можно применить в любой момент, достигнув тем самым соответствующего эффекта скругления, объединения или разъединения.

    Управление точками для редактирования SVG-файла через онлайн-сервис Boxy SVG

  12. В Boxy SVG присутствует встроенная библиотека с векторными, растровыми рисунками и фонами. В ней есть и поиск, чтобы вы могли быстро отыскать картинку по теме.

    Использование библиотеки для редактирования SVG-файла через онлайн-сервис Boxy SVG

  13. Поддерживаются горячие клавиши, отвечающие за вызов инструментов редактирования, управлением объектов или точками. Комбинации написаны прямо напротив пунктов меню верхней панели.

    Меню инструментов сверху для редактирования SVG-файла через онлайн-сервис Boxy SVG

  14. По окончании взаимодействия с онлайн-сервисом выберите вариант экспорта «Export to Disk», чтобы сохранить SVG на компьютере.

    Переход к сохранению после редактирования SVG-файла через онлайн-сервис Boxy SVG

  15. Появится отдельное окно с настройками, где можно выбрать захватываемую область, самостоятельно изменить высоту и ширину, выбрать тип цветов, добавить фон и указать DPI.

    Параметры экспорта после редактирования SVG-файла через онлайн-сервис Boxy SVG

Способ 3: Vector Paint

Vector Paint — более простой сайт, предназначенный для работы с векторной графикой. Предлагает пользователю только основной набор инструментов рисования и редактирования, однако во многих случаях этого вполне достаточно для того, чтобы внести минимальные изменения в существующий SVG-файл.

Перейти к онлайн-сервису Vector Paint

  1. Перейдя по ссылке выше, вы сразу попадаете на страницу редактора, на которой предстоит открыть меню «File» и нажать «Open SVG».

    Открытие изображения для редактирования SVG-файла через онлайн-сервис Vector Paint

  2. После добавления файла нажмите по объекту ЛКМ, чтобы изменить его размер или перенести в другую позицию на холсте.

    Выбор объекта для редактирования SVG-файла через онлайн-сервис Vector Paint

  3. Активируйте любой из инструментов рисования и проверьте, как добавляются линии.

    Основные инструменты рисования для редактирования SVG-файла через онлайн-сервис Vector Paint

  4. При помощи панели справа вы управляете цветом заливки, линий и их типом. Под палитрами находится выпадающее меню для выбора толщины линии, которое можно сразу и не заметить.

    Палитра с цветами для редактирования SVG-файла через онлайн-сервис Vector Paint

  5. Отметим особенность Vector Paint — возможность загрузки одного изображения поверх другого с предварительным выбором области. Для этого активируйте последний инструмент из списка и создайте прямоугольник в соответствии с размерами будущей картинки.

    Добавление изображения для редактирования SVG-файла через онлайн-сервис Vector Paint

  6. После этого выберите данную фигуру и на панели справа щелкните по кнопке «Change Image».

    Переход к выбору второго изображения для редактирования SVG-файла через онлайн-сервис Vector Paint

  7. Добавьте еще один файл формата SVG и настройте его расположение. Вы можете сделать его любого размера, ведь при масштабировании векторные картинки не теряют качество.

    Выбор второго изображения для редактирования SVG-файла через онлайн-сервис Vector Paint

  8. Откатывайте действия или работайте со слоями при помощи панели вверху. Больше на ней никаких полезных инструментов нет.

    Панель инструментов сверху для редактирования SVG-файла через онлайн-сервис Vector Paint

  9. Если на этом взаимодействие с сайтом окончено, разверните меню «File» и скачайте результат в виде того же SVG-файла либо используйте импорт в JPG/PNG.

    Сохранение изменений после редактирования SVG-файла через онлайн-сервис Vector Paint

Способ 4: Janvas

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

Перейти к онлайн-сервису Janvas

  1. Откройте главную страницу сайта и нажмите кнопку «Open Janvas».

    Переход к редактору для редактирования SVG-файла через онлайн-сервис Janvas

  2. Разверните меню «File» и выберите пункт «Open».

    Переход к выбору изображения для редактирования SVG-файла через онлайн-сервис Janvas

  3. Отыщите векторное изображение в «Проводнике» и дважды кликните по нему ЛКМ.

    Выбор изображения для редактирования SVG-файла через онлайн-сервис Janvas

  4. Выделите текущую группу объектов, поверните ее, перетащите или измените размер. Делайте более точную трансформацию при помощи группы настроек справа.

    Выбор объекта для редактирования SVG-файла через онлайн-сервис Janvas

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

    Инструменты рисования для редактирования SVG-файла через онлайн-сервис Janvas

  6. Обратите внимание, что при добавлении линии всегда показываются направляющие, а также обозначается текущий градус, что позволит соблюсти правильность пропорций.

    Использование направляющих для редактирования SVG-файла через онлайн-сервис Janvas

  7. После вы можете добавить необходимое количество точек, скруглить их, соединить или придать нужный угол.

    Управление точками для редактирования SVG-файла через онлайн-сервис Janvas

  8. На следующем скриншоте вы наглядно видите, как работает такое редактирование, — следует лишь зажать конкретную точку и слегка потянуть, отслеживая изменение линии.

    Пример управления точками для редактирования SVG-файла через онлайн-сервис Janvas

  9. На этой же панели ниже представлены другие инструменты в виде пипетки, заливки, поворота и отражения.

    Другие инструменты сайта для редактирования SVG-файла через онлайн-сервис Janvas

  10. Дополнительные настройки фигуры осуществляются при помощи панели справа. Можно применить различные эффекты, выполнить трансформацию или изменить толщину линии.

    Дополнительные настройки для редактирования SVG-файла через онлайн-сервис Janvas

  11. На верхней панели есть стандартные меню для управления группам объектов и редактированием выделенного.

    Использование верхнего меню для редактирования SVG-файла через онлайн-сервис Janvas

  12. По завершении нажмите кнопку «Save (download)» из меню «File», чтобы скачать результат.

    Сохранение результата редактирования SVG-файла через онлайн-сервис Janvas

Поделиться статьей в социальных сетях:

Оставить комментарий

Сообщить об ответе на E-mail.