SVG to PNG Converter：任意のサイズでベクターグラフィックをラスタライズ

最終更新日: June 28, 2026

SVGとPNGは、根本的に異なる画像タイプです。SVGはベクター形式であり、形状を数学として保存するため、シャープさを失うことなくあらゆるサイズにスケーリングできます。一方、PNGはラスタ形式であり、固定されたピクセルのグリッドを保存するため、ネイティブな解像度が一つしかなく、拡大するとぼやけます。SVGをPNGに変換するということは、ピクセルサイズを選択することを意味します。なぜなら、一度ラスタライズされると、スケーラビリティが失われるからです。本ガイドでは、適切な解像度の選び方、実際に変換が必要になるケース、そしてSVGからシャープなPNGをエクスポートする方法について解説します。

クイックアンサー：SVGをPNGに変換するには？

コンバーターまたはデザインツールでSVGを開き、ターゲットのピクセル寸法を設定します（必要に応じてRetinaディスプレイを考慮し、表示サイズの2倍でエクスポートします）。そしてPNGとしてエクスポートします。PNGは後から品質ロスなしに拡大できないため、使用するすべての場所に対して十分に大きなサイズを選択してください。SVG to PNG converter を使えば簡単な単発のエクスポートが速く行えますし、バッチ処理にはデザインツールを使用するのが便利です。元のSVGは必ず保持しておいてください。なぜなら、異なるサイズが必要になった場合でも、スケーラブルなソースとして機能するからです。

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

ベクターかラスタかという区別が、いつ、なぜ変換する必要があるのかをすべて説明しています。

• SVGはどの解像度でもシャープさを保ちます。ロゴは、ファイル一つから16pxでも1600pxでも鮮明です。
• PNGはピクセル寸法に固定されています。小さすぎるサイズでエクスポートすると、きれいに拡大することができません。
• SVGでは写真を表すことはできず、PNGならできます。これが、写真がSVGではない理由です。

いつSVGをPNGに変換すべきですか？

環境がサポートしている場合はSVGの方が優れているため、変換はSVGが機能しない場合のフォールバック（代替手段）となります。どうしても必要な場合にのみ変換し、それ以外の場合はSVGを保持してください。

• Unsupported environment — 一部のメールクライアントや古いツールではSVGがレンダリングされません。
• Embedded raster requirement — PNGまたはJPGのみを受け入れるシステムがある場合。
• Photographic content mixed in — この場合、ソース自体はSVGであるべきではありません。
• Caching and performance — 事前にレンダリングされたPNGは、ロードごとにSVGをパースするよりも配信が速い場合があります。

ウェブサイトの場合、SVGは通常推奨されます。なぜなら、Retinaディスプレイでシャープさを保ち、ダウンロードサイズも小さいからです。retina display guideでは、ベクターグラフィックがいかにロゴやアイコンの解像度の問題を完全に排除するかを説明しています。

適切な解像度はどう選びますか？

解像度の決定は永続的なものなので、重要です。PNGは、それが表示される最大サイズでエクスポートし、Retinaのシャープさのためにデバイスピクセル比を掛け合わせます。

• PNGが複数のサイズで使用される場合は、最大サイズでエクスポートし、CSSに縮小させます。
• Retinaのシャープさのためには、表示サイズの2x（またはスマートフォンでは3x）でエクスポートします。
• 小さすぎるサイズでエクスポートするのが一般的で回復不能なミスです。

計算は簡単です：最大の表示幅を決め、Retinaのためにそれを倍にし、そのピクセル幅でエクスポートします。retina display guideでは、2xと3xのワークフローを詳しく解説しています。

SVGをPNGに変換するには？

ボリュームや制御の必要性によって、いくつかの方法が機能します。

1. Online converter — SVGをアップロードし、寸法を設定して、PNGをダウンロードします。単発のエクスポートには速いです。
2. Design tool (Figma, Illustrator, Inkscape) — SVGを開き、選択したサイズでエクスポートします。最も制御性が高いです。
3. Command line (rsvg-convert, ImageMagick) — バッチ処理のためにスクリプト化できます。
4. Browser — SVGを開き、ターゲットサイズでスクリーンショットを撮ります。

バッチワークの場合、コマンドラインが優れています。なぜなら、すべてのファイルに同じ設定を適用できるからです。単一の重要なロゴの場合は、デザインツールの方がエクスポートオプションで最も制御できます。

アイコンセットのバッチ変換

アプリやデザインシステムをリリースする際、SVGアイコンフォルダをPNGに変換することは一般的です。すべてのアイコンが複数のサイズ必要になり、手作業では対応できません。バッチアプローチは、セット内のすべてのファイルに同じエクスポート設定を適用します。

