6 бесплатных онлайн SVG-редакторов сравнение


Содержание материала:

Программы для работы с SVG ↓

Данная статья поможет разобраться с вопросами:

  • Чем открыть SVG рисунок?
  • Чем отредактировать SVG рисунок?

Перед использованием любой программы для работы с рисунками .SVG, вы должны понимать, что файл рисунка представляет из себя набор обычных текстовых данных в формате XML, а это значит, что отредактировать изображение можно любым текстовым редактором. Смотрите синтаксис SVG, изучить его совсем несложно.

Чем открыть SVG рисунок?

SVG — формат, созданнй специально для Интернета, для описания векторных примитивов на веб-странице. Разумеется, среди программ-просмотрщиков SVG, флагманами выступают современные браузеры (последние версии Opera, Firefox, Chrome, а также IE 9 версии). Браузеры поддерживают почти все элементы SVG (в том числе SMIL анимацию и ECMAScript), уровень поддержки в Opera стремится к 100%.

Таблица, показывающая уровень поддержки SVG разными браузерами по состоянию на июль 2010 года:

Браузер Уровень поддержки
Opera 10.53 95 %
Chrome 4 82 %
Safari 4.0.5 82 %
Firefox 3.6 62 %
Internet Explorer 9 prev 3 52.55 %

Из этих данных следует, что открывать SVG лучше всего браузером Opera последней версии. Данный браузер имеет версии как для Windows, так и Linux, потому проблем не должно возникнуть ни у кого.

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

Чем отредактировать SVG рисунок?

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

Таблица со списком ПО для работы с векторной графикой, многие элементы списка поддерживают SVG:

Название Разработчик Цена
AutoTrace Martin Weber свободная
Easy Trace Easy Trace Group 1500 €, 750 € upgrade
Freehand Macromedia $399, $99 upgrade
Illustrator Adobe Systems $499, $169 upgrade
MagicTracer Elgorithms MagicTracer $59
MST Viewer MS Technology Commercial Use Only
PhotoLine Computerinsel GmbH 59 €
Potrace Peter Selinger свободная
R2V Toolkit AlgoLab $99
Ras2Vec Davide Libenzi свободная
Image2XAML Roman Kalachik свободная
Raster to Vector Raster to Vector $99
RasterVect RasterVect $79
RaveGrid RaveGrid свободная для персонального использования
(доступна коммерческая версия)
Scan2CAD Pro Softcover Intn’l $469, $190 upgrade
Silhouette Pro Free Soft S.A. $359
Adobe Streamline Adobe Systems ?
Vector Magic Vector Magic $7.95/mo, $295/lic, tokens
Vextractor VextraSoft $99
VPHybridCAD softelec $1400
WinTopo Freeware SoftSoft свободная
WiseImage Consistent Software $1400
RasVector Daniel Lu GPL
Xara Xtreme Xara Group Ltd. 79$ Windows версия,
Linux версия свободная
XTrace Ronny Schütz 25$ for Amiga (доступна демоверсия)
VectorNow AutoDWG $120.00
DesignPresentation DesignPresentation Pay Per Use

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

Inkscape (Инкскейп)

Inkscape — программа для создания и редактирования векторных изображений, основная сфера применения — создание технических иллюстраций и схем. Написана на C++ и GTK+. Умеет сохранять созданные изображения в формат SVG 1.1. Inscape выпускается для многих платформ (Windows, Linux, Mac OS), относится к категории свободного программного обеспечения, распространяется на основе лицензии GNU General Public License.

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

Inkscape активно развивается уже много лет, разработчики контактируют и обмениваются опытом с коллегами из Gimp, Scribus.

Бесплатно скачать Inkscape для любой ОС можно на официальном сайте inkscape.org.

Image Magick

Почти весь функционал консольной утилиты для работы с графикой Image Magick распространяется и на SVG. Image Magick бесплатна, для множества приложений существуют библиотеки, позволяющие контактировать с этой утилитой через собственный интерфейс. Например — Imagick в PHP.

Платные программы для работы с SVG

Adobe Illustrator CS2

Разработанная компанией «Adobe Systems, Inc.» программа Adobe Illustrator CS2 несет в себе достаточно мощные инструменты редактирования SVG. Программа не бесплатная и совсем недешевая, стоит больше 600 долларов, но имеет бесплатную демонстрационную версию, ограниченную 30 днями. На первый взгляд никаких особых преимуществ в области работы с SVG по сравнению с Inkscape не имеет, разве что любителям Photoshop понравится уровень сходства двух программ. Бсспорно, Adobe за долгое время своей работы создали самый удобный интерфейс для дизайнеров.

CorelDRAW Graphics Suite

С развитием SVG не могла остаться в стороне и Corel Corp. В состав пакета CorelDRAW Graphics Suite входит поддержка масштабируемой векторной графики. Стоимость — почти 300 долларов, но есть демонстрационная версия. Выпускается только для Windows.

Corel также предлагает купить Corel WebDraw (Jasc WebDraw), более ориентиванную на векторную веб-графику и профессиональных веб-дизайнеров программу. Стоимость — 180 долларов.

