SVGがぼやけて見えるのはなぜ? よくある原因と対処法
SVGはベクターファイルなので、本来どんなサイズでも鮮明さが失われることはありません。もしSVGがぼやけて見えるなら、何か特定の問題が起きています ― その原因を突き止める方法を解説します。
その「SVG」、実はラスター画像かもしれません
最も多い原因はこれです。一部のツールは、本物のベクターパスをトレースする代わりに、Base64エンコードされたPNGやJPEGを`<image>`タグの中に埋め込んだだけのSVGファイルを生成します。拡張子は.svgですが、内部的には依然としてラスター画像であるため、PNGとまったく同じように拡大するとぼやけてしまいます。ファイルをテキストエディタで開いてみましょう ― `<path>`要素の代わりに長いBase64文字列が見えたら、それが原因です。この違いが重要な理由についてはPNGとSVGの違いをご覧ください。
ノイズの多い画像をディテール設定が非常に高い状態でトレースした
意外に思われるかもしれませんが、低品質だったり強く圧縮されたりした元画像を非常に高いディテール設定でトレースすると、滑らかどころか粗く見える、細かくギザギザしたパスセグメントが大量に生成されてしまうことがあります ― トレースが元ファイルのノイズを忠実に再現してしまっているのです。よりクリーンな元画像から再トレースするか、スムージングの設定を上げて、アルゴリズムがより少なく滑らかな曲線を優先するようにしてみてください。
パイプラインのどこかでSVGがラスタライズされている
一部のプラットフォーム(特定のCMSの画像処理機能、古いブラウザ、デザインツールのエクスポート設定など)は、表示前にSVGを固定解像度のラスター画像に変換してしまうことがあります。その時点で、PNGと同じ拡大縮小の問題をすべて引き継いでしまいます。お使いのプラットフォームに、変換せずにSVGをそのままネイティブに配信・埋め込みできるオプションがないか確認してみてください。
解決方法
- 本物のパスデータを出力するツールを使って、元のPNGから再トレースする ― 無料のPNG to SVG変換ツールを試して、使用前に結果を確認しましょう。
- ディテールがギザギザに見える場合は、スムージングの設定を上げて再度ダウンロードする。
- 表示の際にプラットフォームがSVGをラスタライズしてしまう場合は、変換済み画像ではなくネイティブなSVGとして埋め込み・リンクできる設定を探す。
よくある質問
自分のSVGが本当にベクターかどうか、すぐに確認する方法はありますか?
ファイルをテキストエディタで開き、`<path>`や`<circle>`といった図形要素を探してみてください。その代わりに`<image>`タグの中に長いBase64文字列が見える場合、それは拡張子だけがSVGのラスター画像です。
ブラウザでズームインすると、SVGはぼやけますか?
いいえ ― 本物のベクターSVGは、ブラウザのどんなズームレベルでも鮮明なままです。ズームインしてぼやける場合、そのファイルは本物のベクターパスではなく、ラスター画像である可能性が高いです。
さっそくご自身の画像を変換してみませんか? png to svg converter.
png to svg converter関連記事
本物のベクターファイルが、ラスターファイルとこれほど違う挙動をする理由を解説します。
見せかけのラスター埋め込みSVGでは、まったく使い物にならない活用事例をご紹介します。