1. SVGを、一貫した名前のフォルダーに整理します。
2. エクスポートするサイズを決定します（例：アイコンセットの場合、16, 32, 64）。
3. 各SVGを各サイズでエクスポートするバッチラスタライザーを実行します。
4. シャープさと透明度を確認するために、いくつかの出力を検証します。

バッチラスタライズの利点は一貫性です。すべてのアイコンがまったく同じ設定でエクスポートされるため、セット全体が統一されたルックアンドフィールになります。batch processing guideでは、フォルダー全体の画像に操作を適用するためのより広範なワークフローをカバーしており、一度ラスタライズされれば、PNGはcompressして一緒にサイズを最小限に抑えることができます。

一般的な変換ミス

• 小さすぎるエクスポート — 後からPNGを拡大できません。表示サイズの2xでエクスポートしてください。
• 元のSVGの損失 — 必ず保持してください。将来のサイズのためのスケーラブルなソースだからです。
• SVGが使えるのに変換する — 多くのモダンな環境はSVGを直接サポートしています。
• 透明度の忘れ — PNGはalphaをサポートします。必要であれば、エクスポートがそれを維持しているか確認してください。
• ベクターとラスタの混在 — ソースに埋め込まれた写真がある場合、結果はハイブリッドとなり、SVGの利点を失います。

代わりにSVGを保持すべきケース

最も強力なデフォルトは、SVGを保持し、強制されない限り変換しないことです。SVGは、すべての画面でシャープであり、ダウンロードサイズが小さく、編集可能な単一ファイルを提供します。PNGが意味を持つのは、環境がSVGを拒否する場合、システム要件のために固定ラスタが必要な場合、またはブラウザがパースせずにキャッシュできる事前レンダリングされたファイルがパフォーマンス上求められる場合です。

必要性によるものではなく、利便性のために変換することは、そもそもSVGを適切な選択肢にしていたスケーラビリティを単に捨てることになります。技術仕様については、W3C SVG standardがSVGが表現できるものを定義し、PNG specificationが変換されるラスタ形式を文書化しています。制約に合わせてフォーマットを選択してください。そして、PNGを強制する制約がない場合は、SVGにその役割を果たしてもらいましょう。

よくある質問

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

SVGはベクター形式（形状が数学的に記述され、解像度に依存しない）であり、PNGはラスタ（ピクセルのグリッド）です。SVGはシャープさを失わずにスケーリングしますが、PNGはピクセル寸法に固定されています。固定のラスタ画像が必要な場合にSVGをPNGに変換します。

いつSVGをPNGに変換すべきですか？

ターゲットがSVGをサポートしていない場合（一部のメールクライアント、古いソフトウェア）、固定サイズのラスタが必要な場合、またはSVGに一貫してレンダリングされない複雑なエフェクトがある場合に変換します。ウェブの場合、サポートされている場所ではSVGを直接配信してください。

適切な解像度はどう選びますか？

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

SVGをPNGにバッチ変換できますか？

はい — ImageMagick (magick mogrify)、rsvg-convert、またはヘッドレスブラウザがSVGフォルダーを処理できます。アイコンセットの場合、スクリプトを使用すると、必要なすべてのサイズについてすべてのSVGを一度のパスでレンダリングできます。SVG to PNG guideを参照してください。

SVGは透明度をサポートしていますか？

はい — SVGはベクターであり、ネイティブに透明度をサポートしているため、透明な領域を持つSVGは透過的なPNGとしてラスタライズされます。これがSVGがロゴやアイコンに適している理由の一つです。JPEGでは透明度は維持されません。

SVGからPNGへの変換で品質は失われますか？

いいえ — 選択した任意の解像度でベクターをラスタライズするため、PNGはそのサイズでシャープになります。品質の損失は、低すぎる解像度でレンダリングした場合にのみ発生します。Retinaスクリーンでのシャープさのためには、表示サイズの2xでレンダリングすれば、そのPNGはネイティブなラスタと区別がつきません。

任意のサイズでSVGをPNGに変換できますか？

はい — SVGはベクターであり解像度に依存しないため、16pxのアイコンから4000pxのバナーまで、必要なピクセルサイズでラスタライズでき、品質損失はありません。これがラスタ形式に対する主な利点です。Retinaスクリーンでのシャープさのためには、表示サイズの2xでレンダリングしてください。SVG自体がシャープさを失うことはなく、固定されるのはラスタライズされたPNGのみです。