Sketsa SVG Editor

Программа полностью написана на Java, работает под Windows, Linux, Mac OS. В отличие от других программ для работы с векторной графикой в целом, Sketsa строго ориентирована на SVG. Имеет достаточно приятный и удобный интерфейс. Однако стоит почти 90 долларов.

Mayura Draw 4.3

Есть и более простые платные решения. Например — Mayura Draw за 39 долларов, размер дистрибутива — всего 1,3 мб. Программа поддерживает все основные инструменты для редактирования SVG графики, легкая и сравнительно быстрая.

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

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

SVG Editor/Viewer Online

What is SVG?

SVG means Scalable Vector Graphics, It is an XML-based vector image format for two-dimensional graphics. The advantage of the format is that it defined in XML text files. This means that they can be searched, indexed, scripted, and compressed, now WikiPedia.org’s graphic is SVG format.

The SVG Editor/Viewer Online will help you view the SVG code and preview what’s the code will display. what you need do is write code or open SVG file, click «draw» button to view the result.

svg-edit

Если вы хотите быстро вывести SVG или отредактировать существующий файл SVG, есть несколько онлайн-редакторов, которые будут выполнять эту работу так же хорошо, как Adobe Illustrator. Масштабируемая векторная графика (SVG) — это открытый формат, который позволяет программно воспроизводить векторные рисунки, и одним из самых приятных проектов является SVG-Edit. Он полностью построен на HTML5, CSS3 и JavaScript, не требуя обработки на стороне сервера. Таким образом, вы можете не только использовать его для создания и редактирования документов, но, поскольку он является открытым исходным кодом, вы также можете загружать и изменять код, создавая собственную версию, если хотите. SVG-edit — это кросс-браузерный веб-инструмент на основе JavaScript, который также был включен в надстройки браузера, такие как надстройка для Firefox, приложение Chrome,] и автономный виджет для Opera. Экспериментальное расширение для редактирования SVG в MediaWiki использует SVG-edit. Стандартный, хотя и базовый, набор инструментов для каждого редактора векторных изображений находится здесь, и хотя он ограничен форматом SVG, он удивительно способен.

Программа svg-edit
Лицензия Бесплатная
Исходный код Открытый
Официальный сайт

Найдено 16 аналогов svg-edit. Эти программы имеют схожий набор функций и отлично подходят для замены.

Найдено 23 похожих программ, которые могут быть использованы только в качестве частичной альтернативы svg-edit.

Работаем с векторной графикой онлайн

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

Раньше, чтобы работать с SVG-картинками, вам обязательно пришлось бы установить на свой компьютер одно из специализированных десктопных решений вроде Adobe Illustrator или Inkscape. Теперь же подобные инструменты доступны онлайн, без необходимости скачивания.

Как работать с SVG онлайн

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

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

Способ 1: Vectr

Продуманный векторный редактор от создателей знакомого многим сервиса Pixlr. Этот инструмент будет полезен как новичкам, так и опытным пользователям в работе с SVG.

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

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

