SVGからPNGへの変換：品質を失わずにベクターをラスター化する方法

Last updated: July 10, 2026

SVGとPNGは、同じ種類のファイルが異なる「味」をしているわけではありません。SVGは図形を数学的な計算式として保存し、PNGは固定されたピクセルグリッドとして保存します。SVGをPNGに変換するということは、その図形を指定したサイズでラスタライズすることであり、一度そうしてしまうと、結果を元の状態に戻して拡大してもぼやけてしまいます。このガイドの目的は、最適なサイズを一度選び、透明度を維持し、同じロゴを何度も再変換する手間を省く方法をお伝えすることです。

クイックアンサー：SVGをPNGに変換すべきですか？

SVGはソースとして保持し、ターゲットシステムがベクターデータを使用できない場合にのみPNGをエクスポートしてください。メールクライアント、古いCMSの画像フィールド、一部の広告プラットフォーム、そしていくつかの印刷パイプラインでは、フラットなラスタファイルが必要です。ウェブアイコン、ファビコン、またはスケーリングが必要なあらゆるものについては、SVGのまま使用してください。変換を行う際は、高DPIスクリーンでシャープに保つために最大の表示幅の2倍（2x）でPNGをレンダリングし、透明度のためにアルファチャンネルを保持し、元の.svgファイルも一緒にアーカイブすることを忘れないでください。

SVGとPNGの実際の違いは何ですか？

SVGは<path>、<rect>、<circle>要素が詰まったテキストファイルです。ブラウザまたはレンダラーは、要求されたあらゆる解像度でそれらの図形を描画するため、16pxのアイコンも1600pxのヒーロー画像も、同じソースから品質損失なしに生成されます。SVG2 specificationがこのモデルを定義しており、座標空間を設定するviewBoxを含んでいます。

PNGはラスタコンテナです。正確なピクセルグリッドと、オプションの透明度用アルファチャンネルを保存し、非可逆圧縮（lossless compression）をサポートしています。libpng.orgでのPNGフォーマットリファレンスがチャンク構造を深く解説しています。PNGは、自分がベクターファイルから来たかどうかを「知る」ことはなく、自身の幅と高さだけを知っています。

image format guideでは、それぞれのコンテナが優位となるケースについてより深く掘り下げています。要するに：SVGはあなたの「描画」であり、PNGはその描画を特定のサイズで印刷した「コピー」です。

ラスタライズは実際にどのように機能しますか？

ラスタライズとは、ベクター計算式がピクセルになる工程のことです。レンダラーはSVGを読み取り、どのピクセルが各図形の内側に入るかを計算し、それぞれのピクセルに色値を書き込みます。あなたが制御するのは、ピクセル単位の出力幅と高さという数値です。

この単一の数値がすべてを決定します。同じSVGを128pxでレンダリングすると、ファビコンサイズではシャープに見えますが、4Kモニターではぼやけて見えます。これを2048pxでレンダリングすればどこでもシャープですが、ファイルは重くなります。SVGには失う「解像度」がないため、単に何ピクセルを焼き込むかを選んでいるだけなのです。

このテストを行うために、あるアイコンを3つの幅に変換してみました。64pxのエクスポートは4 KBでツールバー上でクリーンに見え、512pxのエクスポートは24 KBで2x表示時に適切に見え、2048pxのエクスポートは142 KBでしたが、フルスクリーンでのベクターと区別がつきませんでした。元のSVGは全体を通して1.2 KBでした。教訓は、調整しているのはSVGではなくPNGのサイズであるということです。

アンチエイリアシングがもう一つの重要な部分です。斜めやカーブしたエッジがピクセルグリッドに当たる場所で、レンダラーは背景とエッジの色をブレンドし、線がギザギザに見えないようにします。これが、1pxのストロークであっても、小さすぎるサイズでレンダリングするとぼやけて見える理由であり、透明な背景が重要である理由です。アンチエイリアシングは、図形の背後にあるものに対してブレンドを行うからです。

代わりにSVGを保持すべきなのはどんな時ですか？

画像がスケーリングする必要がある場合や、小さく保たなければならない場合はSVGを保持してください。これらのケースでは、PNGが必要になることはほとんどありません。

• ウェブアイコンやUIシンボル（同じアセットが16pxと48pxでレンダリングされる場合）。
• ビューポートに合わせてサイズ変更するサイトヘッダーのロゴ。
• ズームしてもテキストがシャープに保たれる必要がある図表やチャート。
• 後からアートワークを再編集する可能性がある場所。

最新のブラウザは、SVGをインライン、<img>ソース、およびCSS背景として問題なく処理します。MDNのimage type referenceが示すように、現在のエンジン全体で幅広いSVGサポートが確認されています。「PNGの方が安全に感じるから」という理由だけで変換を行う場合、通常は何も得るものがないのにファイルサイズを増やしているだけです。

