SVGのストロークが書き出し後に消える原因
SVGの線は描画設定、縮尺、クリッピング、非対応の効果で消える場合があります。まずパスを確認し、必要最小限の確実な修正を行う方法を解説します。
目次
書き出し後に線が消えたら、まずパスの形状が残っているか確認します。線の色がない、背景と同色、新しい縮尺で細すぎる、viewBox外にある、ページ端で切られるなどの可能性があります。使用先が理解しないブラシ、可変幅、フィルター、CSSの場合もあります。
すぐ再トレースしたりすべて展開したりしません。編集可能な原本を残し、コピーで失敗する1本を分離します。最小限の修正なら元の構造を多く保てます。
手早い診断
- 現在のブラウザーと1つのエディターで同じSVGを開きます。
- 消えた線を選び、パスとノードが残るか確認します。
- コピーに目立つ色、完全な不透明度、一時的に太い線を指定します。
- ページ端から離し、クリップ、マスク、フィルターを1つずつ無効にします。
- 変換を除くか、線幅への影響を見ます。
- 1つの使用先だけ失敗するなら、納品コピーで非対応の見た目を置き換えます。
まずパスが残っているか確認する
コピーをテキストで開き、<path>、<line>、<polyline>、<circle>、<rect>などを探します。エディターでも消えたものを選び、輪郭やワイヤーフレームにします。
- ノードとパスがあれば形状は残っています。描画、クリップ、変換、対応を調べます。
- 範囲がページから遠ければ戻すか
viewBoxを直します。 - 塗りの閉じた形なら、すでにアウトライン化されているかもしれません。
- 該当形状がなければ元文書と設定を見ます。非対応のオブジェクトを出力が省いた可能性があります。
編集前に2つで比較します。Chromeで見えてデスクトップで消えるなら読み込み制限やCSS依存、すべてで消えるなら無効な描画、クリップ、範囲、形状不足が考えられます。線だけでなく全体が空なら空白SVGの診断を使います。
Penpotだけで消えるなら、PenpotのSVG読み込み確認で受け渡しを分離します。
原因1：見えるストロークが指定されていない
塗りとストロークは別の描画属性です。パスがあっても線が表示されない場合があります。MDNの塗りとストロークはstroke、stroke-width、不透明度などを説明します。
選択したものと継承スタイルで確認します。
stroke="none"。strokeがなくfill="none"。stroke-width="0"や非常に小さい幅。opacity="0"やstroke-opacity="0"。- 背景や周囲と同じ色。
- 本体や親の
display="none"、visibility="hidden"。 - 属性を上書きするCSSクラス。
コピーに鮮やかな色、100%の不透明度、数倍の幅を付けます。太い輪郭が文字の塗りを覆うなら、パスを変える前にSVGの塗りとストロークの順序を比べます。対照的な長方形を後ろに置き、見えたら意図した色と納品サイズで読める幅に戻します。
要素のスタイルも、より具体的なルールで上書きされます。コードと表示が違うなら開発者ツールの計算済みスタイルを見ます。
原因2：ページや枠の端で切られる
ストロークは中央のパスの両側に広がります。viewBox境界に中央があると、半分が外に出ます。太い線、四角い端、マイター接合、ぼかし、影には座標以上の余裕が必要です。描画仕様は幅、端、接合、マイター制限の広がりを定義します。閉じた形の線を完全に内側や外側へ置くなら、アートボード変更前に内外ストローク配置のガイドで描画範囲を比べます。
内側へ動かすか一時的にviewBoxを広げ、戻れば意図した余白を追加します。無条件に広げず、最大線幅、端、接合、効果に必要な範囲を計算します。
clipPathやmaskも見ます。塗りの範囲に合わせたクリップは、外にはみ出す線を切る場合があります。入れ子SVGには別のビューポートがあり、overflowの扱いはブラウザーと読み込みで違う場合があります。
1つの角だけなら高いstroke-miterlimitとの関係を見ます。鋭いマイターは遠くへ伸びます。意図を保つなら、ビューポートを広げるより丸やベベルの接合が適する場合があります。
原因3：縮尺や変換で線の見え方が変わる
変換は形状と見えるストロークを変えます。制作サイズでは良くても、単位や入れ子変換の解釈で読み込み後は極細になる場合があります。
本体と親のtransform="scale(...)"、viewBox、width、heightを見て、100%と最終実寸で試します。全体が違う寸法なら、任意の幅で補わず既知サイズの縮尺テストで対応を直します。
vector-effect="non-scaling-stroke"も使えます。MDNの説明では、一般的な値non-scaling-strokeを使うと、要素の変換に線幅が追従しません。UI図や地図に有用ですが、ブラウザー外の対応は違うため使用先で確認します。
non-scaling-strokeを万能の対処として追加せず、画像と一緒に太くなるべきか決めます。印刷ロゴは通常太くなるべきで、拡大しても画面1ピクセルの地図線なら固定が意図的です。
原因4：使用先が見た目を再現できない
アプリの線は必ずしも普通のSVGストロークではありません。筆圧ブラシ、可変幅、パターンブラシ、ライブエフェクト、ブレンド、フィルター、独自の表示構成の場合があります。書き出しが近似し、使用先が無視する場合があります。
コピーで減らして試します。
- 基本線を残しフィルターを消す。
- ブラシを単色の普通の線にする。
- 可変幅を消す。
- 入れ子の変換を形状に適用して整理する。
- 1オブジェクトを最小のSVGにする。
- 使用先で開く。
最初に線が戻った操作が非対応機能を示します。文書全体の構造を統合せず、持ち運べる代替を選べます。
外部CSSやリソースもリスクです。ページではクラスやカスタムプロパティ（CSS変数）を継承し、単独ではしない場合があります。エディターも自身のモデルに合わないセレクターを捨てることがあります。単独納品には、対象が実際に読み込める自己完結した設定を使います。
編集可能なストロークかアウトラインか
編集可能なストロークは中心パスと幅、端、接合、破線、色を保持し、軽く調整しやすいものです。アウトラインは見える帯を塗りパスにし、表示を固定しますが中央線と設定を失います。
必須のブラシや可変幅を保持できない、または業者が塗り形状を求める場合、納品コピーをアウトライン化します。Adobeの展開文書はストロークを構成オブジェクトにする方法を説明します。
原本を残す理由は、展開で次が起きる場合があるためです。
- ノードと容量が増える。
- 幅変更が遅くなる。
- 重なりが複雑になる。
- 統合が必要な別の部分ができる。
- プロット、彫刻、アニメーションの開いたパスの意味が変わる。
中心を1回たどるプロッターや彫刻では特に危険です。アウトラインは2つの境界を与えるため、単線SVGガイドを使います。
使用先に合う対処を選ぶ
| 使用先 | 優先 | 確認 |
|---|---|---|
| ブラウザー・サイト | 編集可能な線と自己完結CSS | 計算済みスタイル、レスポンシブ表示の縮尺、クリップ範囲 |
| ベクターエディター | 対応する編集可能な線 | 幅、変換、端、接合 |
| 印刷業者 | 互換性のある線かアウトラインコピー | 実寸の校正、色モード、切り抜き範囲 |
| Cricut・レーザー | 加工に合う簡単なパス | 極細、重複、意図しない輪郭がない |
| ペンプロッター | 通常塗りなしの中心パス | 1つの経路とペンを上げる場所 |
| CAD | 対応する簡単な形状 | 単位、閉じた輪郭、プレビュー |
同じメーカーの別エディターだけでなく、実際の使用先で試します。ブラウザー、キャンバス、印刷、カッター、CADは異なるSVGの範囲に対応します。
安全な修正順序
戻せる確認から構造変換へ進みます。
- 原本を残し複製する。
- 形状を確認する。
- 2つの描画で比較する。
- 明示的な色、幅、不透明度を試す。
- 背景との対比とCSSを見ます。
- ページ、クリップ、マスク、入れ子画面を見ます。
- 変換と最終サイズを見ます。
- 非対応の見た目を1つずつ減らす。
- 必要な線だけ納品コピーでアウトライン化する。
- 納品SVGを開き直して元と比べる。
良いパスが残るならラスター化を中間修正に使いません。残すべき形状を失い、再トレースで角が丸まり、曲線が変わり、不要なノードが増える場合があります。
PerfectVectorの役割
元形状が失われたか使えず、最良の残存原稿がラスターの場合だけ役立ちます。適したフラットなロゴ、アイコン、イラストを編集可能な形へ再構築できます。
CSS、欠けた編集可能な線、元の中心線を保った非対応ブラシの変換は修正しません。パスがあればエディターで描画、範囲、変換、表示を直します。スクリーンショットのトレースより多くの情報を保てます。
よくある質問
書き出し後に線が消える理由は？ パスは残っても色なし、不透明度0、同色背景、極細、クリップ、縮尺、非対応の表示が考えられます。形状から確認し、描画、範囲、変換、対応を分離します。
パスが残るか確認する方法は？ 選択して輪郭表示にするか、テキストで該当要素を探します。ノードはあるが線がないなら、形状不足より描画やスタイルの問題です。
SVGの端で線が切られる理由は？
線は中央パスより広がるため、viewBoxの境界上では半分が失われる場合があります。端、接合、効果、クリップ、マスクにも余白が必要です。内側へ動かすか全体の表示に合う範囲を設定します。
出力前にストロークを展開すべきですか？ 必須の表示を使用先が保持できないか、塗り形状を明示的に求める場合だけです。納品コピーを展開し原本を残します。形状が増え、中心線をたどる用途には不適切です。
PerfectVectorで消えた線を復元できますか？ パスやスタイルの修正が必要なSVGからはできません。元ベクターがない場合に最良のラスターから見える形を作れますが、CSS、ブラシ設定、元の中心線は戻りません。
参考資料
- W3C：SVG 2の描画 — 塗り、線、幅、端、接合、ベクター効果です。
- W3C：SVG 2の座標系 — ビューポート、
viewBox、単位、変換です。 - MDN：
vector-effect—non-scaling-strokeの動作です。 - Adobe Illustrator：グループと展開 — 線を編集可能な構成物へ展開する説明です。
元形状がなくラスターしか残らないなら、PerfectVectorできれいなパスに再構築し、使用先で確認します。パスが残るなら再トレースではなくSVGを修正します。
