ExcalidrawへのSVG読み込み：どこまで編集できる？
ExcalidrawのSVGが1枚の画像になる場合と、各部が編集可能な形状になる場合を確認します。実際の変換で失われた穴と、次の確認事項を紹介します。
SVGをExcalidrawへドロップすると、鮮明でサイズ変更できる画像を得られても、個別のパスを編集できるとは限りません。部分の色を変えたり動かしたりするには、ネイティブ要素で構成されたExcalidrawシーンが必要です。SVGからExcalidrawへの変換ツールはその要素を作れますが、結果には目視確認が必要です。ExcalidrawのSVG読み込みの議論では、この1オブジェクトと編集可能な部分の問題を説明しています。
私たちは透明な穴のある小さな2色アイコンを検証しました。バージョンを固定した変換ツールは選択可能な3つのExcalidraw要素を作りましたが、SVGでは開いていた穴を埋めました。編集可能性と忠実さは別々の確認事項です。
「ExcalidrawのSVG」の3つの意味
| 持っているもの | 編集できるもの | 頼る前の確認 |
|---|---|---|
| 画像として配置したSVG | 位置、サイズ、画像単位の属性 | 青緑色の輪だけを金色の点と分けて選択できるか |
| 変換したExcalidrawシーン | 対応するSVG形状から作られたネイティブ要素 | 部分、色、空白は正しいままか |
| Excalidrawの描画から書き出したSVG | 保存方法によっては埋め込みExcalidrawシーン | 同じ手順で開き直し、要素を確認する |
3つ目は逆方向の処理です。ツールはSVG出力内にExcalidrawの元データを入れ、そのツール自身の描画を再び開いて編集できるようにする場合があります。たとえばExcalidrawのVS Code拡張は、シーンデータを含む .excalidraw.svg ファイルを説明しています。任意のSVGイラストに、すでにExcalidraw形状があるという意味ではありません。
読み込んだ図形をグループ解除できない場合は、まず選択オブジェクトの構造を確認します。SVGのグループ解除ガイドでは、画像オブジェクト、複合パス、本当のグループを区別しています。Excalidrawでは、その元ファイルの問題に独自のシーン形式が加わります。
SVGのパスを編集するだけなら、Boxy SVGのトレース・読み込み確認に従い、SVGマスターを維持します。ネイティブのシーン要素が必要な場合にExcalidrawシーンへ変換してください。
小さな変換テスト：形状は残り、穴は失われた
元データは手書きしたSVGで、偶奇塗りの複合パスの青緑色の輪1つと金色の円を含みます。輪の中央は白く塗ったのではなく、本当に透明でした。公式のsvg-to-excalidrawリポジトリーのnpmパッケージ 0.0.2 を通し、返されたシーンを .excalidraw に保存してExcalidrawで開き、比較用に透明なPNGを書き出しました。
変換はエラーなしと報告し、青緑色のdraw要素2つと金色のellipse1つの 3つのネイティブ要素を作りました。金色のアクセントは個別に選択できました。しかし透明な中央は見た目の確認に失敗しました。元の描画の中央ピクセルは透明でしたが、Excalidrawの透明PNG出力の対応ピクセルは不透明な青緑色でした。エラーのない変換応答は、同じ絵を保証しません。
これは意図的に限定した1テストで、すべてのSVGや変換方法についての主張ではありません。別のSVG Chopの実験も、複雑なSVG構造を変換上の課題として扱っています。オブジェクト数をざっと見るだけでは不十分です。デザインが穴、マスク、クリッピング、グラデーション、文字、入れ子のグループを使うなら、個別のテストが必要です。
自分のSVGを確認する方法
- 元のSVGを保持する。 読み込みや変換の前にコピーを保存します。変更したい領域がすでに別のパスや形状か確認してください。1つの複合パスは、個別に選べる部分がなくても穴を持てます。
- この図の「編集可能」の意味を決める。 拡大縮小と位置変更だけなら画像で十分かもしれません。部分を動かしたり色を変えたりするなら、その部分がネイティブのシーン要素として存在する必要があります。
- コピーで変換を試す。 オープンソースのSVG-to-ExcalidrawプロジェクトはSVG形状をExcalidrawシーンの内容に変換します。現在の設定を確認し、使うパッケージ版を記録します。普通の画像配置でパスが見えると思わず、結果のシーンを読み込むか開いてください。
- 部分を数えて選択する。 本体を選ばずアクセントだけ選べますか。他の色を保ったまま色変更できますか。保存したシーンを再び開き、編集を繰り返します。
- オブジェクトだけでなく絵を比較する。 元データとExcalidraw出力をコントラストのある背景に置きます。穴、重なり、エッジ、文字、必要な効果を確認してください。今回の例は「3要素」の確認には通っても、ここでは失敗しました。
変換が意図した1部分を多くのdraw要素に分ける場合、グループ化は移動を助けますが元のパス構造を復元しません。穴が消えたら元データを修正するか、図形に別の編集ソフトを使います。必要な機能をExcalidrawで維持できないなら、ベクター編集ソフト側で編集可能なマスターを保持してください。
PerfectVectorの役割
PerfectVectorが前段で役立つのは、パスを持たない平面的なPNGアイコンなど、元データがラスターの図形の場合だけです。クリップアートをSVGに変換し、色領域と空白が残ったか確認して、Excalidraw変換の前に形状を整えます。小さなアイコンの準備ガイドは、元画像の明瞭さと一貫性を扱っています。ベクター化だけではExcalidrawの画像配置をネイティブのシーン要素に変えられず、新しくトレースしたSVGにも上の利用先アプリの確認が必要です。
すでに適したベクター形状を持つSVGは再トレースしないでください。元データと変換したシーンを比較します。関連するdraw.ioのカスタムSVG形状ガイドも、別の図編集ソフトで画像とネイティブ形状の違いを説明しています。
よくある質問
配置したSVG画像をグループ解除してExcalidraw形状にできますか？ 画像全体を選択しても、元のSVGの各部分をネイティブのExcalidraw要素として編集できるようにはなりません。別々のシーン形状が必要なら変換手順を使い、結果を確認してください。
SVG-to-Excalidraw変換はすべての穴を保持しますか？ そうとは考えないでください。0.0.2のテストでは偶奇の輪が編集可能なdraw要素になりましたが、透明な中央が埋まりました。特に空白が重要な場所では、自分の元データと保存したシーンを比較します。
読み込む前にSVGをベクター化すべきですか？ いいえ。必要な形状がすでにあるなら、構造とExcalidraw変換を確認します。ベクター化が関係するのは、PNGやJPGなどのラスター図形から始める場合です。
参考資料
- Excalidrawの議論 #6082 — 読み込んだSVGが編集可能な部分でなく1ブロックとして動くユーザーの質問です。
- Excalidraw — svg-to-excalidraw — バージョンを固定したオリジナルアイコンのテストで使った公式オープンソースの変換方法です。
- VS CodeのExcalidraw Editor拡張 — シーンファイルと、シーンデータを含むSVG・PNG出力を説明しています。
- Minixcali — SVG Chop — SVG部分をExcalidraw要素へ変換する独立した実験で、形状の注意事項を含みます。
PNGアイコンから始めるなら、PerfectVectorでSVG候補を作成し、別々の領域と穴を確認して、図に使う前に保存したExcalidrawシーンをテストしてください。
