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

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

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

в начало

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

в начало

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

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

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

Верхнее меню

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

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

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

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

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

Сочетание «горячих клавиш» <CTRL>+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

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

в начало