実際にPNGが必要になるのはどんな時ですか？

宛先がベクターを受け付けない場合や、固定されたポータブルなラスタコピーが欲しい場合に変換します。

• HTMLメール（ほとんどのクライアントがSVG全体を削除またはブロックするため）。
• ラスタアップロードのみを受け付けるレガシーCMSフィールドやサードパーティウィジェット。
• 既知のDPIでフラットな画像が期待される印刷物やPDFパイプライン。
• アップロードされた画像を再エンコードし、SVGを破損させる可能性のあるプラットフォームへの共有。
• SVGとは別にPNGフォールバックを依然として期待するファビコンバンドル。

特にファビコンの場合、favicon icon converter guideが通常必要なマルチサイズエクスポートを示しています。

コマンドラインでSVGをPNGに変換するには？

コマンドラインを使用すると、再現性のある出力を得られ、ファイルが数個以上ある場合は最も速い方法です。このガイドのテストアイコンは、結果を比較するために3つの異なるツールを使用してレンダリングしました。

私が使用した中で最も予測可能なレンダラーは**rsvg-convert (librsvg)**です。viewBoxを尊重し、フォントをきれいに処理し、デフォルトで透明度を維持します。

## librsvgをインストール
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Debian/Ubuntu

## 表示幅の2倍でエクスポートし、背景は透過にする
rsvg-convert -w 1024 -h 1024 input.svg -o output.png

ImageMagickは多くのマシンにすでに搭載されており、簡単な一時的な作業には十分です。そのSVGレンダリングは内部エンジンに委任されるため、複雑なファイルは目視で確認してください。

## 透明な背景、固定サイズ
magick -background none input.svg -resize 1024x1024 output.png

sharp (Node.js) は、私がビルドスクリプトで使用するものです。高速でストリーミングに優れており、デザインシステムパイプラインに適しています。

import sharp from "sharp";

await sharp("input.svg", { density: 384 })
  .resize(1024, 1024)
  .png()
  .toFile("output.png");

densityオプションはsharpで重要です。これはリサイズ前に使用される内部DPIを設定し、高い値にすることで小さなエクスポートでの細いストロークが消えるのを防ぎます。

透明度を維持するにはどうすればよいですか？

PNGは8ビットアルファチャンネルをサポートしているため、透明度は第一級の機能です。エクスポート時に白いボックスが返ってくることがある理由は、SVG自体、またはコンバーターが不透明な背景フィルを追加したからです。

2点を確認してください。まず、SVGにキャンバス全体を埋める<rect>がないことを確認します。次に、レンダラーに対して明示的に描画しないように指示を出します。

• rsvgを使用する場合、背景フラグを省略すれば透過が維持されます。
• ImageMagickを使用する場合、入力の前に-background noneを渡します。
• sharpを使用する場合、.flatten()を呼び出さず、.background()を設定しません。
• cairosvgを使用する場合、背景色をnoneに設定します。

後でアートワークに背景が必要な場合は、エクスポートに焼き込むのではなく、2番目のステップで合成してください。transparent images guideはPNGとWebPにおけるアルファチャンネルの詳細をカバーしており、background removal best practicesはソースがクリーンなベクターではなく写真である場合に役立ちます。

PNGのサイズとカラーモードはどうすべきですか？

画像が表示される最大の場所からピクセル寸法を選び、網膜（retina）用にはそれを2倍にしてください。何も引き伸ばされないように、アスペクト比をSVGのviewBoxに合わせます。

カラーモードについては、画面用には8ビットRGBを使用します。PNGはインデックス（パレット）モードやチャネルあたり16ビットもサポートしていますが、8ビットRGBはロゴ、アイコン、UIアートを最も合理的で小さなファイルサイズでカバーできます。後でより小さなウェブアセットが必要な場合は、compress images without losing qualityのワークフローがエクスポート後に適用され、JPG, PNG, and WebP comparisonでコンテナを比較できます。

ラスタライズしすぎると何が問題になりますか？

古典的な失敗は、1xでエクスポートした後、CSSでPNGを拡大することです。ピクセルはすでに固定されているため、ブラウザが不足しているピクセルを「発明」し、エッジがぼやけます。このシャープさをPNGからは取り戻すことはできず、SVGから再レンダリングする必要があります。

以下の具体的な問題に注意してください。

• 出力幅がストロークの太さに近い場合、細いストロークが消える。
• 小さなテキストは、およそ16px相当を下回るとぐちゃぐちゃになる。
• 微妙なディテールは、低コントラストのグラデーション上でノイズに化ける。
• 角丸の部分は、アンチエイリアシングなしでは不均一にクリップされる。
• 半ピクセルオフセットがぼやけた1pxボーダーを引き起こす。