Это не только позволит загружать результаты вашей работы на компьютер, но и в любой момент сохранять изменения в «облаке».
Интерфейс сервиса максимально прост и понятен: слева от холста расположены доступные инструменты, а справа — изменяемые свойства каждого из них.

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

  • Экспортировать готовое изображение можно, нажав на кнопку со стрелкой в панели меню справа.
  • В открывшемся окне определите параметры загрузки и щелкните «Download».
  • К возможностям экспорта относится также одна из наиболее отличительных возможностей Vectr — поддержка прямых ссылок на SVG-проект в редакторе. Многие ресурсы не позволяют загружать векторные картинки к себе напрямую, но тем не менее разрешают их удаленное отображение. В этом случае Вектр можно использовать как самый настоящий хостинг SVG, чего другие сервисы делать не позволяют.

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

    Топ-пост этого месяца:  Каталог товаров. Быстрое изменение цены

    Способ 2: Sketchpad

    Простой и удобный веб-редактор для создания SVG-изображений, основанный на платформе HTML5. Учитывая набор доступных инструментов, можно утверждать, что сервис предназначен исключительно для рисования. С помощью Sketchpad вы можете создавать красивые, тщательно проработанные картинки, но не более.

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

    1. Все что нужно для работы с редактором — браузер и доступ в сеть. Механизм авторизации на сайте не предусмотрен.
    2. Чтобы скачать готовую картинку на компьютер, нажмите на значок дискеты в панели меню слева, а затем выберите нужный формат во всплывающем окне.

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

    Способ 3: Method Draw

    Это веб-приложение предназначено для базовых операций с векторными файлами. Внешне инструмент напоминает десктопный Adobe Illustrator, но по части функционала здесь все значительно проще. Впрочем, есть в Method Draw и некоторые особенности.


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

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

    Для этого перейдите в «View»«Source…» или воспользуйтесь сочетанием клавиш «Ctrl + U».
    Закончив работу над картинкой, ее можно сразу сохранить на компьютер.

    Чтобы экспортировать изображение, откройте пункт меню «File» и нажмите «Save Image…». Либо же используйте шорткат «Ctrl+S».

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

    Способ 4: Gravit Designer

    Бесплатный веб-редактор векторной графики для продвинутых пользователей. Многие дизайнеры ставят Gravit в один ряд с полноценными настольными решениями, как тот же Adobe Illustrator. Дело в том, что этот инструмент является кроссплатформенным, то есть в полном объеме доступен на всех компьютерных ОС, а также в качестве веб-приложения.

    Gravit Designer находится в стадии активной разработки и регулярно получает новые функции, которых уже и так хватает для компоновки сложных проектов.

    Редактор предлагает вам всевозможные инструменты для рисования контуров, фигур, путей, наложения текста, заливок, а также различных настраиваемых эффектов. Имеется обширная библиотека фигур, тематических картинок и значков. Каждый элемент в пространстве Gravit имеет перечень свойств, доступных для изменения.

    Все это разнообразие «упаковано» в стильный и интуитивно понятный интерфейс, так, что любой инструмент доступен буквально в пару кликов.

      Чтобы приступить к работе с редактором, вам не обязательно создавать аккаунт в сервисе.

    Но если вы желаете использовать готовые шаблоны, придется завести бесплатную «учетку» Gravit Cloud.
    Для создания нового проекта с нуля в приветственном окне перейдите на вкладку «New Design» и выберите требуемый размер холста.

    Соответственно, для работы с шаблоном откройте раздел «New from Template» и выберите нужную заготовку.
    Gravit умеет автоматически сохранять все изменения при выполнении вами действий над проектом.

    Чтобы активировать эту возможность, воспользуйтесь сочетанием клавиш «Ctrl+S» и в появившемся окне дайте название рисунку, после чего щелкните по кнопке «Save».
    Итоговое изображение вы можете экспортировать как в векторном формате SVG, так и в растровых JPEG или PNG.

    Кроме того, есть вариант сохранения проекта как документ с расширением PDF.

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

    Способ 5: Janvas

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

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

    1. Для запуска веб-приложения в своем браузере перейдите по ссылке выше и щелкните по кнопке «Start to create».
    2. В новом окне откроется рабочая область редактора с холстом в центре и панелями инструментов вокруг него.
    3. Экспортировать готовое изображение можно лишь в выбранное вами облачное хранилище, и лишь в том случае, если вы приобрели подписку на сервис.

    Да, инструмент, к сожалению не бесплатный. Но это профессиональное решение, которое и пригодится далеко не каждому.

    Способ 6: DrawSVG

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

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

    Этот редактор, в отличие от большинства других, не похож на браузерный порт настольного приложения. Слева расположены основные инструменты для рисования, а сверху — элементы управления. Основное пространство занимает холст для работы с графикой.

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

    1. Для этого найдите в панели инструментов иконку «Save».
    2. По щелчку на этот значок откроется всплывающее окно с формой для загрузки SVG-документа.

    Введите желаемое название файла и нажмите «Save as file».

    DrawSVG можно назвать облегченной версией Janvas. Редактор поддерживает работу с атрибутами CSS, но в отличие от предыдущего инструмента, не позволяет анимировать элементы.

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

    Отблагодарите автора, поделитесь статьей в социальных сетях.

    SVG-EDIT. Обзор функциональности

    SVG-edit — это один из старейших браузерных редакторов svg, первая версия которого вышла в феврале 2009 года. Положительная отличительная особенность данного редактора состоит в том, что он полностью бесплатный. Домашняя страница проекта svg-edit homepage, там содержится много всевозможного контента, начиная от инструкций, заканчивая техническими деталями каждого релиза и информацией о возможных способах поддержки проекта (деньгами, тестированием, написанием нового кода и т.д.). В данной статье представлен список поддерживаемых приложением фич и обзор функционала создания svg файлов, описание возможностей кастомизации и детали администрирования вынесено в отдельную статью.

    Вам не нужно устанавливать что-то на свой компьютер, данный редактор работает полностью «online», всегда свежая версия доступна по ссылке SVG-edit official . Также вы можете найти актуальную оттестированную версию на этом сайте, в данной сборке svg-edit c дополнительными библиотеками атомарных объектов .

    Список функций SGV-edit

    • Библиотека примитивов (Shape library). Коллекция сложных Svg контуров для Вашего дизайна.
    • Добавление дополнительных элементов в библиотеку примитивов администратором
    • Библиотека составных картинок, хранимая на сервере
    • Интеграция с IAN Image Library, упрощенная возможность добавлять готовые бесплатные картинки в Ваши документы
    • Импорт растровых изображений
    • Экспорт в форматы: png ; jpeg ; bmp ; webp ; pdf
    • Сохранение svg файлов, открытие готовых svg файлов
    • Копирование форматирования объектов — инструмент Eye Dropper Tool
    • Работа с зоной рисования:
      • Перетаскивание активной видимой области. Инструмент panning
      • Изменение масштаба
      • Инструмент лупа.
    • Основные элементы рисования:
      • Карандаш. Рисование произвольных линий и контуров
      • Линия. Есть два режима: a) простая линия соединяющая произвольные точки; b) линия между объектами, перемещающаяся вместе со связанными объектами.
      • Прямоугольник. Есть 3 режима: a) прямоугольник; b) квадрат; c) прямоугольник от руки. Последний режим предполагает, что пользователю нужно обвести произвольно пространство, после чего программа вокруг обведенного создаст прямоугольник, в который вписывается обведенное пространство.
      • Эллипс. 3 режима: a) эллипс; b) круг; c) эллипс от руки.
      • Контуры. Создает замкнутый или разомкнутый контур, из отрезков прямых линий
      • Текст
      • Пятиугольник
      • Звезда
    • Настройка стилей элементов:
      • Цвет заливки, линейный и радиальный градиент
      • Цвет обводки
      • Толщина обводки
      • Стиль обводки. Прямая, штриховая, пунктирная и два вида штрихпунктирной.
      • Настройки стилей линий и их стыковки
      • Угол поворота
      • Эффект размытия
      • Прозрачность
      • Тип маркера на начальной, конечной, и серединной точки линейных элементов. (текст, стрелочки)
    • Относительное положение элементов друг относительно друга:
      • Поддержка слоев
      • Перемещение одного объекта над другим в пределах одного слоя.
      • Режим скетчей (wireframe). Элементы показаны без стилей, простыми рамками.
      • Выравнивание элементов. Друг относительно друга и относительно рабочей зоны рисования.
    • Действия undo/redo
    • Просмотр кода получающегося документа.
    • Преобразование фигур в контур (path)
    • Настройки и редактирование узлов контура

    Интерфейс и команды SGV-edit

    Основные элементы графического интерфейса svg-edit следующие:

    1. Зона рисования.
    2. Верхнее меню. Выпадающее главное меню (SVG-Edit) и набор инструментов, состав которых может меняться в зависимости от выбранного объекта и контента редактирования. В следующих разделах будет рассмотрено подробно.
    3. Панель инструментов. Левый «сайдбар», представлены основные кнопки создания элементов диаграммы.
    4. Панель управления форматированием. Позволяет менять цвета / стили заливки и окаймления элементов
    5. Панель управления слоями.


    Верхнее меню

    На следующей картинке показан вид основных кнопок верхнего меню:

    Вид меню зависит от контекста работы. Могут появляться дополнительные элементы управления в зависимости от текущего объекта, который вы редактируете. К примеру, если выделен прямоугольник, справа от основных появляются кнопки функций, позволяющие операции клонирования, удаления, изменения взаимного положения «по вертикали» относительно других элементов, управления углом поворота, редактирование размытия и т.д.

    Создать новое изображение. (New Image)

    Выбор данной команды, которую также можно вызвать сочетанием клавиш +N, предлагает убрать все с текущего рабочего экрана и создать новую, пустую картинку.

    Открыть изображение. (Open SVG)

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

    (Import Image)

    Команда, которая позволяет импортировать существующий svg файл, не перетирая при этом все что было нарисовано до ее выполнения. Импортированное изображения будет вставлено в верхний левый угол рабочей поверхности, поверх всех элементов текущего активного слоя. Если нужно поработать с отдельными элементами импортированного изображение, то необходимо выполнить команды «break link to reference element (make unique)»

    И/или команду «ungroup». Обе команды являются дополнительными и появляются в верхнем меню справа.

    Сохранить изображение. (Save Image)

    Скачивает содержание текущего документы в виде svg файла.

    Image Library (Библиотека изображений)

    Список подключенных библиотек. По умолчанию это локальная серверная библиотека, пополнение которой – обязанность администратора, а также бесплатная библиотека разных векторных и растровых документов, для доступа на которую нужно зарегистрироваться и авторизоваться.

    Export

    Позволяет экспортировать готовый документ в один из следующих форматов:png; jpeg; bmp; webp; pdf. Открывает новую закладку, на которой будет прорисовано изображение, которое нужно будет потом скачать средствами браузера. В случае экспорта в pdf, просто скачивает готовый файл.

    Свойства документа (Document properties)

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

    Editor options (Свойства редактора)

    Глобальные параметры редактора, как:

    • Язык интерфейса
    • Размеры значков команд на панелях инструментов
    • Цвет фона рабочего холста либо cссылка на документ с картинкой
    • Настройки линейки
    • Настройки сетки

    Сохранить (Apply Changes)

    Как вы знаете SVG картинка состоит из набора команд, которые поясняют графическому движку последовательность шагов для отрисовки изображения. Для редактирования скрипта изображения и предназначена эта команда. Она может активироваться горячей клавишей U. Функция полезна, когда нужно сделать какое-то действие, которое не поддерживается через графический интерфейс. После внесение изменений в текстовом в формате и сохранения результата, программа проводит проверку на целостность кода и перерисовывает картинку.

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

    Каркас (Wireframe Mode)

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

    Отменить (Undo)

    Возвращает картинку в состояние до последнего сделанного изменения. Горячая клавиша F.

    Примечание: SVG edit поддерживает множественную отмену.

    Вернуть (Redo)

    Команда обратна «отменить» — отменяет «отмененное изменение».

    Панель инструментов

    В левом сайдбаре расположена панель инструментов. В svg-edit v3.0 панель состоит из 14-ти значков:

    • Выделить
    • Карандаш
    • Линия
    • Прямоугольник
    • Эллипс
    • Контуры
    • Библиотека простых клипартов (shape library)
    • Текст
    • Изображение
    • Лупа
    • Полигон
    • Звезда
    • Перемещение (panning)
    • Перенос форматирования

    Выделить

    Горячая клавиша — V. Инструмент позволяет выделить один или несколько элементов рисунка. Выделяемыми элементами могут быть простые штрихи или комплексные объекты – группы простых элементов.

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

    Команды слева направо после undo:

    • Клонировать элементы (горячая клавиша — D)
    • Удалить элементы (с клавиатуры можно нажать или Delete, или Backspace)
    • Группировать/разгруппировать (горячая клавиша – G)
    • Сделать гиперссылку, после сохранения в готовом SVG документе элемент станет кликабельным.
    • 6 команд выравнивания (по левому краю; центрировать по вертикальной оси; по правому краю; по верхнему краю; центрировать по горизонтальной оси; по нижнему краю)
    • Настройки выравнивания. Например, если будет выбрана настройка «страница», то команда выравнивания «по нижнему краю» переместит выделенные квадраты к низу рабочей области.

    После группировки элементов, верхняя панель опять преобразовывается к следующему виду:

    Тут можно делать следующие действия:

    • Назначать id и класс элемента, для облегчения читаемости исходного кода.
    • Менять угол
    • Устанавливать коэффициент размытия
    • Позиционировать элементы. В этом случае все команды выравнивания находятся в выпадающем списке.
    • Выставлять относительные координаты на рабочей поверхности левого верхнего угла.
    • Выполнять разгруппировку.

    После выделения одного элемента, все настройки его форматирования (цвета, типы линий) устанавливаются в панели управления форматированием.

    Карандаш

    Горячая клавиша — Q. Есть два режима: a) простая линия соединяющая произвольные точки; b) линия между объектами, перемещающаяся вместе со связанными объектами.

    Линия

    Горячая клавиша — L . Рисует прямой отрезок линии между двумя заданными точками. Второй режим соединяет два выбранных объекта, при этом линия получается привязанной к объекту и перестраивается при перемещении любого из них.

    Прямоугольник

    Горячая клавиша – R. Поддерживается 3 режима: a) прямоугольник; b) квадрат; c) прямоугольник от руки. Последний режим предполагает, что пользователю нужно обвести произвольно пространство, после чего программа вокруг обведенного создаст прямоугольник, в который вписывается обведенное пространство.

    Эллипс / Circle / Free hands ellipse

    работает аналогично одноименному, уже описанному в разделе выше.

    Контуры

    Активируется горячей клавишей P. Позволяет рисовать полилинии и полигоны. Полилинии можно рассматривать как открытый полигон, где пропущена одна из сторон. Для того, чтобы нарисовать полигон, состоящий из трех вершин А, B, C, вы должны определить положение точек вершин А, B, C, а затем кликнуть на точку A снова. Чтобы нарисовать полилинию, состоящую из точек вершин А, B, C, вы должны определить положение точек вершин А, B, C, а затем кликнуть на точку С

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

    Библиотека простых клипартов

    По умолчанию библиотека содержи порядка 300 простых примитивов, которые можно использовать для создания ваших svg Документов. Разделы такие:

    • Basic: разные простые формы – концентрические окружности, треугольники, прямоугольники, ромбы стрелки и т.д.
    • Objects: мяч, молния, лампочка, облако, катана и т.д.
    • Symbols: самолет, зонт, инь-янь, радиация, глобус, вешалка и т.д.
    • Arrows: фигурные стрелки
    • Flowchart: элементы блок-схем
    • Animals: контуры диких и домашних животных
    • Cards and Chess: карты и шахматы
    • Dialog balloons: облачка с диалогами, как в комиксах
    • Electronics: Элементы схем электрических принципиальных
    • Mathematical: Заначки математических операций
    • Music: ноты, скрипичные ключи
    • Miscellaneous: разные значки, не попадающие в определённые категории, такие как кость, единорог, череп и т.д.
    • Raphaeljs.com set 1: набор дизайнерских значков, предоставленных Raphaeljs
    • Raphaeljs.com set 2: второй набор: набор дизайнерских значков, предоставленных Raphaeljs

    Библиотеку можно дополнять, инструкция как это делать будет вынесена в отдельную статью.

    Текст

    Горячая клавиша – T. Рисование текста. Доступные возможности форматирования текста:

    • Полужирное начертание
    • Курсив
    • 5 встроенных шрифтов

    Изображение

    Формат SVG позволяет интегрировать в документы растровые картинки. Для того чтобы это сделать, достаточно просто перетащить картинку в активное окно браузера где вы работаете. Данный способ хорош, если нужная картинка уже сохранена. Кроме того, есть кнопка на панели инструментов — в виде монитора. При нажатии на которую программа предлагает ввести url картинки из интернета с любого ресурса (скопировать можете кнопкой “copy image address”) картинка сразу загрузится в активное окно svg-edit, где вы с можете продолжить с ней работать. В таком способе не нужно тратить время на сохранение файла на локальный компьютер.

    Горячая клавиша – Z. Выделенный лупой кусок изображения растягивается на всю видимую область, так вы сможете оттьюнить детали.


    Полигон

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

    Звезда

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

    Перемещение (panning)

    При активном режиме перемещает рабочую область вместе со всем содержимым.

    Копирование стиля (Eye dropper tool)

    Горячая клавиша I . Позволяет переносить стиль оформления с одного объекта на другой. Для того чтобы воспользоваться:

    1. Нужно выбрать тот объект, с которого вы хотите перенести стиль
    2. Нажать кнопку этой функции
    3. Прокликать те объекты на которые вы планируете перенести форматирование.

    Панель управления форматированием

    Находится в нижней части окна. Доступны следующие функции:

    Изменить масштаб

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

    • размеры холста
    • размер выделенного
    • размер содержания слоя
    • размер всех слоев.

    Изменить цвет заливки

    Определяет цвет заливки, который будет использоваться для полигонов и полилиний. По клику на элемент контроля, система открывает диалог настройки цвета, где можно выбрать из предустановленных цветов, либо определить цвет чернил указав координаты RGB или HSB. SVG-edit поддерживает три разные стратегии закрашивания: сплошная одноцветная заливка, линейный градиент или радиальный градиент.

    Изменить цвет обводки

    Аналогично вышеприведенному, только определяет цвет границы полигонов и фигур.

    Изменить толщину обводки

    Изменяет толщину линий обводки.

    Изменить стиль обводки

    Меняет заливку обводки фигур и полигонов. Доступные опции — прямая, штриховая, пунктирная и два вида штрихпунктирной.

    Стиль стыковки линий (linejoin)

    Стыкуемые линии могут быть с заостренными краями, а также со скругленными или слегка обрубленными.

    Стиль открытых линий

    Прямые линии, не закрытые в полигон при увеличении, могут выглядеть как прямоугольник. Данная функция может переопределить стиль линий на закругленный.

    Изменить непрозрачность элемента.

    Установка уровня полупрозрачности.

    Традиционный набор цветов

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

    Панель управления слоями

    Организация SVG картинок основана на слоях. Вы можете выделить слой для фона и один или нескольких слоев для основной картинки. К примеру картинка ниже состоит из 4-ч уровней: фон, дом, машина и семья.

    Слои помогают реализовать динамику (движение) попросту сменяя один слой другим, без необходимости перерисовывать целую картину. Внедрение уровне позволяет упростить работу с документом, поскольку ускоряет выделение объектов в документе в условиях множества пересекающихся форм. Чтобы открыть панель управления слоями, нужно кликнуть на надписи Layers, или потянуть границу налево.

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

    Над формой со списком слоев расположена панель с кнопками:

    Создать слой

    Данная кнопка создает новый (пустой) слой поверх существующего стэка слоев и выбирает его для редактирования.

    Удалить слой

    Опция удаляет выбранный слой. Вместе со всем его содержимым.

    Переименовать уровень

    По умолчанию система предлагает создать новый слой с наименованием » » : “Слой 1”, “Layer 2” и т.д. Новое имя можно определить при создании, или в любой другой момент, с использованием данной функции.

    Поднять уровень выше

    Функция позволяет переместить выбранный уровень на передний план или ближе к нему.

    Опустить слой

    Функция позволяет переместить выбранный уровень на задний план или ближе к нему.

    Модификаторы выбранного объекта

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

    Клонировать элемент

    Создает копию выбранных элементов.

    Удалить элемент.

    Удаляет выбранные элементы.

    Переместить наверх

    Инициирует переопределение относительного положения объектов друг над другом, относящихся к текущему активному уровню.

    Переместить вниз

    Инициирует переопределение относительного положения объектов друг над другом, относящихся к текущему активному уровню.

    В контур

    В спецификации svg конур (path) является универсальным элементом, которым можно описать любые примитивы. При этом спецификация содержит возможность описания примитивов другими средствами. Данная кнопка преобразует те, другие примитивы (прямоугольник, звезду, многоугольник, и т.д.) в контур.

    Изменить угол поворота

    Когда вы добавляете новый объект на холст, например, прямоугольник или эллипс, он ориентирован стандартно — параллельно осям X и Y. SVG-edit предлагает два различных способа для изменения угла наклона. a) вы можете просто выделить, объект установить курсор в зелёный рычажок над прямоугольников выделения точку и повернуть элемент на нужный угол вручную; b) или вы можете установить угол поворота используя поле в верхней панели управления — задать точное значение угла поворота в градусах.

    Настроить размытие элемента (Change gaussian blur value)

    Данная функция позволяет устанавливать эффект размытия для элемента картинки имитируя затуманенность или задымленность.

    Выровнять положение элемента (Align element to page)

    Данный выпадающий список содержит 6 функций которые позволяют выровнять элементы относительно страницы:

    • по левому краю
    • центрировать по вертикальной оси
    • по правому краю
    • по верхнему краю
    • центрировать по горизонтальной оси
    • по нижнему краю

    Установить координату X

    Позволяет устанавливать точное положение левого края прямоугольника выделения относительно левого края холста

    Установить координату Y


    Позволяют устанавливать точное положение верхнего края прямоугольника выделения относительно верхнего края холста

    Редактирование контуров

    Двойной Клик мыши на объекте контуре (path) позволяет перейти к режиму редактирование узлов контура которой показана на рисунке ниже.

    Основные элементы управления на панелях управления в таком режиме следующие:

    1. Измененный значок функции «выбрать». Лазурная точка над стрелкой показывает, что включен именно режим редактирования узлов.
    2. Функция связать узлы
    3. Установка координаты по горизонтали для выбранной ноды
    4. Установка координаты по вертикали выбранной ноды
    5. Модификатор установить тип сегмента – определяет тип отрезка до следующей ноды. Это либо сплайн (кривая), либо отрезок (прямая)
    6. Функция создать копию узла
    7. Функция удалить узел
    8. Функция открыть/закрыть саб-контур (subpath)
    9. Функция добавить саб-контур (subpath)

    Связать узлы

    После активации функции редактирования контуров система подсвечивает все узлы данного контура голубыми точками с синими каемками. Для каждого узла существуют две контрольные точки, которые определяют характеристики отрезка, находящегося в соответствующей стороне от узла. Контрольные точки могут быть связанными, в этом случае если мы поворачиваем одну контрольную точку, то вторая тоже поворачивается таким образом, что обе контрольные точки находятся на одной линии с узлом и противоположны друг другу (пример на рисунке выше – точка А). Также контрольные точки могут быть не связанными, в данном режиме при повороте одной контрольной точки вторая не двигается (пример на рисунке выше – точка Б). Переключение режимов между связанными и не связанными контрольными точками является функция о которой идет речь в данном параграфе.

    Установить координату X

    Позволяет установить расположение узла по горизонтали относительно левого края с точностью вплоть до одного пикселя.

    Установить координату Y

    Позволяет установить расположение узла по вертикали относительно верхнего края с точностью вплоть до одного пикселя.

    Установить тип сегмента

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

    Создать копию узла

    Добавляет дополнительный узел в середине выбранного отрезка.

    Удалить узел

    Удаляет выбранный узел

    Открыть/закрыть саб-контур

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

    Добавить саб-контур

    Возможность дорисовать контур, начиная с выбранной

    Декорирование линий

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

    Три кнопки с выпадающим списком работают однотипно, позволяя выбирать тип начального, конечного и серединного маркера.

    Как нарисовать стрелку в svg-edit

    Для того, чтобы нарисовать стрелку, для начала нужно нарисовать отрезок, используя инструмент «Линия», далее нужно выбрать оконечный маркер, который показан на рисунке выше

    SVG-Edit — онлайновый векторный редактор

    SVG-Edit — э то действительно быстрый, о снованный на веб-технологиях, векторный редактор, использующий только JS, HTML, CSS и SVG. Редактор полноценно работает с файлами SVG, давая возможность как сохранять проекты в этом формате, так и о ткрывать такие файлы и вносить в них изменения. Кроме этого, файл SVG может быть импортирован в проект как отдельный элемент.

    В программе большая библиотека готовых форм, но, кроме этого, реализован доступ к огромной бесплатной библиотеке элементов векторной графики IAN Image Library. Для работы с ней потребуется регистрация, но затем можно прямо из редактора просматривать коллекции образцов векторной графики и сразу же добавлять их в текущий или в новый проект.

    SVG-Edit работает бесплатно, без регистрации и на русском языке. Им м ожно пользоваться прямо онлайн, ничего не устанавливая, не ставя никаких лишних плагинов, и это работает во всех современных браузерах. Единственное требование – наличие активного подключения к Интернету. Нет смысла загружать свой персональный компьютер различными программами.

    Редакторы SVG

    SVG — это формат двухмерной векторной графики, который был создан консорциумом World Wide Web Consortium (W3C). Он разрабатывался как стандартный формат для отображения векторной графики в интернете. Формат описывает векторные изображения с помощью языка разметки, основанного на XML.

    SVG является открытым форматом, в создании которого главную роль сыграла компания Adobe (Adobe совместно с W3C). Исходя из этого, SVG файлы поддерживаются некоторыми программами из Adobe Creative Suite (Illustrator и GoLive). Adobe Photoshop встроенной поддержки SVG не имеет, но эту проблему можно решить с помощью плагина «SVG Kit for Adobe CS», разработанного компанией Scand.

    Что касается сторонних программ, которые позволяли бы редактировать графику в формате SVG, то таких программ достаточно много и есть из чего выбирать. Прежде всего, обратите внимание на такие редакторы SVG файлов, как Inkscape и GIMP. Эти редакторы работают с векторной графикой, обладают широкими возможностями (на уровне с Photoshop) и к тому же бесплатны. Такие инструменты, как ABViewer и XnView представляют собой средства просмотра графики с поддержкой некоторых функций редактирования, и могут быть полезны в тех случаях, когда сложное редактирование не требуется.

    SVG-Edit — рисуем в онлайн, рисуем в офлайн

    Встречаем новую версию (2.4) открытого векторного редактора SVG-edit.

    Это действительно быстрый, основанный на веб-технологиях, векторный редактор, использующий только JS, HTML, CSS и SVG.

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

    Фишки

    • Free-hand drawing
    • Line tool
    • Rect/Square tool
    • Ellipse/Circle tool
    • Text tool
    • Color palette/picker
    • Save drawing to SVG
    • Select/drag/resize elements
    • Multiselect Elements
    • Undo/Redo
    • Rotate tool
    • Polygon/Polyline Editing
    • Linear Gradient Picking
    • View and Edit SVG Source
    • Clone tool
    • Align tool
    • Raster Images
    • Group/Ungroup
    • Zoom
    • Layers
    • Curved Paths
    • UI Localization
    • Wireframe Mode
    • Change Background
    • Draggable Dialogs
    • Resizable UI (SVG icons)
    • Convert Shapes to Path

    А самое интересное, его можно использовать и офлайн.
    Есть даже расширение для FF и виджет для Opera.

    прикладная математика

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

    SVG-редактор: веб-приложение, предназначенное для базовой работы с векторными рисунками в формате SVG. В редакторе имеется возможность открывать обычные растровые изображения и создавать на их основе векторные рисунки. Стилизован под Adobe Illustrator.

    Функционал: палитра, встроенная библиотека клипарта, перо, карандаш, пипетка, эллипс и прямоугольник, классический инструмент выбора объекта. Поддерживается масштабирование, повтор и отмена действий, размытие, выравнивание, изменение размера рисунка, толщины карандаша, добавление произвольного текста, регулирование уровня прозрачности, изменение очередности слоев, использование линейного и радиального градиентов. Векторные иллюстрации можно создавать с нуля, выбирая нужные размеры холста и орудуя лишь одним пером. Из дополнительных возможностей редактора можно отметить перевод изображения в контур, а также просмотр «исходного кода» SVG.

    Редактор | SVG Готовое векторное изображение можно сохранить в файл формата SVG, но чтобы скачать результат работы на компьютер, сначала в меню нужно выбрать «Save image», а затем нажатием клавиш Ctrl + S сохранить открывшуюся в новой вкладке браузера страницу с изображением как SVG-файл.

    Какие программы и генераторы можно применять для облегчения написания кода svg

    Какую посоветуете программу для SVG?

    Желательно с «генерацией кода» HTML, если есть такое.

    Автор вопроса видимо имел ввиду программы для помощи в написании кода svg

    1 ответ 1

    Вопрос немного некорректен.
    Автору, если я правильно понял вопрос нужны инструменты, которые облегчают написание кода SVG.

    Очень удобная вещь.

    Перемещаете узловые точки, двигаете рычаги, а внизу пишется код патча.

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

    Полученный код из генераторов, в период освоения SVG, лучше добавлять инлайн способом, то есть непосредственным копированием в HTML

    Копируете формулу path и получаете его максимальную длину.

    Вычисление длины path необходима для написания кода анимации рисования линий, посредством изменения атрибута stroke-dasharray

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

    Быстрый, многофункциональный векторный редактор

    Генераторы clipPath

    Генераторы базовых фигур SVG

    Генераторы кривых Безье

    Принцип для всех, вышеперечисленных генераторов svg кода одинаков: двигаете узловые точки, перемещаете их рычаги и копируете код SVG.

    Процесс использования генераторов нагляден, удобен, сразу видно какие атрибуты path динамически изменяются. Что помогает понять, как они работают.
    Также их выгодно применять, так как на выходе получается чистый код, без добавления служебной информации, которую вносят векторные редакторы в файл SVG

    Конвертер SVG path

    Преобразует все команды либо в относительную, либо в абсолютную форму записи.

    Инструменты разработки

    К сожалению ничего, такого, специализированного нет. Да в принципе и не нужно особо.
    Так как svg легко правится в текстовом редакторе, например: Notepad++
    Рисовать сложные фигуры можно в векторных редакторах: Inkscape , Adobe Illustrator .

    Для рисования простых фигур есть и такие редакторы:

    Оптимизаторы кода SVG

    • SVGOMG — автор Jake Archibald
    • SVG Editor — автор Peter Collingridge
    • SVGO-GUI — автор GreLI

    Мне особенно нравится SVG Editor и его в основном использую, практически на каждом приложении.

    Убирается вся лишняя, служебная информация, можно задать количество знаков после запятой у path .
    Размер файла svg порою сокращается в несколько раз и код становится читабельным.

    Топ-пост этого месяца:  Обзор Chrome DevTools рекомендации по использованию панели Элементы, поиск и другие функции
    Добавить комментарий