SVGをPNGに変換すると、無限にスケーラブルなベクター画像を固定解像度のラスター画像に変換できます。SVGはレスポンシブなWebデザインに最適ですが、PNGはベクター形式に対応していないメールクライアント、旧式ソフト、印刷ワークフローとの互換性に優れています。
出力結果について:PNGの詳細
SVGをPNGに変換すると、選択した解像度でラスター化された画像が、すべての透過を維持したまま得られます。この変換により、グラフィックは固定のピクセル寸法に固定されます。1000×1000pxのPNGはそのサイズでは鮮明ですが、拡大するとピクセルが目立つようになります。SVGの透過はPNGのアルファチャンネルに完璧に引き継がれるため、どんな背景でも使えるロゴやアイコンに最適です。
重要なトレードオフは、汎用的な互換性を得る代わりにSVGの無限の拡大縮小性を失うことです。最終的な用途に基づいて解像度を慎重に選んでください。変換後にベクター品質に戻すことはできません。
SVGをPNGに変換する理由
SVGをPNGに変換する主な理由は互換性です。多くのメールクライアントは、SVGをスクリプト実行の潜在的な手段とみなし、セキュリティ上の理由でSVGファイルを除去します。Outlook、Gmail、Apple MailはPNGなら確実に表示しますが、SVGの添付ファイルはブロックまたは完全に削除されることが多いです。メールニュースレターでロゴやグラフィックを送る場合、PNGなら確実に表示されます。
旧式ソフトでも同様の問題があります。旧バージョンのPowerPoint(2016以前)、Photoshop(CS6以前)、多くの印刷用ツールはSVGの読み込みに難があります。必要な解像度(印刷なら通常300DPI)でPNGに変換すれば、これらのツールがそのまま扱えるファイルになります。
印刷ワークフローでは特定の解像度のラスター形式が求められます。理論上SVGでも印刷は可能ですが、ほとんどの商業印刷会社やデザイン入稿プロセスは300DPIのTIFFまたはPNGを想定しています。4×6インチの印刷物は300DPIで1200×1800ピクセルが必要です。SVGをこの正確なサイズでPNGに変換すれば、予測どおりの結果が得られます。
SVGの表示が不安定なプラットフォームもあります。FacebookやLinkedInはSVGのアップロードに対応していますが、フィルターや埋め込みフォントが正しく表示されないことがあります。PNGに変換すれば、すべてのプラットフォーム・デバイスで同じ見た目を保証できます。
解像度とDPI: 正しい選び方
- Web用途(72~96DPI): 一般的なWeb画面は72~96DPIです。サイトのヘッダー画像はFull HDに対応する1920×1080px、ロゴは800×800pxまたは1000×1000pxがほとんどのレイアウトで使えます。高DPI画面を対象にしない限り、実際の表示サイズで書き出してください。
- Retina/高DPIディスプレイ(2倍~3倍): 最新のスマートフォンやMacBookは2倍または3倍のピクセル密度を採用しています。500px表示のアイコンを鮮明に保つには1000px(2倍)または1500px(3倍)のPNGが必要です。高解像度画面に表示するWeb用グラフィックは、想定表示サイズの2倍で書き出すのが基本です。
- 印刷(300DPI): 業務用印刷には300DPIが必要です。ピクセル数は「幅(インチ)×300」と「高さ(インチ)×300」で計算します。5×5インチのロゴなら1500×1500px、8.5×11インチのチラシなら2550×3300pxが必要です。300DPIを下回ると印刷時にぼやけて見えます。
- ソーシャルメディア: プラットフォームごとに推奨サイズが異なります。Facebook/TwitterのOGP画像は1200×630px、Instagramの投稿は1080×1080px、LinkedInのバナーは1584×396pxです。トリミングや拡大縮小を避けるため、正確なサイズは各プラットフォームの公式情報で確認してください。
制限事項を理解する
- スケーラビリティの喪失: SVGは図形を数式として保持しているため、画質を落とさず無限に拡大縮小できます。PNGは固定のピクセルサイズに固定されます。800×800pxに変換した後で2000×2000pxが必要になった場合、元のSVGから再変換する必要があります。PNGを拡大するとジャギーやぼやけが発生します。
- 高解像度でファイルサイズが急増する: 5KBのSVGロゴも、800×800pxのPNGにすると50KB、3000×3000pxなら500KBになることがあります。PNGは全ピクセルの情報を保持するため、サイズが大きくなるほどファイルサイズは二乗的に増加します。Web用途では、必要以上に大きなPNGを書き出すとページの読み込みが遅くなります。
- 簡単に編集できなくなる: SVGならベクター編集ソフトで個々の図形・色・パスを自由に変更できます。PNGに変換するとピクセルの集合になるため、色の変更や要素のリサイズにはPhotoshopやGIMPでのピクセル単位の編集が必要になります。今後の編集に備えて元のSVGファイルは保管しておきましょう。
変換せずSVGのまま使うべきケース
訪問者が皆最新ブラウザを使う現代的なWebサイトで使うグラフィックなら、PNGに変換する必要はありません。シンプルな図形であればSVGの方がファイルサイズは小さく、あらゆる画面サイズに完璧に対応し、複数のPNGバリエーション(1倍、2倍、3倍)より読み込みも高速です。現代のWeb開発では、ロゴ・アイコン・インターフェース用グラフィックにSVGが多用されています。
レスポンシブデザインにおいて、SVGは追加のHTTPリクエストなしにどんな表示サイズにも適応できる点で優れています。5KBのSVG1つで、50pxのモバイルアイコンから2000pxのデスクトップヘッダーまで完璧に対応できます。同じことをPNGで行うには複数のファイル(icon.png、icon@2x.png、icon@3x.png)が必要になり、ファイルサイズも複雑さも増します。
SVGにアニメーションやインタラクティブ要素(ホバーエフェクト、クリック可能な領域)が含まれる場合、PNGではこの機能を再現できません。SVGが対応するCSSアニメーションやJavaScriptによるインタラクティブ性は、PNGにラスタライズすると完全に失われます。
こちらの代替案もご検討ください
SVGより広い互換性が必要だが、PNGより優れた圧縮も欲しい場合は、SVGをWebPに変換してみてください。WebPはPNGと同様に透過に対応しており、通常25〜35%小さいファイルになります。すべての最新ブラウザ(Chrome、Firefox、Edge、Safari 14以降)で動作します。
最新のWeb用途にはSVGのままにしておきましょう。2026年現在、ロゴ、アイコン、グラフィックにはSVGが推奨される形式です。PNGへの変換は、メールソフト、レガシーソフト、SVG表示が壊れているプラットフォームなど、互換性の問題でやむを得ない場合のみにしてください。
逆の変換が必要ですか?PNGからSVGは画像トレースを使ってラスター画像をベクターに変換します。トレースされたベクターは、ネイティブなSVGグラフィックほどきれいにはならない点にご注意ください。これは、元のSVGファイルを紛失した場合の緊急用です。
最良の結果を得るためのコツ
- 最終的な用途に合わせて解像度を選ぶ: Webサイトで500×500px表示するのに5000×5000pxで書き出す必要はありません。不必要に大きなPNGは帯域を無駄にし、ページの読み込みを遅くします。出力解像度は実際の用途に合わせましょう。
- Retina対応には2倍で書き出す: Webサイトで幅600pxで表示する画像なら、MacBookや最新スマートフォンなどの高DPIディスプレイでも鮮明に表示されるよう、幅1200pxで書き出しましょう。2026年現在、Web用グラフィックの標準的な手法です。
- 透明度を確認する: SVGに透明度がある場合、それが(白い塗りつぶしではなく)正しく定義されているか確認してください。変換後は明るい背景と暗い背景の両方でPNGをプレビューし、透明度が正しく反映されているか確認しましょう。
- フォントの扱いに注意する: SVGにテキストが含まれる場合、ラスタライズすると現在のフォント描画が固定されます。表示の一貫性を確実にするには、変換前にベクター編集ソフトでテキストをパスに変換してください。フォントによる表示の違いを完全になくせます。
- アイコンセットには一括変換を使う: 50個のアイコンを変換するなら、1つずつではなく同じ設定でまとめて処理しましょう。時間を節約でき、出力品質も均一に保てます。
よくある問題と解決策
- 解像度の選択ミス: 最も多い失敗は間違ったサイズで書き出してしまうことです。迷った場合は少し大きめを選んでください。ジャギーの出た画像を拡大するより縮小する方が簡単です。Web用なら想定表示サイズの2倍が安全です。印刷用は必ず300DPIで計算してください。
- ファイルサイズが大きすぎる: PNGが1MBを超える場合、必要以上に高い解像度で書き出している可能性があります。1000×1000pxのロゴであれば200~300KBを超えないのが普通です。出力サイズを小さくするか、変換後にPNG圧縮ツールの利用を検討してください。
- 出力がぼやける: PNGがぼやけて見える場合、SVGの中にスケーリングに弱いラスター要素(埋め込まれたJPGやPNG)が含まれている可能性があります。元のSVGを確認してください。写真をトレースしたものであれば、きれいなPNG出力にはなりません。純粋なベクターのSVGであれば、どんな解像度でも鮮明なPNGに変換されます。
- 透明度が失われる: 透明にしたい部分が白くなる場合、SVGが本来の透明ではなく白色の塗りつぶしを使用している可能性があります。変換前にInkscapeやIllustratorなどのベクター編集ソフトで開き、白い背景の塗りつぶしを削除してください。
SVGをPNGに変換する方法
- SVGファイルをアップロード: 上のフォームから1つまたは複数のSVGファイルを選択します。アイコンセットやロゴのバリエーションをまとめて処理する一括変換にも対応しています。
- 解像度を選択: 用途に応じて出力サイズを設定します。Webで500px表示する場合、Retina対応の鮮明さを得るには1000pxで書き出します。印刷用は(インチ×300DPI)でピクセル数を計算してください。
- 変換してダウンロード: 指定した解像度でSVGをラスタライズし、色・形状・透明度を維持したまま変換します。個別のPNGファイル、または一括変換の場合はZIPアーカイブでダウンロードできます。
SVGからPNGへの変換が適しているケース
- メールニュースレターと署名: ほとんどのメールクライアント(Outlook、Gmail、Apple Mail)はセキュリティ上の理由でSVGファイルをブロックまたは除去します。PNGを使えば、互換性の問題なくロゴやグラフィックをメール内で確実に表示できます。
- 旧式ソフトとの互換性: 旧バージョンのPowerPoint、Photoshop、InDesignはSVGへの対応が限定的、あるいは正常に機能しません。PNGならあらゆるデザイン・プレゼンテーションソフトで問題なく読み込めます。
- 印刷入稿: 商業印刷会社は300DPIのラスター形式を求めます。正確な印刷サイズ(インチ×300で計算)でSVGをPNGに変換すれば、印刷ワークフローで予測どおりの結果が得られます。
- ソーシャルメディアプラットフォーム: ほとんどのプラットフォームはSVGに対応していますが、表示が一貫しないことがあります。フィルター、グラデーション、埋め込みフォントが正しく表示されない場合があるためです。PNGならすべてのプラットフォームで同じ見た目を保証できます。
- モバイル・デスクトップアプリ: 多くのアプリケーションフレームワークは、アイコンやUI要素に複数解像度(1倍、2倍、3倍)のPNGアセットを求めます。必要な解像度ごとにSVGを変換すれば、あらゆる画面密度で鮮明に表示できます。
SVGとPNGの形式比較
- 拡大縮小性: SVGは画質を損なわずに無限に拡大縮小できます。PNGは固定解像度で、元の寸法を超えて拡大するとピクセルが目立ちます。
- ファイルサイズ: シンプルなグラフィック(ロゴ、アイコン)にはSVGの方が小さくなります。PNGのファイルサイズは解像度に応じて大きくなり、3000×3000pxのPNGは同等のSVGの10倍のサイズになることがあります。
- 互換性: PNGはあらゆるソフトウェア、ブラウザ、デバイスで汎用的に動作します。SVGは最新ブラウザでは優れた対応状況ですが、メールソフトやレガシーソフトでは表示できません。
- 編集のしやすさ: SVGはベクターエディタで形状、色、パスを簡単に修正できます。PNGはPhotoshopのようなラスターエディタでピクセル単位の編集が必要です。
- 透過: どちらの形式もアルファチャンネルによる透過に完全対応しています。変換では透過背景が完璧に維持されます。
- Webパフォーマンス: シンプルなグラフィックには、ファイルが小さく複数解像度分のHTTPリクエストも不要なSVGの方が高速です。多くのグラデーションを含む複雑なグラフィックには、PNGの方がブラウザでの表示が速い場合があります。
関連する画像変換ツール
- SVGからWebPへ — PNGより高圧縮な次世代フォーマット
- PNGからSVGへ — ラスター画像をトレースしてベクター画像を作成
- SVGからJPGへ — 写真や透明度が不要な場合はJPGに変換
- すべての画像変換ツール — あらゆる画像形式の変換をチェック
SVGからPNGへの変換では、選択した解像度でグラフィックの品質を維持しつつ、透明度も完全にサポートされます。