SVGの穴が埋まる理由と、透明な抜き部分を戻す方法
切り抜きが複合サブパスでなくなる、塗り規則が変わる、読み込みで関係が失われるとSVGの穴が埋まります。原因の診断と復元方法を解説します。
目次
SVGの穴は、ファイルや受け取り先が内側の輪郭を塗り図形の外側として扱わなくなると埋まります。よくある原因は、複合パスの解除、内側輪郭が別の塗り付きオブジェクトとして保存されたこと、塗り規則やパス方向の変更、読み込みで関係が失われたこと、SVG作成前のラスタートレースで開口が閉じたことです。
まずブラウザーでSVGを開きます。すでに穴が埋まっていればファイルを修正します。ブラウザーでは正しく、別のアプリで埋まるなら、読み込み段階が原因の可能性が高いです。
簡単な診断
- 作品を対照的な背景に置きます。白いオブジェクトは透明な穴ではありません。
- レイヤーやオブジェクトのパネルで対象を調べます。外側と内側の輪郭は通常、1つの複合パスに属する必要があります。
fill-rule="nonzero"では輪郭方向が重要です。evenoddでは入れ子の輪郭が塗りと未塗りを交互に切り替えます。- 1つの受け取り先だけで失敗するなら、コピーを単純化するか、そのアプリで減算を作り直します。
- 元ラスターですでに文字の内部が閉じているなら、再トレース前に元画像を整えます。
まず穴が消えた段階を見つける
形状を変える前に、2つのレンダラーを使います。
- SVGの複製を保存します。
- 複製をChrome、Safari、Firefoxなどのブラウザーで直接開きます。
- 明るい背景と暗い背景の両方に置きます。
- 同じファイルを受け取り先のアプリで開きます。
- 全体のシルエットだけでなく、該当する穴を比較します。
| 症状 | 考えられる原因 | 次の操作 |
|---|---|---|
| ブラウザーとエディターの両方で埋まる | SVG構造または塗りの動作が間違っている | 複合パス、塗り規則、輪郭方向を調べる |
| 暗い背景でも穴が白い | 白い図形が作品を覆っている | 減算するか、本物の透明な穴を作り直す |
| ブラウザーは正しく、受け取り先は間違う | 読み込みが複合関係を変えたか無視した | コピーを単純化するか、読み込み後に内側の輪郭を減算する |
| Break ApartやReleaseの直後に消えた | 内側輪郭が通常の塗り付きパスになった | 元に戻すか、正しい輪郭を再結合する |
| ラスタートレースですでに閉じていた | 元の隙間が小さすぎたか、平滑化でつながった | 元画像を整えて再トレースするか、手動で開口を作る |
この比較は、SVG自体の問題と受け取り先固有の問題を分けます。また、読み込み前は正しかったファイルを、無作為なパス操作で壊すのを防ぎます。
白い図形は穴ではない
本物の穴には、SVGの背後のものが見えます。白い図形は、白いキャンバス上で空いて見えるだけです。Web UIの作品には、SVGのpointer-eventsガイドで、穴、塗り領域、別のクリック対象の反応を説明しています。
テストには、作品の背後に一時的な暗い長方形を追加します。穴と思った部分が白いままなら、その内側オブジェクトを選択します。意図した白いデザイン要素として残しても構いませんが、カッター、彫刻ツール、ブラウザーの重ね合わせ、3D読み込みが空白と解釈するとは期待しないでください。
透明な開口には複合パスを使うか、外側から内側図形を減算します。マスクも透明度を作れますが、多くの製作用アプリはマスクより単純なパス形状を安定して扱います。スクリプト処理ならPaper.jsで読み込んだパスを切り抜き・結合する方法を試し、出力SVGを開き直して開口を確認します。
ゴボ用作品では、透明な開口が正しくても、材料の判断は別に残ります。スチールとガラスのゴボ比較は、同じ文字Oをスチールのブリッジ構成とガラスで支えるデザインで追い、投影する明暗を反転すると、つながって残すべき部分が変わる理由を説明しています。
複合パスが穴の関係を保つ
文字O、リング、中央を抜いたロゴは、多くの場合、複数の閉じたサブパスを持つ1つのパス要素を使います。外側輪郭がシルエットを定義し、囲まれたサブパスが文字の内部や切り抜きを定義します。SVGのパスモデルは、1つのパス内の複数サブパスを許可します。
そのため、Ungroup、Break Apart、Release Compound Pathは同じではありません。複合パスを解除すると、内側輪郭が通常の塗り付きオブジェクトになることがあります。形状は残っていても、外側との関係がなくなります。
複製で復元します。
- 外側の境界と、穴にすべき輪郭だけを選択します。
- Make Compound Path、Combineなどの同等コマンドを使います。
- 生成オブジェクトに塗りを1つ適用します。
- 塗り規則を確認します。
- 保存SVGをブラウザーと受け取り先で開き直します。
Adobeの現在の複合パスの説明も同じモデルで、構成パスが塗り規則によって塗りと透明な領域を決めます。
スタンプ作品では、どの領域を塗りとして残すか決める前に、陶芸スタンプの凸形状と凹形状を確認します。
nonzeroとevenoddを確認する
SVGには2つの塗り規則があります。SVG 2の描画仕様は、初期値をnonzero、もう一方をevenoddと定義します。
nonzero： 符号付きのパス交差を使います。内側輪郭の方向が違うと、塗りを打ち消さず増やす場合があります。evenodd： 交差回数を数えます。2回囲まれた点は外側になり、単純な入れ子輪郭は方向によらず穴になります。
次の最小パスには、同方向の長方形が2つあります。evenoddなら中央は透明です。
<path
fill="#2563eb"
fill-rule="evenodd"
d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>規則の変更はデザインに合う場合に役立ちますが、万能の修復ではありません。2つの輪郭は同じ図形のサブパスとして評価される必要があります。無関係な2オブジェクトにfill-rule="evenodd"を設定しても、一方が他方を切り抜くことはありません。
nonzeroを保つ場合、エディターにコマンドがあれば内側輪郭だけを反転します。Illustratorは両方の塗り規則と、複合パスの方向制御を提供します。自己交差や複数の入れ子の穴は、単純なリングと異なる結果を生む場合があるため、反転前にコピーを保存します。
SVGは正しく、読み込み側が間違う場合
切断、CAD、3D、アニメーションのツールには、SVGの実用的な一部だけに対応するものがあります。ブラウザーは複合パスを正しく表示しても、受け取り先が各輪郭を塗りのあるオブジェクトとして読み込む場合があります。
次の順序で修正します。
- 元のエディターから単純化したコピーを保存します。
- 文字の読み込みが弱点なら、そのコピーのライブ文字をアウトライン化します。
- 必要な場所だけ、マスク、クリップ、外観効果を単純なパス形状に置き換えます。
- 各穴と外側輪郭を1つの複合パスに保ちます。
- 繰り返し切り替えず、
evenoddとnonzeroを意図してテストします。 - まだ埋まるなら、両境界を読み込み、受け取り先で内側の輪郭を減算します。
押し出しでは、受け取り先が選択可能な閉じた外形も認識する必要があります。SVGの押し出し診断は、穴が保たれた後の開いた端点、重複、外形の有効性を扱います。
トレースで開口が閉じた場合
小さい、ぼけた、低コントラストのラスターでは、トレースが小さな文字の内部の穴を閉じたり、狭い隙間を結合したりする場合があります。塗り規則ではなく形状の問題です。内側境界がSVGに作られませんでした。
元ラスターに戻って次を行います。
- ぼけを加えずに拡大するか撮り直す
- 重要な開口の周囲の分離を強める
- 隙間付近の圧縮ノイズを除去する
- ツールに設定があれば平滑化や色結合を弱める
- 最終出力サイズで新しいトレースを比較する
この場合にPerfectVectorが役立ちます。元ラスターがあり新しいSVGトレースが必要なら、画像からベクターへの手順を使います。ダウンロード前に文字の内部と抜き部分をすべて確認します。エディターで複合パスを解除するまで正しかったSVGなら、SVG自体を修正します。再トレースは失われた編集履歴を復元しません。
文字でも同じ元画像優先の考え方が役立ちます。手書きレタリングのベクター化ガイドは、絵全体の個性を失わず、小さな内部の穴を開いたまま保つ方法を説明します。
安全な最終確認
修復SVGを送る前に、次を行います。
- 明るい、暗い、透明な背景で見る
- 対象を選択し、意図した1つの複合パスか確認する
- エディターかSVGソースで塗り規則を調べる
- すべての文字の穴、リング、囲まれた抜き部分を確認する
- 未保存のキャンバスを信用せず出力ファイルを開き直す
- 実際の受け取り先アプリでテストする
- 編集用データと単純化した納品コピーを分ける
1つの選択として動くなら、それが正しい場合があります。複合パスは設計上1オブジェクトです。再び分解する前にSVGのグループ解除ガイドを使います。
よくある質問
Break Apartの後に穴が埋まったのはなぜですか？ 内側輪郭が外側の複合パスから分離され、穴だったものが通常の塗り付きオブジェクトになりました。元に戻すか、各外側と正しい内側輪郭を再結合し、塗り規則を確認します。
SVGの穴にはfill-rule="evenodd"を使うべきですか？
evenoddは輪郭方向で結果が決まらないため、入れ子の輪郭には便利な場合が多いです。ただし1図形の中で働くもので、別オブジェクトを減算しません。元データと受け取り先が意図した方向を保つならnonzeroを維持します。
ブラウザーでは正しく、アプリでは塗りつぶされるのはなぜですか？ 読み込み側が複合パス、塗り規則、マスク、輪郭方向を保たない可能性があります。コピーを単純なパスへ単純化して再テストします。必要なら内外境界を読み込み、受け取り先で穴を減算します。
白い図形を上に置けば穴になりますか？ 白い背景で穴に見せるだけです。白いオブジェクトは塗り付きのままなので、印刷や切断の対象になったり、別の塗り付き形状として読み込まれたりする場合があります。背景を透かす必要があるなら複合パス、減算、その他の透明構造を使います。
PerfectVectorは既存SVGの埋まった穴を修正できますか？ 適した元ラスターへ戻り、必要な開口が見える新しいトレースを作る場合に役立ちます。エディターが解除した、または読み込みが無視した複合パスは修復しません。その関係はベクターエディターか受け取り先で直します。
参考資料
- W3C — SVG 2の描画 —
nonzero、evenodd、塗り規則の初期値を定義しています。 - W3C — SVGのパス — パス、サブパス、閉じた形状を定義しています。
- Adobe Illustrator — 複合パスの作成 — 複合パスの穴、塗り規則、構成パスの方向反転を説明しています。
- PerfectVector — 画像からベクターへ — 条件付きの再トレースで使う、現在のラスターからSVGへの手順です。
ラスタートレースで開口が失われたなら、きれいな元画像から新しいベクターを作り、納品前にすべての内部の穴を確認します。ブラウザー版がすでに正しければ、その形状を保ち、失敗した読み込みだけを修正してください。
