SVGのグループ解除ができない：中身を見分けて直す方法
SVGがグループ解除できない場合、実際は単一パス、複合パス、埋め込み画像かもしれません。オブジェクトを見分け、適した操作を使う方法を解説します。
目次
グループ解除は、選択したものが実際にグループの場合だけ使えます。複数の部分に見えるSVGも、複合パス、通常の単一パス、クリッピングされたもの、SVG内のラスター画像かもしれません。**Ungroup（グループ解除）**を繰り返しても、その構造は変わりません。
役立つ質問は、コマンドの場所ではなく「何を選んだか」です。わかれば対処は通常簡単です。本当のグループは解除し、複合パスは分解し、単一パスはノードを編集し、埋め込みラスターは本物のベクター形状にトレースします。
手早い診断
- オブジェクトパネルにグループがあるか、ソースに
<g>があれば**Ungroup（グループ解除）**します。 - 1つの選択に別々の穴や孤立部分があれば、コピーで**Break Apart（分解）やRelease Compound Path（複合パスの解除）**を試します。
- ノード編集で1つの輪郭が見えるなら、解除するものはありません。そのパスを編集・分割します。
- 1つの長方形で拡大すると角ばるなら、埋め込み画像の可能性が高いと考えられます。元ラスターを入手して正しくベクター化します。
まず選択したオブジェクトの種類を確認する
SVGはコンテナー形式で、見える各部分が別レイヤーであることは保証しません。グループ、個別パス、複合パス、文字、クリッピング、ラスターを持てます。キャンバスエディターを作るなら、Fabric.jsのSVG読み込みで、個別オブジェクトの解析、名前付き部分の色変更、出力確認を説明しています。
diagrams.netでは、読み込んだ図を解除する前にdraw.ioのSVG画像とネイティブステンシルを比べます。拡大可能な画像と接続点を持つ図形は編集方法が異なります。
別の図エディターでは、ExcalidrawのSVG読み込み後に編集できるものをご覧ください。
そのため同じ症状がCricut Design Space、Silhouette Studio、LightBurn、Inkscape、Illustrator、Officeで起きます。PowerPointでは、SVGの変換と部分編集のガイドで、SVG画像とOffice図形を区別します。コマンド名は違っても、ファイルは共通する少数の構造です。
| 見えるもの | 考えられる中身 | 試すこと |
|---|---|---|
| 複数のものが一緒に選ばれ、パネルにグループとある | 本当のSVGグループ | グループ解除 |
| 複数の島や穴が1つとして選ばれる | 複合パス | 複製して解除・分解 |
| 1つの輪郭に編集可能な点がある | 単一パス | ノード編集、切断、分割 |
| 長方形1つが選ばれ、拡大でピクセルが見える | 埋め込みラスター | 元画像を取り出すか探し、ベクター化 |
| 境界で一部が隠れている | クリッピングパスやマスク | 解除か中身の編集 |
グループ解除で解決するのはグループだけ
SVGの<g>は他の要素を入れるコンテナーで、仕様は任意の深さの入れ子を認めます。円、文字ロゴ、背景をまとめて動かすためグループ化できます。解除はエディターの容器を取り除き、中の要素を出します。
次を試します。
- 複製するか作業用コピーを保存します。
- 1回選択します。
- キャンバスだけでなくLayers・Objectsパネルを見ます。
- グループなら**Ungroup（グループ解除）**を1回します。
- 入れ子がある場合だけ繰り返します。
入れ子は一般的です。アイコン、文字、それらを囲む親グループがあれば、意図した2〜3回の解除は普通です。ばらばらになるまでクリックせず、必要な部分が選べたら止めます。
複合パスは別々に見えても1つのオブジェクト
「O」、ドーナツ、抜きの部分のあるロゴは複合パスであることが多いものです。穴は上に置いた白いオブジェクトではなく、複数のサブパスと塗りの規則で作られます。SVGパス仕様はドーナツの穴などの複合構造に対応しています。
移動や色変更で穴を保てる便利な構造です。分解すると穴が埋まり、島が離れ、カッターの内外の解釈が変わる場合があります。穴がすでに閉じているなら、追加の操作前に穴が埋まる診断を使います。
本当に分ける必要がある場合は、
- 先に複製します。
- Release Compound Path（複合パスの解除）、**Break Apart（分解）**などを使います。
- すべての穴を後で確認します。
- 使用先が1つのシルエットを必要とするなら複合構造を戻します。
切断ファイルは、分ければ良くなるとは限りません。正しく切れるならそのまま使います。
単一パスには取り出す中身がない
複雑なシルエットを回っても、1つのパスで1オブジェクトの場合があります。ノードやダイレクト選択ツールに切り替え、輪郭全体に点が出れば、すでに編集可能な形状を見ています。
必要なのはグループではなくパスの操作です。
- ノードを動かして輪郭を変える。
- 選んだノードで切る。
- 別のパスで形を分割する。
- つながらないサブパスがあればBreak Apartで分解する。
- トレースが粗い部分を描き直す。
自動トレースでは特に重要です。人が認識する物ごとではなく色ごとに形を作ることがあり、青いシャツと青い目が同じ塗りのため1つの複合オブジェクトになる場合があります。ベクターですが、期待した意味上のレイヤーではありません。
Riveのアニメーションでは、解除や統合前に独立して動く部分を決めます。読み込みはネイティブRiveオブジェクトを作るため、Hierarchyを見て1部分を動かします。RiveのSVG準備ガイドで、元のグループや描画設定、非対応効果、必要な支点を説明しています。
1枚のラスター画像を含む場合
SVGには<image>を入れられ、埋め込みコンテンツ仕様はPNGやJPEGの参照を認めます。拡張子が.svgでも、中はピクセルのままです。
3つの確認があります。
- 拡大。 角ばるならラスターです。
- テキストエディターで開く。
<image、data:image、.png、.jpgを探します。 - 種類を見る。 編集可能なノードのない長方形の画像はベクターのグループではありません。
元PNG、JPG、作品ファイルがあるならSVGのスクリーンショットをトレースしません。最もきれいな元を使います。書き出しやスクリーンショットのたびに、ぼけや圧縮による乱れが加わる場合があるためです。
ここではPerfectVectorの画像ベクター変換が、適したフラットな画像を編集可能なパスに再構築できます。写真は意図して簡略化するのでなければラスターを使います。SVG内にあるだけでは、写真がきれいな意味上のレイヤーになりません。
この容器の問題は、ピクセル化して見えるSVGで詳しく説明しています。
クリッピング、マスク、シンボルの場合
ベクターでも通常の解除ができない場合があります。
- クリッピングパスは、削除せず一部を隠します。解除して全形状を出し、隠れた部分を残すか決めます。
- マスクは明暗で見える範囲を制御します。解除すると予想外の画像が現れたり、透明度が変わったりする場合があります。
- シンボルやリンクされた実体は、直接編集前にExpand、Detach、Convert to Paths（展開・切り離し・パス変換）が必要な場合があります。
- ロックされたレイヤーはエディターの状態で、SVG構造ではありません。先に解除します。
表示が正常でサイズ変更や配置だけなら保持します。すべて展開すると、小さく整理されたSVGが管理しにくくなる場合があります。
安全な修正順序
影響の小さい操作から行います。
- コピーを保存します。
- オブジェクトやレイヤーのロックを解除します。
- パネルで種類を確認します。
- グループだと確認してから解除します。
- 隠れた形状が原因の場合だけクリップやマスクを解除します。
- 個別編集が必要な場合だけ複合パスを分解します。
- 単一パスは解除でなく編集・分割します。
- ピクセルや使えない形状で、元ラスターがある場合だけ再トレースします。
原因がわかるまで、穴、重なり、レイヤーの関係を保てます。
納品ファイルで問題を防ぐ
送る前に次を行います。
- 元文書の重要なグループやレイヤーに名前を付ける。
- 文字は納品コピーだけアウトライン化し、原本の編集可能な文字を残す。
- 編集可能なベクターを求める相手にはラスターを埋め込まない。
- 見た目と編集可能性を混同しないようPNGプレビューを添える。
- 別のエディターで開き、いくつかの部分を選ぶ。
- レイヤー付き、統合、意図した1つの複合形状のどれかを伝える。
購入ファイルは同梱一式を残します。最初のSVGが統合されていても、レイヤー付きSVG、DXF、EPS、元ファイルが入っているかもしれません。
よくある質問
グループ解除がグレー表示なのはなぜですか？ 選択したものがグループでない可能性が高いと考えられます。単一パス、複合パス、画像、クリップ、ロックされたものなどです。パネルで確認し、種類に合う操作を使います。
SVGが1つのオブジェクトになる理由は？ 1つの複合パス、色ごとの形、元アプリでの統合、ラスターの埋め込みなどが考えられます。1つでも壊れているとは限りません。変更前にノードとソースを確認します。
Design Spaceで単一レイヤーSVGを分ける方法は？ 1色1パスなら取り出す隠れたレイヤーはありません。ベクターエディターで分け、元のレイヤー付き原稿に戻るか、色領域を再構築して読み込み直します。
InkscapeやIllustratorで解除できますか？ 本当のグループなら可能です。複合パス、クリッピング、分割のコマンドもありますが、異なる構造への操作で、より強いグループ解除ではありません。
PerfectVectorで埋め込み画像を編集可能にできますか？ フラットなロゴ、アイコン、イラストなど適した元ラスターをパスへトレースできます。元デザイナーの名前付きレイヤーや編集可能な文字は復元せず、写真は通常ラスターが適しています。
参考資料
- W3C：SVG文書構造 —
<g>と入れ子のグループ構造です。 - W3C：SVGのパス — パス、離れたサブパス、複合パスの形状です。
- W3C：SVGの埋め込みコンテンツ —
<image>内のPNGやJPEGです。 - MDN：SVGのクリッピングとマスク — クリップとマスクの動作の違いです。
- Cricut：画像アップロードの非対応項目 — 使用先でのクリップ、文字、リンク画像、埋め込みラスターの扱いです。
同じ使えないコマンドを繰り返す前に、構造を確認します。ピクセルを入れた容器なら、元画像を編集可能なパスへ再構築し、結果を確認して続けます。
