SVGにラスター画像が含まれるか確認する方法
SVGの埋め込み・リンク画像を調べて本物のパスと区別し、拡大表示だけに頼らず適切な修正方法を選ぶ手順を解説します。
目次
はい、SVGにはラスター画像を含められます。同じ文書にベクターパスとピクセルを保持することも、PNGやJPEGを包むだけのファイルに近いものになることもあります。.svgという拡張子が示すのは容器の形式で、見える部分がすべてベクターかどうかではありません。
確実な確認には、オブジェクトとファイルのソースの両方を調べます。拡大すると問題に気づきやすくなりますが、アプリがプレビューをラスター化しているのか、実際にSVGにピクセルが保存されているのかは判断できません。
WPFアプリでは、WPFでのSVG表現のガイドがSVGソース、ネイティブな描画オブジェクト、ビットマップでの提供を区別しています。ラスター化された表示を元ファイルの証拠と考える前に、アプリが何を受け取っているか確認してください。
60秒での確認
- ベクターエディターでSVGを開き、疑わしい部分を選択します。長方形の画像オブジェクトは手掛かりになり、編集可能なパスとノードはベクター形状です。
- テキストエディターでファイルを開き、
<imageを検索します。 - その要素の
hrefまたは古いxlink:hrefの値を確認します。data:image/pngやdata:image/jpegは埋め込みラスター、photo.pngのようなファイル名はリンクされたラスターを示します。 - タグ名だけで判断しないでください。
<image>要素は別のSVGも参照できます。
SVGに含められるもの
SVGはXMLベースのグラフィックス形式で、内容はパスだけに限りません。SVG 2の埋め込みコンテンツ仕様は、参照先のファイル全体を長方形の中に配置する<image>要素を定義しています。そのファイルはPNG、JPEG、別のSVGのいずれでも構いません。
よくある構成は次の4つです。
| 構成 | 中身 | 拡大縮小した場合 |
|---|---|---|
| パスのみ | <path>、<rect>、<circle>などの図形 | 新しいサイズで形状を描き直す |
| 埋め込みラスター | SVG内のdata: URLに保存したピクセルデータ | SVGだけで完結するが、画像にはピクセルの限界が残る |
| リンクされたラスター | 別のPNGやJPEGを指す<image>要素 | ピクセルの限界が残り、リンク切れも起こり得る |
| 混在したSVG | パスと、埋め込みまたはリンク画像 | ベクター部分は形状のまま、ラスター部分はピクセルのまま |
混在自体が悪いわけではありません。地図ではラベルや境界をパスにし、陰影付き衛星画像をラスターのまま使うことがあります。商品画像に編集可能なバッジを重ねる場合もあります。問題は、変換で編集可能なパスができると思っていたのに、別の容器に入ったピクセルを受け取った場合です。
確認1：オブジェクトを調べる
Illustrator、Inkscape、Affinity Designerなど、オブジェクトまたはレイヤーパネルのあるエディターでSVGを開きます。ラスターと思われる部分を選択します。
- 画像と表示された単一の長方形オブジェクトは、画像コンテンツの強い証拠です。
- 作品の実際の縁に沿って見えるノードは、ベクター形状を示します。
- クリッピングパスが長方形の画像を隠している場合があるため、判断前にレイヤーやオブジェクトのツリーを展開します。
- 別の場所にパスがあっても、文書全体がベクターである証明にはなりません。1つのファイルに両方を含められます。
XMLを読みたくないデザイナーには便利な確認方法ですが、1つ限界があります。長方形の<image>オブジェクトは別のSVGを参照することもあります。実際に何を読み込むかは、ソースの確認で分かります。
確認2：SVGのソースを調べる
コピーを作り、.svgファイルをプレーンテキストエディターで開きます。<imageを検索します。画像要素がなければ、一般的な画像埋め込みの仕組みは使われていません。見つかったらhrefの値を読みます。
埋め込まれたPNGは、よく次のように始まります。
<image href="data:image/png;base64,iVBORw0KGgo..." />埋め込まれたJPEGは通常data:image/jpeg;base64,で始まります。MDNのdata URLリファレンスは、任意のBase64エンコードを使い、データをURL内に直接置くことを説明しています。この形式で非常に長く読みにくいデータがあるのは正常です。
リンクされたラスターは、次のようになります。
<image href="photos/product-shot.png" />このPNGはSVG内には保存されていません。文書は、そのパスの別ファイルに依存します。画像を添えずSVGだけを移動・メール送信すると、作品が消えることがあります。
一方、次はラスターの証拠ではありません。
<image href="icons/mark.svg" />MDNの<image>リファレンスには、この要素がラスター形式または別のSVGを表示できると明記されています。分類前にメディアタイプや拡張子を確認してください。
埋め込みとリンクでは問題が異なる
Inkscapeで画像を読み込む際には、リンクか埋め込みを選べます。画像読み込みガイドは違いを明確に説明しています。リンクはSVGを小さくしますが画像の場所に依存し、埋め込みはSVGだけで完結する代わりにサイズが増えます。
受け渡しでは、この違いが重要です。
- 埋め込みラスター： 1ファイルで渡せますが、解像度の制約が残り、予想より大きくなることが多いです。
- リンクされたラスター： 別途更新しやすい一方、フォルダー、コンピューター、Webサイト、業者をまたぐ移動では壊れやすくなります。
- ベクターパス： 形状として編集できますが、元データを最初からパスとして描くかトレースした場合に限ります。
埋め込みは梱包であってベクター化ではありません。Base64はピクセルを曲線に変えません。ストック素材を準備する場合は、Adobe Stockのベクター投稿チェックで、追加のアートボード、編集可能性、元データの確認を行います。
拡大だけでは不十分な理由
複数のビューアーで高倍率にすると疑わしい部分が四角いピクセル状になるなら、おそらくラスターです。ただしビューアーは、正常なSVGでもサムネイル、キャンバス、印刷プレビュー、読み込みキャッシュのためにラスター化する場合があります。逆に、高解像度の埋め込みPNGは通常倍率で滑らかに見え、文書内に気づかれず残ることがあります。
拡大は症状の確認として使い、オブジェクトやソースで確かめます。SVGにピクセルが見える理由のガイドでは、埋め込みコンテンツ、ビューアーの挙動、小さなアイコンの表示を区別しています。キャンバスアプリでは、単一の画像ノードをSVGソースの問題と解釈する前に、Konvaでの画像と編集可能パスの読み込みを比較してください。
保持、再リンク、置き換えを選ぶ
ピクセルが意図したものなら保持する
写真、スキャン、質感、柔らかな光、複雑な絵画の細部は、ラスター形式が向くことが多いです。画像とベクターのラベルや重ね合わせを組み合わせるためのSVGなら、混在ファイルが正しい設計かもしれません。最終的な物理サイズに対して十分な解像度があるか確認し、単独で完結させるか、リンク素材と一緒に渡すかを決めます。
持ち運びの問題なら再リンクまたは埋め込む
別のコンピューターでリンク画像が消えるなら、SVGと画像を同じ相対フォルダー構造でまとめるか、納品前に埋め込みます。これは不足するリソースを修正しますが、画像をパスとして編集できるようにはしません。
パスが必要だったならラスターを置き換える
変換ツールがフラットなロゴ、アイコン、線画をSVGで包んだだけなら、元のPNGまたはJPEGを探します。元画像がなければ埋め込み画像を取り出すか、そのオブジェクトを元のサイズで書き出します。その後画像をベクターパスへ変換し、図形を確認して、<image>オブジェクトを検証したベクター結果に置き換えます。
PerfectVectorは、適したフラットな作品を編集可能な図形へ再構成するのに役立ちます。連続階調の写真を、少数の忠実なパスに自動で変えるものではありません。写真は意図的なポスタライズが目的でなければラスターで残します。確認済みSVGからPNG納品用コピーが必要なら、Sharpで最終ピクセルサイズへ直接描画します。小さなPNGを拡大しても、そのSVGに埋め込まれたラスター画像の細部は増えません。
Scratchを使う場合は、また別の容器を書き出す前にConvert to Vectorがビットマップをトレースしない理由を確認してください。
書き出し時にラスター化された効果を作り直す
大半がベクターでも、影、ぼかし、質感、未対応の効果1つだけがラスターになっているSVGもあります。その効果を編集可能で互換性のある状態に保つ必要があるか決めます。単純な効果を対応するベクター機能で作り直す、納品解像度のラスターへ意図的に固定する、除去する、のいずれかを選びます。柔らかな影のトレースは、効果を改善するよりノイズの多い図形を作ることが一般的です。
混在SVGの納品チェック
Webサイト、印刷先、カッター、共同作業者へ送る前に、次を確認します。
- ソースで
<image、data:image/、.png、.jpg、.jpegを検索します。 - 各参照リソースがラスター、ベクター、不要のどれであるべきか確認します。
- リンクファイルを一時的に移動し、SVGを開き直して壊れた依存を見つけます。
- 重要な作品を選択し、編集すべき部分がパスであるか確認します。
- ラスターの元のピクセル寸法を最終表示・印刷サイズと照合します。
- 納品用コピーを別のアプリで開き直します。
- 編集より見た目が重要なら、元データとラスター見本を残します。
切断や製作では、機械用ファイルから装飾的なラスターを除去し、切断用SVGの事前確認を行います。カッターはパスをたどるもので、埋め込み写真を切断輪郭に変えることはありません。
よくある質問
SVGにPNGやJPEGを含められますか？ はい。SVGの画像要素は、別ファイルのPNGやJPEGを参照したり、データをSVG内に保存したりできます。ラスターは元のピクセルベースの挙動を保ちます。
画像タグがあれば、必ずSVGにラスター画像が入っていますか？ いいえ。画像要素は別のSVGも参照できます。分類前にhrefまたは古いxlink:hrefの値を見て、メディアタイプ、data URL、ファイル名を調べます。
埋め込みとリンクのどちらかはどう分かりますか？ 埋め込み画像のhrefは通常data:imageで始まり、バイトデータがSVG内にあります。リンク画像はimages/photo.pngのようなパスやURLを持ち、その別リソースに依存します。
SVGから埋め込み画像を取り除けますか？ はい。不要なら削除し、意図したラスター素材に置き換えるか、適したフラットな作品をベクター化して生成パスに置き換えます。XMLを編集する前にバックアップを残してください。
SVGにパスと画像の両方があるのはなぜですか？ 混在SVGだからです。写真とベクターの重ね合わせを意図して組み合わせているか、書き出し側が効果をラスター化した可能性があります。変更前にどの部分を編集可能にすべきか調べます。
参考資料
- W3C — SVG 2の埋め込みコンテンツ —
<image>要素、href、参照できるラスターまたはSVGリソースを定義しています。 - MDN — SVGの
<image>— 対応する画像コンテンツとサイズの挙動の実用的なリファレンスです。 - Inkscape入門ガイド — 画像の読み込み — 読み込んだ画像のリンクと埋め込み、持ち運びやすさの違いを説明しています。
- MDN — data URL — SVG内に画像データを保存する際によく使われる
data:スキームの説明です。
編集可能なパスがあるべき場所に、包まれたビットマップがありましたか？ 元のフラットな作品を実際のベクターへ変換し、SVGを開き直し、重要なオブジェクトが図形として選択できることを確認してください。