すべてのケースでの解決策は同じです：より大きなサイズでSVGから再エクスポートすること。これが、ソースのベクターファイルを保持することがオプションではない理由です。唯一のコピーが256pxのPNGである場合、image upscaler guideによるアップスケーリングは写真には役立ちますが、捨ててしまったシャープなベクターエッジを再構築することはできません。

SVGフォルダを一括変換するにはどうすればよいですか？

アイコンセットの場合、小さなシェルループを使用すると、すべてのエクスポートが同じサイズになり、ソースを未加工のまま保つために別の出力フォルダーに書き込むことができます。

mkdir -p png
for svg in icons/*.svg; do
  name=$(basename "$svg" .svg)
  rsvg-convert -w 512 -h 512 "$svg" -o "png/${name}.png"
done

Node.jsでは、sharpはPromise.allを使ってディレクトリを処理でき、数百のアイコンに対して十分高速です。実行ごとにサイズを一つに保ち、追加のサイズは別のパスで生成することで、単一の失敗したファイルがバッチ全体を中断させるのを防ぎます。

PNGからSVGに戻すことはできますか？

正直なところ、できません。PNGは完成されたピクセルグリッドです。これをベクターパスにトレースバックすることはオートトレースツールで行うことは可能ですが、結果は近似値になります。曲線には余分なアンカーポイントが追加され、テキストはアウトラインになり、細かいディテールは推測されるだけです。元のベクターソースと一致することはありません。

ラスタロゴしか持っておらずスケーラビリティが必要な場合は、トレースするよりも描画ツールでベクターを再構築するのが実用的な方法です。SVG-to-PNGは一方向の移動として扱い、ソースをアーカイブしてください。convert image format guideも他のラスタとベクターのペアで同様の非対称性について言及しています。

エクスポート前の最終チェックリスト

• 元の.svgがアーカイブされ、上書きされていない。
• エクスポート幅が最大の表示幅の少なくとも2倍である。
• アスペクト比がSVGのviewBoxと一致している。
• 背景は意図的にフラット化していない限り透過である。
• エッジはアンチエイリアシングされており、細いストロークが見えている。
• ウェブに配信される場合は、エクスポート後に圧縮されている。

正直な注意点：ターゲットが受け入れる限り、SVGの方が優れたフォーマットです。PNGは、それを受け付けないシステムのために作成するポータブルで固定されたコピーです。意図的に変換し、ソースを保持すれば、来月またエクスポートをし直す必要はありません。

よくある質問

SVGをPNGに変換すべきなのはどんな時ですか？

ターゲットがSVGをサポートしない場合（一部のメールクライアント、古いソフトウェア）、固定サイズのラスタが必要な場合、またはSVGが不安定にレンダリングされる場合です。ウェブの場合は、対応している場所では直接SVGを提供してください。シャープさを失わずにスケーリングします。

PNGの解像度はどう選べばいいですか？

1xまたは2x（retina）の表示サイズに合わせます。SVGは解像度に依存しないため、必要なピクセルサイズでラスタライズします。高DPIスクリーンでのシャープさを保つために、表示サイズの2倍でレンダリングしてください。

SVGをPNGに変換すると品質が失われますか？

いいえ。ターゲットの解像度でベクターをラスタライズするため、PNGはレンダリングしたサイズと同じくらいシャープになります。品質損失が発生するのは、低すぎる解像度でレンダリングした場合のみです。retinaの場合は2xでレンダリングしてください。

コマンドラインでの変換はどうやるのですか？

ImageMagick: magick input.svg -density 144 -resize 512x512 output.png。-densityがレンダリング解像度を制御します。rsvg-convertまたはヘッドレスブラウザが複雑なSVGの代替手段です。converter guideを参照してください。

PNGに変換した後、SVGを編集できますか？

いいえ。PNGにラスタライズされると、ベクター形状はピクセルになり、編集可能性を失います。SVG（テキストベースのXML）を編集し、再ラスタライズしてください。SVGを編集可能なソースとして保持し、PNGは固定された出力です。

SVGを編集できますか？

はい。SVGはテキストベースのXMLなので、任意のテキストエディタまたはベクターエディタ（Illustrator, Inkscape, Figma）で編集できます。これがPNGに対する主な利点です。SVGは編集可能で解像度に依存しないまま保持されます。固定されたラスタ出力が必要な場合は、SVGを編集し、PNGに再ラスタライズしてください。

画像クレジット

• Abstract geometric vector art in blue and green — photo by Steve A Johnson on Pexels
• Laptop and graphics tablet setup on a colorful designer desk — photo by Alex Andrews on Pexels
• Laptop on a wooden desk in a clean workspace for logo design work — photo by Tom Swinnen on Pexels
• Close-up of hands drawing on a tablet with a stylus — photo by Berna on Pexels

SVG→PNG変換ツール