SVGが空白で開くとき、作り直す前に確認する7項目
空白のSVGはページ外、不可視、クリップ、非対応機能、構文エラー、ラスター画像を包んだだけの構造などが原因かもしれません。元ファイルを保存し、7項目を確認しましょう。
目次
SVGが空白で開く場合は、保存や書き出しをする前にファイルを複製してください。図形は残っていても、表示中のviewBoxの外にある、透明や白で描かれている、クリップやマスクに隠れている、アプリが対応していない機能で構成されている可能性があります。空白の文書を保存し直すと、復元できたファイルが本当に空になることがあります。
コピーをブラウザーとベクターエディターで開きます。最初の分岐はこの比較です。一方だけで表示される場合は、アプリの対応機能や文書構造が主な候補です。どこでも空白なら、ビューポート、描画設定、クリップ、不正なマークアップ、内容の欠落を疑います。
7つの確認項目
- 元ファイルを保存し、ファイルサイズを調べます。
- ブラウザーとベクターエディターを比較します。
- すべて選択してオブジェクトの境界を調べます。
- 境界を
viewBox、width、heightと比較します。 - 塗り、ストローク、不透明度、display、visibilityを確認します。
- クリップ、マスク、パターン、フィルター、
<image>、<foreignObject>を調べます。 - 再ベクター化を決める前に、マークアップを検証するか書き出し直します。
この確認は診断の道筋であり、互いに無関係な7つの修正ではありません。まず形状データがあることを確認し、置き換える前に境界、縮尺、描画設定、クリップ、対応する効果、依存リソースを調べます。
1. ファイルを保存し、データがあるか確認する
別名でコピーを作成します。次にファイルサイズを調べ、プレーンテキストエディターで開きます。
0バイトのファイルや、空のルート<svg>要素しかない文書では、そのコピーから復元できるものはほとんどありません。パス、グループ、スタイル、大きなエンコードデータが含まれるファイルは、キャンバスが空に見えても空のファイルではありません。
大きなサイズから多くを推測しないでください。高解像度の埋め込み画像、重複したスタイル、不正なデータが含まれている可能性もあります。サイズが示すのは、さらに調べる価値があるということだけです。
2. ブラウザーとベクターエディターを比較する
SVGを最新のブラウザーにドラッグし、同じコピーをInkscape、Illustrator、Figmaなどのベクターエディターで開きます。
| ブラウザー | エディター | 考えられる原因 |
|---|---|---|
| 表示される | 空白 | 非対応機能、埋め込みWebコンテンツ、パターン、フィルター、マスク、読み込み機能の制限 |
| 空白 | 表示される | ブラウザー向けマークアップ、CSS、リソース、セキュリティの問題 |
| 空白 | 空白 | ビューポート、描画設定、クリップ、不正なマークアップ、内容の欠落 |
| 表示される | 表示される | 元の症状はサムネイル、読み込み方法、特定アプリに関係する可能性 |
ブラウザーで表示できても、持ち運び可能なベクターパスが含まれる証明にはなりません。ブラウザーはCADやベクターエディターが無視する埋め込みラスター画像やWebコンテンツも描画できます。
3. すべて選択して境界を調べる
ベクターエディターで*Select All（すべて選択）*を実行します。選択枠、座標、幅、高さを確認します。
- 選択枠がページから遠く離れていれば、図形はページ外にあります。
- 巨大な選択枠は、不要な点、クリップ用オブジェクト、背景の長方形を示すことがあります。
- 選択枠が普通なのに図形が見えない場合は、描画設定、不透明度、クリップが候補です。
- 選択可能なオブジェクトがなければ、非対応コンテンツ、空の文書、読み込み失敗が考えられます。
オブジェクトがページ外にあれば、選択したものをページへ移動するか、図形に合わせてページを変更します。実際の寸法も誤っている場合を除き、パスの拡大縮小は避けます。
4. 図形とviewBoxを比較する
SVGをテキストとして開き、ルート要素を調べます。
<svg xmlns="http://www.w3.org/2000/svg"
width="800" height="600" viewBox="0 0 800 600">SVG座標系の仕様で定義されるviewBoxの4つの数値は、最小x、最小y、幅、高さです。座標が10000,10000付近の図形は、viewBox="0 0 800 600"内には表示されません。viewBoxの寸法が0や負の値だと、その要素の描画は無効になります。
実際の形状に基づいて表示範囲を修正します。他のファイルの適当なviewBoxを貼り付けないでください。図形は見えるものの縮尺が誤っている場合のviewBoxとビューポート寸法の関係は、SVGのサイズが合わない場合のガイドで説明しています。
5. 描画設定と可視性を確認する
オブジェクトを選択し、塗りとストロークの両方を調べます。よくある不可視の状態は次のとおりです。
fill="none"で、ストロークもない- 白いキャンバス上の白い塗り
opacity="0"、fill-opacity="0"、stroke-opacity="0"display="none"、visibility="hidden"- スタイルシートで上記の値を適用するクラス
- 現在の縮尺では極端に細いストローク
一時的に色付きの長方形を図形の後ろに置くか、1つのパスのコピーに目立つテスト用の塗りを設定します。表示されたら、本来のスタイルに戻し、診断用の色を最終ファイルに残さないようにします。
塗りは見えるのに個々の線が書き出し後に消える場合は、SVGのストロークが消える場合のガイドで、良好な形状を再トレースせずにストロークの描画、クリップ、縮尺、非対応の外観を確認します。
6. 出力先が対応しない可能性のある機能を調べる
マークアップ内のclipPath、mask、pattern、filter、<image>、<foreignObject>を検索します。
クリップとマスクは、座標系や参照が壊れるとすべてを隠すことがあります。SVG描画モデルでは、描画工程にクリップ、マスク、フィルター、合成が含まれます。パターンやフィルターの描画は読み込み側によって異なる場合があります。SVG埋め込みコンテンツの仕様にあるとおり、<image>要素はSVGコンテナー内に画像を埋め込み、<foreignObject>は別のXML名前空間の内容を含められます。
図形は残るのにHTMLラベルが消える場合は、foreignObjectとSVG本来のテキストを比較し、失敗するラベルだけを置き換えます。
パスは見えるのに影が切れる場合は、フィルター領域と外側のビューポートを別々に確認して、SVGの影が切れる原因を調べます。
参照も失敗することがあります。url(#name)で使うIDが存在し、重複していないか確認します。外部画像、フォント、スタイルシート、リンク先ファイルに依存するSVGでは、SVGの移動によってリソースへの参照が壊れた可能性があります。
Qtアプリでは、QtのSVGレンダラーのガイドがモジュールや読み込みの確認と、対応機能の制限を分けて説明します。小さなソースから比較し、選択した描画方法で図形を調べます。
ブラウザーではデザインが見えるのにCADで何も読み込めない場合は、通常の<path>、<rect>、<circle>などのベクター形状を探します。表示された埋め込みPNGには、CADが使う曲線がありません。
7. ファイルを検証するか、書き出し直す
不正なXML、無効な属性、書き出しツール固有の構造は、あるレンダラーでは許容され、別のものでは拒否されることがあります。元のデザインがあれば、作成したアプリで開き直し、プレーンまたは簡略化したSVGのコピーを書き出します。出力先が扱えない機能だけを展開し、新しいファイルを元のデザインと比較します。
元データがなければ、SVG/XML検証ツールや構文エラーを示すテキストエディターを使います。コピーで作業し、最初の構造上のエラーから修正します。後のエラーは、その結果として出ている可能性があるためです。
唯一のコピーに最適化ツールを実行しないでください。最適化は構造を書き換えるため、原因が分からない段階では復元を難しくすることがあります。
作り直しや再ベクター化が必要な場合
ファイルに埋め込みラスター画像しかない、生成したSVGの構造がブラウザー以外で使えない、編集可能な元データが残っていない場合は、再ベクター化が適しています。最も品質の高いラスター画像を抽出または探し、実際のパスへトレースします。
ページ外のパス、壊れたviewBox、白い塗り、非対応のマスク1つには適切な修正ではありません。すでに形状があるため、それを残せば不要な品質低下を避けられます。
デザイン全体が1つのピクセル画像として選択される、深く拡大するとブロック状になる場合は、作り直す前に隠れたピクセルの診断を行います。
PerfectVectorの役割
PerfectVectorの画像からベクターへの変換は、ラスターだけの状態に向けたものです。最良のPNG、JPGなどの対応画像をアップロードし、ベクタープレビューで実際の図形、きれいな輪郭、抜き部分、扱いやすいパスを確認します。
任意のSVGマークアップの修復や外部リソースの復元は行いません。良好なパスが含まれる場合は、ベクターエディターでビューポート、スタイル、非対応機能を修正します。SVGの外枠の中にラスターしかない場合は、見えている図形をパスとして作り直すことで、別の包みではなく持ち運び可能なベクターを得られます。
よくある質問
Chromeでは見えるのにIllustratorではSVGが空白なのはなぜですか？ ブラウザーが対応していてもIllustratorが読み込めない機能を使っている可能性があります。埋め込みWebコンテンツ、複雑なパターン、フィルター、マスク、ラスターを包んだ構造などです。マークアップを調べ、通常のベクターパスがあるか確認してから、簡単なSVGのコピーを書き出します。
キャンバス外にあるSVGの図形を見つけるには？
Select All（すべて選択）で、選択範囲や座標を調べます。枠がページから遠くに現れたら、ページへ移動するか、図形に合わせてページを変更します。その後、意図した表示形状に合わせてviewBoxを更新します。
白いSVGが空白に見えることはありますか？
あります。白い塗りやストロークは白いキャンバス上では見えません。不透明度0、display="none"、visibility="hidden"の場合もあります。色付き背景で試し、計算済みスタイルを確認します。
FusionなどのCADアプリでSVGが空白として読み込まれるのはなぜですか？
ベクター曲線の代わりに埋め込みビットマップや非対応のWebコンテンツが含まれている可能性があります。CADには読み込めるパス形状が必要です。<path>と関連する図形を探し、見えている内容が<image>や<foreignObject>内にあるのか確認します。
空白のSVGをPNGに変換してからSVGに戻すべきですか？ 復元できるベクター形状がなく、ラスターの外観が残っている最良の元データである場合に限ります。PNGを経由すると既存のパス構造が失われます。まずビューポート、可視性、クリップ、対応機能の問題を診断してください。
参考資料
- W3C — SVG 2座標系 — ビューポート、
viewBox、単位、変換を定義します。 - W3C — SVG 2描画モデル — クリップ、マスク、フィルター、合成、描画順序を説明します。
- W3C — SVG 2埋め込みコンテンツ — SVGの埋め込み画像と外部名前空間の内容を定義します。
- W3C — マークアップ検証サービス — マークアップの問題を調べるための、標準に基づく文書検証を提供します。
残ったファイルがSVGコンテナー内のピクセルだけなら、図形を編集可能なベクターパスとして作り直し、プレビューを確認します。良好なパスがある場合は保存し、文書の問題が起きている最小限の部分を修復してください。
