SVGをPNGに変換するとぼやける原因と直し方

SVGはベクター形式なので、PNGに変換しても常にきれいに見えると思われがちです。しかしPNGはピクセルでできた画像です。一度PNGとして書き出した時点で、画像の幅と高さは固定されます。そのPNGを後から拡大表示すれば、元のSVGがどれだけ正確でも、表示はぼやけます。

SVGからPNGへの変換でぼやける原因は、多くの場合このどれかです。出力サイズが小さい、PNGがブラウザや資料作成ソフトで拡大されている、viewBoxが適切でない、細い線がピクセルグリッドに合っていない、または書き出し時にフォントが置き換わっている。

ここでは、実際の作業で確認しやすい順番で整理します。

> まず最終的な表示サイズを確認する

最初に見るべきなのは、SVGファイルに書かれたサイズではなく、PNGが最終的にどの大きさで表示されるかです。

たとえばWebページ上で64 x 64 CSSピクセルで表示するアイコンを、32 x 32 PNGとして書き出している場合、ブラウザはその画像を2倍に拡大します。この時点でピクセルが補間され、エッジが柔らかく見えます。

目安は次の通りです。

用途	推奨するPNG出力
24pxの小さなUIアイコン	24、48、72px
64pxの機能アイコン	64、128、256px
400px幅のWeb用イラスト	800px程度も用意
スライド用の大きな図	実際の表示幅、必要なら2倍

高解像度ディスプレイで使う画像は、表示サイズの2倍で出力しておくと安定します。

> PNGが後から拡大されていないか確認する

PNGそのものは問題なくても、HTML、CMS、PowerPoint、Wordなどに配置したときに拡大されていることがあります。

たとえば実ファイルが80 x 80なのに、HTMLで160 x 160として表示しているケースです。

<img src="logo.png" width="160" height="160" />

この場合、ブラウザは存在しないピクセルを補うため、輪郭がぼやけます。

確認手順は簡単です。

PNGファイルをブラウザで直接開く。
元画像の幅と高さを確認する。
実際にページや資料で表示されているサイズと比べる。
表示サイズの方が大きければ、より大きいPNGを書き出す。

同じアイコンを複数の場所で使うなら、1つの小さなPNGを使い回すのではなく、用途別に複数サイズを用意する方が安全です。

> viewBoxが正しいか見る

viewBoxは、SVGのどの範囲を表示するかを決める重要な属性です。ここが不自然だと、変換時にスケールや余白、切り抜きが予想外になります。

よくある形は次のようなものです。

<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">

確認したい問題は次の通りです。

viewBoxがない
viewBoxと実際の図形範囲が合っていない
図形が表示領域の外にある
座標が極端に大きい
デザインツールでフレームではなくオブジェクトだけを書き出した

アイコンセットを作る場合は、Figma、Illustrator、Sketch、Inkscapeなどで同じサイズのフレームやアートボードから書き出すと、PNG化した後も揃いやすくなります。

> 細い線と半端なサイズに注意する

1pxの線や細いアウトラインは、PNG化したときにピクセルグリッドと合わないことがあります。線が2つのピクセルの間に乗ると、レンダラーはアンチエイリアスをかけるため、線が少しにじんだように見えます。

特に影響を受けやすいのは次のような画像です。

1px線のアイコン
グリッドやチャート
小さなUIアイコン
細かい文字を含む図

対策としては、24px、48px、96pxのような整数倍で書き出すこと、25pxや31pxのような中途半端なサイズを避けること、小さいアイコンでは線をアウトライン化することが有効です。

拡大表示したプレビューだけで判断せず、実際に使うサイズで100%表示して確認してください。

> フォントが置き換わっていないか確認する

SVG内のテキストは、フォント名を参照しているだけの場合があります。書き出し環境にそのフォントがないと、別のフォントに置き換わります。文字幅や字間が変わり、結果としてぼやけたり、ずれて見えたり、切れてしまうことがあります。

ロゴ、バッジ、固定の見出し画像では、テキストをアウトライン化してからSVGを書き出すのが安全です。アウトライン化すると文字はパスになるため、PNG変換時にフォント環境へ依存しません。

テキストを残すべき場面もあります。Webページ上で本物のテキストとして扱いたい場合、コピーや検索が必要な場合、CSSで確実にフォントを読み込める場合です。

最終的にPNGだけが必要な固定デザインなら、アウトライン化した方が結果は安定します。

> 背景色と透過も見た目に影響する

画像が本当に低解像度なのではなく、背景とのコントラストが弱くてぼやけて見えることもあります。半透明のグレーアイコンを薄い背景に置くと、輪郭が弱く感じられます。

アイコンやロゴは、基本的に透過PNGで書き出すのが扱いやすいです。背景色を固定するのは、ターゲットのソフトが透過を扱えない場合、またはデザインとして背景込みで使う場合に限るのが無難です。

JPGに変換する場合は透過が使えないため、背景色を明確に決めておく必要があります。

> おすすめの書き出し手順

安定した結果にするには、次の順番で進めます。

最終的な表示サイズを決める。
表示サイズまたは2倍サイズでPNGを書き出す。
SVGのviewBoxを確認する。
フレームやアートボードのサイズを揃える。
ブランド上重要な文字はアウトライン化する。
アイコンやロゴは透過PNGにする。
実際に使うページや資料で確認する。

svg2img.ccを使う場合も、出力幅と高さを明確に指定してください。まず代表的な1ファイルで試し、実際の表示サイズで問題ないことを確認してから、同じ設定で残りのファイルを変換すると安全です。

> 確認チェックリスト

SVGからPNGに変換した画像がぼやけるときは、次を順番に確認してください。

PNGの元サイズが表示サイズより小さくないか
Webページや資料内で拡大されていないか
SVGに正しいviewBoxがあるか
細い線が半端な位置にないか
フォントが別のものに置き換わっていないか
100%表示で確認しているか
背景とのコントラストが弱すぎないか

ぼやける問題は、変換ツールだけでなく、サイズ、配置、フォント、最終表示環境の組み合わせで起こります。そこを揃えると、SVGからPNGへの変換はかなり安定します。