Свои SVG-фигуры draw.io: изображения или трафареты?

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

Эти варианты решают разные задачи. Сохранение SVG в библиотеке само по себе не превращает его контуры в фигуру формата draw.io. Справочник draw.io по пользовательским фигурам различает встроенные изображения и фигуры, заданные его форматом XML.

Если схемы написаны в Mermaid, используйте процесс собственного набора SVG-иконок для регистрации графики, сохраняя подписи и соединители в исходнике схемы.

Выберите поведение перед преобразованием графики

Представьте небольшой символ устройства: прямоугольный корпус с одним круглым индикатором. Вы хотите повторно использовать его в нескольких схемах процессов.

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

Вставьте SVG, если достаточно его внешнего вида

Официальное руководство вставки SVG описывает перетаскивание SVG-файла с компьютера на холст. Также можно использовать Arrange → Insert → Image. При запросе выберите Actual Size, затем измените размер вставленной графики по необходимости.

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

Храните редактируемый исходник графики отдельно. Если нужно переместить круг внутри устройства, измените это в исходном редакторе и замените изображение для передачи. Не тратьте время на поиск команды Ungroup лишь потому, что SVG содержит несколько видимых частей. Наше руководство по объектам SVG и разгруппировке объясняет влияние структуры файла на такие ожидания.

Обычный рисунок SVG целой схемы тоже требует внимания. Руководство вставки draw.io объясняет, что обычный SVG не содержит информации о соединителях для восстановления редактируемой схемы. Сохраняйте исходный файл схемы, если он есть.

Перекрашивание встроенного SVG имеет собственные требования

Draw.io даёт ограниченную связь встроенной графики SVG со своими настройками цвета. Руководство по цветам встроенного SVG использует правила CSS внутри SVG и настройку editableCssRules в стиле вставленного объекта. Возможность относится к встроенным изображениям, а не подключённым ссылкой.

Для SVG, уже структурированного правилами CSS, выберите вставленное изображение, откройте Edit Style и добавьте:

editableCssRules=.*;

Документированный шаблон выбирает все подходящие правила. Он должен находиться в стиле объекта draw.io, а не строкой в разметке рисунка SVG.

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

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

Используйте трафарет в формате draw.io для явно заданной фигуры

Трафарет в формате draw.io описывает фигуру в синтаксисе XML draw.io. Это не SVG-файл, переименованный в .xml. Урок по пользовательским фигурам использует Arrange → Insert → Shape для открытия редактора фигуры и Preview для проверки определения.

Вот небольшой оригинальный пример для создания символа устройства:

<shape name="two-port-device" w="100" h="60" aspect="fixed" strokewidth="inherit">
  <connections>
    <constraint x="0" y="0.5" perimeter="0" name="left"/>
    <constraint x="1" y="0.5" perimeter="0" name="right"/>
  </connections>
  <background>
    <rect x="0" y="0" w="100" h="60"/>
  </background>
  <foreground>
    <fillstroke/>
    <ellipse x="40" y="20" w="20" h="20"/>
    <stroke/>
  </foreground>
</shape>

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

Справочник XML задаёт относительные координаты соединений. С perimeter="0" эти два ограничения размещают точки в серединах левого и правого краёв. Он также требует операцию окрашивания фоновой геометрии в начале секции foreground, поэтому fillstroke находится там.

Просмотрите фигуру, добавьте её в тестовую схему и попробуйте реально нужное поведение:

1. Измените цвет заливки и линии.
2. Прикрепите соединитель к каждой нужной середине.
3. Переместите устройство и проверьте оба прикрепления.
4. Измените размер и проверьте круг, очертание и положения соединителей.

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

Сохраните библиотеку после проверок элемента

Библиотека — этап повторного использования. Руководство по пользовательским библиотекам описывает File → New Library, выбор места хранения и добавление изображений или перетаскивание фигур с холста. Пользовательские библиотеки используют расширение .xml.

Сохраните устройство с именем, объясняющим содержимое, например «Иллюстрация устройства» или «Устройство с двумя портами». Храните их отдельными записями, если полезны оба.

Затем откройте новую схему и вставьте сохранённый элемент. Повторите одну значимую правку: перекрасьте графику, если это настроено, или прикрепите соединитель к трафарету формата draw.io. Это выявляет библиотеку с более ранним вариантом символа.

Одно имя .xml не показывает, задана ли геометрия элемента средствами draw.io. И библиотека, и определение трафарета используют XML, но библиотека может содержать изображения, группы, пользовательские фигуры или целые схемы. Проверяйте поведение вставленного элемента.

Восстанавливайте растр лишь при необходимости векторного оригинала

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

Это даёт исходник для проверки внешнего вида. Он не определяет левый и правый порты устройства, смысл соединителей или XML-трафарет в формате draw.io. Создайте их намеренно, если схема требует этого.

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

Если SVG всё ещё становится пиксельным при увеличении, проверьте встроенный растр через диагностику растровых изображений SVG. Обзор векторизации изображений объясняет более общее различие сохранения пикселей и восстановления фигур.

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

Делает ли импорт SVG его трафаретом формата draw.io? Нет. Процесс вставки изображения встраивает графику. Трафарет в формате draw.io использует XML-определение фигуры draw.io для геометрии, стилей и точек соединения.

Можно ли менять цвета встроенного SVG? Draw.io описывает изменение цвета через подходящие правила CSS SVG и настройку editableCssRules в стиле вставленного объекта. Проверьте структуру исходника и настройки после вставки.

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

Создаст ли векторизация PNG точки соединения схемы? Нет. Векторизация может восстановить контуры графики. Определите точки соединения и поведение схемы средствами draw.io отдельно, если они нужны.

Источники

1. draw.io — Insert SVG images into a diagram — Вставка изображений, размеры и ограничение восстановления соединителей схемы из SVG.
2. draw.io — Create and edit complex custom shapes — Геометрия в формате XML draw.io, ограничения соединений и операции рисования.
3. draw.io — Edit colours in embedded SVG images — Редактирование правил CSS и требования к встроенным и связанным изображениям.
4. draw.io — Create custom shapes — Редактор трафаретов, процесс просмотра и стили по умолчанию.
5. draw.io — Work with custom shape libraries — Создание, сохранение и повторное использование смешанных элементов библиотеки.

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