SVGがピクセル化して見える原因と直し方

SVGは拡大しても滑らかに表示されるはずです。それでも輪郭が角ばって見える場合は、よくある3つの原因から確認します。ファイル自体にピクセルが含まれている、アプリがプレビューや読み込み時にラスター化している、または本物のベクターが小さなピクセルグリッド上でぼけている可能性があります。原因ごとに対処法が違うため、短い確認で見分けましょう。この記事で扱わないのは、拡大するとピクセル化するPNGやJPGのロゴです。そのファイルはもともとSVGではなく、別の対処法があります。

30秒で原因を見分ける

• 2つのビューアーで大きく拡大します（500%以上）。 どちらでも角ばるなら、ラスター画像が含まれている可能性があります。1つのアプリだけなら、そのアプリがプレビューをラスター化しているのでしょう。
• SVGをテキストエディターで開きます。 <image>タグに長いdata:image/png;base64,…があれば、その「ベクター」の正体はビットマップです。
• ファイルの確認で判断します。 拡大表示は手がかりです。<image>要素や長方形の画像オブジェクトがあれば、ピクセルの埋め込みを確認できます。

原因1：SVGの中にピクセルが入っている

これは画像の埋め込みによる落とし穴です。SVGはコンテナー形式で、SVG 2仕様では<image>要素によるラスター画像の埋め込みや参照が認められています。リンクされたPNG、埋め込みデータ、入れ子のSVGを区別したい場合は、画像が混在するSVGの確認方法をご覧ください。ツールはこの機能をさまざまな形で利用します。

• 見せかけの変換。 一部の「PNGからSVG」ツールは何もトレースしません。ビットマップを<image>タグで包み、拡張子を.svgにして返すだけです。中身は元のPNGなので、拡大すると元画像とまったく同じように粗くなります。
• 難しい部分だけラスター化する書き出し。 デザインアプリは対応できる部分をパスとして書き出し、対応できないドロップシャドウ、ぼかし、グラデーションメッシュ、画像の塗りを目立たない形でラスター化します。そのため、ロゴのほとんどは鮮明なのに、曲がった部分や特定の効果だけ粗くなることがあります。デザインのフォーラムでよく見られる「一部だけピクセル化する」問題です。
• 写真。 写真をきれいなパスに変えることはできないため、写真をSVGに「変換」するツールは画像を埋め込むか、階調を減らした近似表現を生成することがよくあります。地図ツールでは陰影レイヤーに意図的に画像を使うこともあります。陰影は本来連続した階調を持つので、これは正当な使い方です。
• 形式のラッパー。 あるアプリでは読めても別のアプリでは読めないベクターデータが入っている場合があります。アプリが理解できないデータに遭遇すると、組み込まれたラスタープレビューを代わりに表示します。その結果、あるソフトではピクセルが見え、別のソフトではきれいなベクターが表示されます。

確認方法： .svgを任意のテキストエディターで開き、<imageを検索します。base64のデータがあれば原因はそれです。InkscapeやIllustratorでぼけた部分をクリックして、パスではなく1つの長方形の「画像」オブジェクトとして選択される場合も同じです。AIツールや書き出し機能が作る見せかけのSVGもこの方法で確認でき、1分もかかりません。

対処法： ピクセルをパスに変える必要があります。つまり、ラスター部分を実際にベクター化します。元画像または埋め込み画像を本物の画像ベクター変換にかけ、<image>要素をトレース結果に置き換えます。埋め込まれているのが写真なら、ベクター化にも限界があります。ラスターが適している部分は、そのまま使うことが妥当な対処法になる場合もあります。

ファイルの中にある手がかり

原因2：ファイルは正常でも、ビューアーがラスター化している

ブラウザーやInkscapeではパスが鮮明なのに、あるアプリだけで角ばる場合、ファイルの編集は必要ありません。そのアプリの読み込み処理やプレビュー処理に原因があります。

• 一部のアプリの読み込み処理は、読み込みサイズやプレビューサイズでSVGをラスター化します。その後キャッシュされた画像を拡大すると、ビットマップを拡大することになります。アプリ側で、目的の解像度で読み込むかレンダリングするのが対処法です。
• After Effectsは、レイヤーの変形に合わせてベクターレイヤーを連続的にラスター化できます。AdobeはベクターレイヤーのContinuously Rasterize（連続ラスタライズ）スイッチを説明しています。コンポジションのプレビューだけが粗い場合は、SVGを変更する前にプレビュー解像度とレイヤーのスイッチを確認します。
• Illustratorでは、ピクセルプレビューで意図的に画像を表示できます。パス自体がピクセル化していると判断する前に、View > Pixel Preview（表示 > ピクセルプレビュー）をオフにします。
• サムネイルとプレビュー。 ファイル管理ソフトのサムネイルやクイックルックは、低解像度でラスター化された表示です。ファイルの品質は判断できません。

共通の確認方法は、同じファイルをブラウザーかInkscapeで開くことです。そこで鮮明ならSVGは正常で、もう一方のアプリの読み込み設定やプレビュー設定を調整します。

