draw.ioの独自SVG図形：画像とステンシルを選ぶ

draw.ioで独自のSVG図形を使うには、挿入後に何を変えたいかを決めます。アートワークの外観が必要なら埋め込みSVG画像が有用です。図の形状、スタイル、特定の接続点を定義するには、ネイティブのXMLステンシルを使います。独自のライブラリーにはどちらも再利用用に格納できます。

これらは異なる問題を解決します。SVGをライブラリーに保存するだけでは、パスが図本来のシェイプになるわけではありません。draw.ioの独自図形リファレンスは、埋め込み画像とXML形式で定義した図形を区別しています。

Mermaidで図を書く場合は、独自SVGアイコンパックの手順でアートワークを登録し、ラベルとコネクターを図のソース内に保持します。

変換前に必要な動作を選ぶ

長方形の本体と一つの丸い表示器がある小さな機器記号を考えます。いくつかのプロセス図で再利用したいとします。

プレゼンテーション用の図では外観の統一だけで十分かもしれません。接続図では、左右の辺の中央に線を接続したいかもしれません。別のファイルを準備する前に、要件を書き留めます。

外観だけで十分ならSVGを挿入する

公式のSVG挿入ガイドは、コンピューターからキャンバスにSVGをドラッグする方法を説明しています。Arrange → Insert → Imageも使えます。尋ねられたらActual Sizeを選び、必要に応じてサイズを変更します。

機器の例では作業用コピーを使い、サイズ変更後に小さな丸い表示器を確認します。大きければ明確な形でも、小さな図では有用な細部を失う場合があります。

編集可能なアートワークは別に保持します。機器内の円を移す必要があるなら、元のエディターで変えて受け渡し用画像を置き換えます。複数の部品が見えるという理由だけで、Ungroupコマンドを探すことに時間を使わないでください。SVGのオブジェクトとグループ解除のガイドは、その期待とファイル構造の関係を説明しています。

図全体を描いた通常のSVGにも注意が必要です。draw.ioの挿入ガイドによると、通常のSVGは編集可能な図を再構築するためのコネクター情報を持ちません。元の図のファイルがあれば保持します。

埋め込みSVGの色変更には独自の要件がある

draw.ioは、埋め込みSVGと色の設定の間に限定的な橋渡しを提供します。埋め込みSVGの色ガイドでは、SVG内のCSS規則と、挿入したオブジェクトのスタイルにあるeditableCssRulesを使います。リンクされた画像ではなく、埋め込み画像に適用する機能です。

CSS規則を備えたSVGなら、挿入した画像を選び、Edit Styleに次を追加します。

editableCssRules=.*;

記載のパターンは対象となるすべての規則を選びます。draw.ioのオブジェクトのスタイルに入れるもので、SVG描画のマークアップに貼る行ではありません。

ライブラリーを作る前に、現れる設定を確認します。有用な色の設定がなければ、公式ガイドのCSSクラスの例と元データを比較します。この設定が任意のSVGの塗り属性を整理したり、機器の表示器を分離したり、接続点を作ったりするとは考えないでください。

一度だけ固定の色変更が必要な場合は、SVGの元データを編集する方が簡単かもしれません。コピーを保存し、取り込み後の外観を再確認します。

意図的に定義する図形にはネイティブステンシルを使う

ネイティブステンシルはdraw.io独自のXML構文で形を記述します。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です。

「機器のアートワーク」「2ポートの機器」など、内容が分かる名前で保存します。両方が有用なら別の項目にします。

新しい図を開き、保存した項目を挿入します。設定した色変更やネイティブステンシルへのコネクター接続など、意味のある編集を一つ繰り返します。古いバージョンが入ったライブラリーを見つけられます。

.xmlという名前だけでは、項目がネイティブ形状かは分かりません。ライブラリーとステンシル定義はどちらもXMLですが、ライブラリーは画像、グループ、独自図形、図全体を含められます。挿入した項目の動作を確認します。

ベクターマスターが必要な場合だけラスターを復元する

機器イラストがPNGやスキャンでしか残っていないなら、PerfectVectorのクリップアートからSVGへの手順で候補を準備できます。模様に合わせてコピーを切り抜き、外側の輪郭、円の細部、空間、不要な背景をプレビューで確認します。SVGをダウンロードし、画像挿入の経路で試します。

これは外観を中心に確認する元データを提供します。左右のポート、コネクターの意味、ネイティブステンシルXMLは定義しません。必要なら意図的に作成します。

非常に単純な長方形と円なら直接描く方が速い場合があります。残ったイラストに保持したい特徴的な曲線があるとき、トレースがより有用です。手描きの模様では、地図イラストの準備ガイドがトレース前の整理を扱っています。

拡大したSVGがまだ粗い場合は、SVGのラスター画像診断で埋め込みビットマップを調べます。画像ベクター化の概要は、ピクセルの保持と形状の復元の違いを説明しています。

よくある質問

SVGをインポートするとdraw.ioのネイティブステンシルになりますか？ いいえ。画像挿入はアートワークを埋め込みます。ネイティブの独自ステンシルは、形状、スタイル、接続点にdraw.ioのXML定義を使います。

埋め込みSVGの色は変えられますか？ draw.ioは、適切なSVGのCSS規則とオブジェクトのスタイルのeditableCssRulesによる色編集を説明しています。元の構造と挿入後に現れる設定を確認します。

独自ライブラリーはSVGパスをネイティブ図形に変換しますか？ ライブラリーは画像やネイティブ図形などの再利用項目を保存します。画像を保存するだけではネイティブ形状や接続の意味情報は追加されません。

PNGのベクター化で図の接続点も作れますか？ いいえ。輪郭は復元できますが、接続点や図本来の動作が必要なら別に定義します。

参考資料

1. draw.io — 図にSVG画像を挿入する — 挿入、サイズ、SVGからのコネクター再構築の制限。
2. draw.io — 複雑な独自図形の作成と編集 — ネイティブXML形状、接続制約、描画操作。
3. draw.io — 埋め込みSVGの色編集 — CSS規則の編集、埋め込み画像とリンク画像の要件。
4. draw.io — 独自図形の作成 — ステンシルエディター、プレビュー、既定スタイル。
5. draw.io — 独自図形ライブラリーを使う — 混在する項目の作成、保存、再利用。

必要な動作を選び、一つの機器記号を準備して新しい図で試します。ラスターしか残っていなければ、SVG候補を準備し、輪郭と挿入画像を確認してからライブラリーに保存します。