SVGサポート

Diagrammixは、SVG(Scalable Vector Graphics)アートワークをキャンバスに配置し、ページをSVGファイルとして書き出すことができます。

注: SVGのインポートとSVGの書き出しは PRO 機能です。

SVGのインポート

SVGファイルを取り込む方法は2つあります:

  • SVGファイルをキャンバスにドラッグする — SVG画像として配置されます。アウトラインが自動的に検出されるため、コネクタはバウンディングボックスではなくアートワークの輪郭に接続します。
  • 表示 → クリップアートを管理… → SVGをインポート... — クリップアートライブラリにSVGを追加し、どのドキュメントでも再利用できるようにします。

配置したSVGの操作

配置したSVGは画像のように振る舞います。フローティングツールバーから移動、リサイズ、スタイル設定ができます。

  • ティント — アイコンカラー ボタンからアートワーク全体を再着色します。画像の操作を参照
  • 展開 — 単一のSVG画像を右クリックして 展開 を選ぶと、編集可能なベクターシェイプ(およびテキスト)に置き換わります。アートワークに複数のパーツがある場合はグループ化されるため、個別に操作するには 編集 → グループ解除(Shift+Cmd+G)を使用します

展開後は、インスペクタで塗りつぶしとストロークを変更したり、ノードを編集したり、シェイプを結合したりできます。関連するパーツを選択して 編集 → グループ化(Cmd+G)を選ぶと、再びまとめておけます。

SVGの書き出し

  1. ファイル → SVGに書き出す… に移動するか、Shift+Cmd+E を押す
  2. 名前と保存場所を選んで 保存 をクリック

現在のページ全体が書き出されます。単一のアートボードだけをSVGとして書き出すには、代わりに ファイル → アートボードを書き出す… を使用してください。

互換性に関する注意

  • シンプルなSVGが最適です — アイコン、ロゴ、イラストなど
  • SVGファイル内の テキスト は、元のフォントがインストールされていない場合、代替フォントでレンダリングされることがあります
  • 複雑なフィルターとマスク は、展開後に見た目が完全には一致しない場合があります

関連トピック