SVGの形の間に白い隙間が出る原因と直し方
SVGの白い継ぎ目はアンチエイリアスか本当の隙間かもしれません。パス編集前に拡大、背景、ラスター出力、輪郭表示で確認する方法を解説します。
目次
形の間の細い白線は、ファイルの穴でなく描画の継ぎ目の場合が多くあります。SVG描画モデルは、ラスター化時にアンチエイリアスを使うことを認めます。隣接輪郭を別々にサンプリングすると、特定の縮尺で背景色の極細線が出る場合があります。別倍率や描画方法では消えることもあります。
本当の隙間の場合もあります。重ね、線追加、パス統合の前に、倍率変更、背景変更、ラスター出力、輪郭表示の4つを試します。表示のサンプリングか形状かを区別できます。
描画の継ぎ目か本当の隙間か
- 倍率で変わる・消える： 表示の継ぎ目の可能性が高い。
- 背景に合わせて色が変わる： 境界間で背景がサンプリングされている。
- 輪郭表示では見えない： 境界はすでに接している可能性。
- 高解像度出力にも見える： 座標精度と形状を詳しく確認。
- メッシュ、切断プレビュー、測定でも残る： 形状の問題として扱う。
接するパスにも線が見える理由
画面はベクターをピクセルグリッドへ描きます。輪郭がピクセルを横切ると、背景と混ぜて滑らかに見せます。座標が接していても、2つの形を別に描くと両方の境界ピクセルが混ざる場合があります。
縮尺も関係します。あるサイズでは境界に合う座標も、別サイズではピクセルの間に来ます。出力時の丸めも境界をわずかに動かします。そのため67%で出て100%で消え、小さなサムネイルで戻ることがあります。
数学的には正しいSVGかもしれません。テスト前に編集すると、透明、印刷、切断、アニメーションで見える重なりを作る場合があります。
重要なのは下の輪郭が共通の境界を持つかです。描画の線は接する形状にも出ますが、本当の隙間は輪郭間に残ります。
編集前の4つのテスト
1. 倍率を変える
100%と大きな拡大を含む複数で見ます。本当の隙間は拡大してもパス間にあり、サンプリングはちらつき、太さが変わり、消えることがあります。
倍率だけで判断しません。サブピクセルの隙間も見え方が変わります。
2. 背景を変える
白、黒、鮮やかな色に置きます。線が背景色なら、別々の輪郭間に背景が出ています。表示か透明な隙間のどちらもあり得るので輪郭も確認します。
3. 高解像度PNGを出力する
最終寸法の2倍または4倍で出力し、縮小結果を見ます。消えるなら縮尺依存のラスター化でしょう。残り測れるなら座標と精度を見ます。
4. 輪郭・ワイヤーフレーム表示
塗りを消し実際の境界とノード座標を比べます。正確に接するなら描画、合わないなら形状を修正します。
広い編集はSVGの編集方法にあります。使用先で最良の方法が変わるためコピーを残します。
表示の継ぎ目を直す
隣接するフラットな塗りで透明部分が不要なら、制御した小さな重なりが通常最も確実です。下や暗い形を隣の下へ少し伸ばします。通常サイズで見えず、外形を変えない程度にします。
ほかの方法もあります。
- 同色の非常に細いストロークで継ぎ目を覆う。
- 隣接部分の後ろに対応する土台を置く。
- 丸めが原因なら出力座標の精度を上げる。
- PNG納品なら大きく描画して縮小する。
shape-renderingは精密さや鮮明な輪郭を要求できますが、MDNは描画のヒントと説明しており、すべて消える保証ではありません。全体に使う前にcrispEdgesが役立つ場合と限界を確認します。
1つ選び、実際の使用先で試します。重ねた対処は暗い筋や膨らみを作る場合があります。
本当の形状の隙間を直す
輪郭や出力で穴を確認したら、
- 意図したノードを同じ座標へ揃える。
- 隣接する輪郭を本当に接するまで伸ばす。
- 連続パスが意図の場合だけ結合する。
- 重複と不要線を消す。
- 十分な精度で出力する。
- 開き直して4テストを繰り返す。
白い形で覆いません。白背景だけで隠れ、余分なオブジェクトが残ります。
ノイズのトレース由来なら、多くの細片やわずかなずれがあり、全部直すよりきれいな原稿を再トレースするほうが速い場合があります。
使用先で対処が変わる
| 使用先 | 優先する対処 |
|---|---|
| フラットなウェブ画像 | テスト後に小さい重なりや土台 |
| 透明ロゴ | 見える背景四角なしの修正や重なり |
| PNG出力 | 高解像度描画と縮小で十分な場合がある |
| Cricut・レーザー | 意図した切断形状。装飾の重なりは余分な切断になる場合がある |
| CAD・3D印刷 | 面やメッシュの亀裂を確認 |
| 動く部分 | 独立を保ち、動きが成立する場所だけ重ねる |
CADやメッシュに残る亀裂はブラウザーの1ピクセル線とは違います。形状が分かれるならパスや変換許容値を直します。サムネイルだけなら製造形状は正常かもしれません。
切断前のチェックで機械を確認します。線でなくぼけやピクセルならピクセル化の診断を使います。
PerfectVectorの役割
PNGやJPGからのトレースに隙間が散らばるなら、数十のパスを直す前に原稿に戻ります。圧縮ブロックを整理し、不要背景を消し、元の強い輪郭を残します。画像ベクター変換で領域をパスに再構築して確認します。
同色領域をアニメーション、切断、組み立てで分ける必要はツールにはわかりません。シルエットと抜きの部分を確認し、使用先で試します。原稿の断片化が原因なら再トレースは有用ですが、正しい形状のアンチエイリアスだけなら不要です。
よくある質問
パス間の白線の理由は？ 隣接輪郭を別々にアンチエイリアスし、特定サイズで背景が見える場合があります。正確に接している可能性もあるので、編集前に倍率、背景、描画、輪郭を見ます。
アンチエイリアスの線を消す方法は？ フラットな隣接塗りなら小さい重なり、同色の細線、土台を使い、最終サイズで試します。切断、CAD、透明、動く画像に無条件で使いません。
全部統合すれば消えますか？ 消える場合もありますが、色や編集構造も失います。1形状であるべき場合だけ統合します。多色では別オブジェクトが必要で、輪郭の一致や制御した重なりが安全です。
小さいときだけ出る理由は？ 縮尺でピクセルに対する境界位置が変わり、一部のサイズでは隣接する両方の輪郭が同じ行・列で背景と混ざるためです。大きな描画やわずかな重なりで防げる場合があります。
小さい隙間は3Dや切断に影響しますか？ 面、メッシュ、経路に残るなら影響します。画面だけでは壊れている証拠になりません。使用先で見て、実物を変える亀裂や開口を直します。
参考資料
- W3C：SVG 2描画モデル — 描画順、クリップ、合成、アンチエイリアスです。
- MDN：
shape-rendering— 図形の描画ヒントです。 - W3C：SVG 2座標系 — 縮尺依存の表示の座標、ビューポート、変換です。
断片化したトレースに本当の隙間があれば、編集可能なパスに再構築して確認します。接しているなら元を保ち、使用先に必要な最小の表示修正だけ行います。