ゲーム用素材なら、元ファイルにベクターパスがないと判断する前に、GodotのSVG読み込みとラスター化の手順、または使用するエディターとUIシステムに合うUnityのSVG読み込み方法を確認してください。

原因3：本物のベクターでも小さいサイズではぼける

アイコンは16〜24ピクセル程度で使われます。このサイズでは、数学的に正確な曲線でも粗いピクセルグリッドに配置されます。アンチエイリアスにより輪郭のピクセルが灰色になり、特に細いストロークや半ピクセルの位置では「少しぼけている」と感じられます。拡大するとベクターの輪郭は鮮明なので、埋め込み画像の問題とは区別できます。

対処するのはデザイン側です。目的のサイズで水平・垂直の輪郭を整数ピクセルに揃え、ストローク幅も整数ピクセルにします。使用するサイズに合わせて描かれたアイコンセットを選ぶことも有効です。デザインツールが書き出す非常に精密なパスデータは、小さいサイズでぼけを強める場合があります。簡略化したパスのほうが表示を予測しやすくなります。

原因と対処法の早見表

SVGにピクセルを入れないために

予防で大切なのは、変換や書き出しの時点で確認することです。SVGを使う前に、一度テキストエディターで確認します。<path>要素なら問題ありませんが、<image>のデータはベクターではありません。画像を変換するときは、包むだけでなくトレースする変換ツールを使い、個別の形を選択して結果を確認します。デザインツールから書き出すときは、先に効果をパスとして統合または展開します。書き出し機能がベクターで表現できないものは、ピクセルとして出力されるためです。SVGとは何かも意識しましょう。拡張子が示すのは形式であり、中身までは保証しません。

PerfectVectorではどうなるか

PerfectVectorは画像を実際のパスへトレースし、画像を包むだけの処理は行いません。PNGやJPGをアップロードすると、選択、色変更、どこまでも拡大できる形になります。各色は個別の編集可能なオブジェクトで、ファイル内に<image>要素はありません。「SVG」の正体がビットマップだったとわかったら、元画像を正しく変換し、出力にも同じテキストエディターの確認を行ってください。一度違いを見れば、同じ問題を避けやすくなります。最初の変換は無料で、クレジットカードは不要です。

よくある質問

拡大するとSVGがピクセル化して見えるのはなぜですか？ アプリによってはプレビューをラスター化するため、拡大表示だけではピクセルが入っているとは断定できません。ブラウザーかInkscapeで開き、ソースの<image>要素を確認するか、ぼけた部分を選択して長方形の画像オブジェクトか調べます。埋め込みラスター画像だと確認できたら、その部分をベクター化して画像要素を置き換えます。

SVGに画像が埋め込まれているか確認する方法は？ 任意のテキストエディターで開き、<imageを検索します。長いdata:image/png;base64文字列は、ファイルに埋め込まれたビットマップです。InkscapeやIllustratorでぼけた部分をクリックしても確認できます。パスではなく1つの長方形の画像として選択されるなら、画像が埋め込まれています。

ブラウザーでは正常なのに、あるアプリでSVGがピクセル化するのはなぜですか？ そのアプリがラスター化しているためです。ゲームエンジンは読み込みサイズで、After Effectsのプレビューはコンポジション解像度でSVGをラスター化します。埋め込み画像を標準で角ばった補間方法で表示するアプリもあります。ブラウザーやInkscapeで鮮明なら、ファイルは正常なのでアプリの設定を調整します。

埋め込み画像を含むSVGは修正できますか？ はい。元のラスター画像、または取り出した埋め込み画像を本物のベクター化ツールにかけ、画像要素をトレース結果で置き換えます。写真が埋め込まれている場合、写真はきれいなパスに単純化できないため、忠実な複製ではなく、スタイルを変えたベクターの近似表現になると考えてください。

小さいSVGアイコンがぼけるのはなぜですか？ 通常は埋め込み画像ではなく、ピクセルグリッド上のぼけです。16〜24ピクセルでは、位置のずれた輪郭がアンチエイリアスによって灰色のピクセルになります。目的のサイズで輪郭とストローク幅を整数ピクセルに揃えると、鮮明になります。拡大してパス自体が鮮明か確認してください。

PNGをSVGに変換すれば必ず本物のベクターになりますか？ いいえ。画像を実際にパスへトレースするツールもあれば、PNGをSVGコンテナーに包むだけのツールもあります。拡大しても滑らかなのは前者だけです。変換後のファイルにimageタグがないか確認し、編集可能な形を結果で確認できるツールを選びましょう。

参考資料

1. W3C：SVG 2の埋め込みコンテンツ — SVGの<image>要素と、SVG文書内のラスター画像を定義しています。
2. Adobe Illustrator：アートワークの表示 — ピクセルプレビューなどの表示モードを説明しています。
3. Adobe After Effects：レイヤー — ベクターレイヤーの連続ラスタライズスイッチを説明しています。
4. Adobe Illustrator：ピクセルに正確に揃えたアートの作成 — 小さいアートワークをピクセルグリッドに揃える方法を説明しています。

---

使用中のファイルが怪しいと感じますか？拡大テストを行い、元画像を本物のパスベースのSVGに変換して比べてください。ピクセルは隠せても、パスとの違いは確認できます。