SVGをPNGに変換する方法（変換すべきタイミング）
SVGはWeb上では完璧ですが、ソーシャルメディアやメールクライアント、アプリストアなど、多くのプラットフォームでは採用されていません。ここではいつ変換すべきか、どのサイズでエクスポートするか、そして透明背景をどのように維持するかをご紹介します。
SVGはWeb上では完璧ですが、多くのプラットフォームでは採用されていません。ソーシャルプラットフォーム、メールクライアント、多くの印刷サービスなどは、代わりにラスタ画像を要求します。SVGをPNGに変換するのは簡単な作業で、適切なエクスポートサイズを選べば、元の画像と同じく鮮明な仕上がりになります。ただし注意点として、PNGからSVGへはきれいに戻せないため、必ず元のファイルを保管してください。すでに必要な情報が分かっている場合は、SVG to PNG converterに直接進んでください。そうでない場合は、このガイドで変換すべきタイミング、Web・Retina・印刷向けのピクセルサイズ、そして透明背景をそのまま維持する方法をご説明します。
SVGとPNGの違い：1分で理解
SVGはベクター形式です。パスやシェイプなどの描画指示の集合体であり、16pxから16,000pxまであらゆるサイズで鮮明に表示され、ロゴやアイコン、幾何学的なアートワークなどでファイルサイズを抑えられます。テキストエディタで編集可能であり、アニメーションのサポートも備えています。
PNGはラスタ形式です。固定されたピクセルのグリッドで構成されます。ネイティブサイズでは鮮明ですが、拡大するとぼやけます。グラデーション、シャドウ、写真の詳細表現に優れ、どこでも予測可能なレンダリングが可能です。
多くの人々が誤解している点：SVGをPNGに変換しても、エクスポート時点で「品質が劣化」するわけではありません。ピクセルはベクター計算から生成されるため、適切なサイズでエクスポートすればピクセル単位で完璧な仕上がりになります。真のコストは、PNGが一度作成されると永遠に特定の解像度に固定されてしまう点にあります。
基本原則：SVGを唯一の信頼できるソース（原稿）として保管し、宛先がPNGを要求するたびにエクスポートしてください。
SVGをPNGに変換すべきタイミング
変換するのは、宛先がSVGに対応していないからです。PNGの方が優れているからではありません。実際には、以下のような状況が頻繁に発生します。
- ソーシャルメディア。 Instagram、X/Twitter、Facebook、LinkedInはSVGのアップロードを受け付けていません。投稿前にPNGまたはJPGに変換してください。
- メール。 ほとんどのメールクライアントはSVGのサポートが限定的、またはありません。ニュースレターの画像やメール署名にはPNGを使用してください。
- ファビコンやアプリアイコン。 最新のブラウザは SVG ファビコンに対応していますが、Apple のタッチアイコンや古いブラウザでは PNG バージョンが必要です。ロゴから ファビコンを作成する方法 のガイドで、最初から最後まで詳しく解説しています。
- 印刷サービス。 ステッカー、名刺、グッズなどの製品を印刷する多くの業者は PNG は受け付けていますが、SVG は受け付けていません。
- レガシーソフトウェアや一部の CMS。 古いツールやドキュメントワークフローでは、SVG が正しく表示されない、あるいは全く表示されない場合があります。PNG に変換するのが安全な選択です。Office の一部バージョンや古いドキュメントワークフローでは、SVG の扱いに一貫性がないことがあります。
そして 変換すべきでない場合：ウェブサイト上です。ウェブサイトでは、SVG はあらゆるサイズで鮮明に表示され、CSS でスタイル設定やアニメーションが可能で、大きな PNG よりもファイルサイズが軽いことが多いです。唯一の出力先が自分自身のサイトである場合は、変換を完全にスキップしてください。
上記のプラットフォーム対応情報の出典：ConverterUp。
Tool Cloud で SVG を PNG に変換する方法（ステップバイステップ）
- SVG から PNG への変換ページを開きます。
- SVG をアップロードします。一連のファイルを変換する場合は、複数のファイルを一度にアップロードできます。
- PNG を変換してダウンロードします。正確なピクセルサイズを取得するには、変換前に幅と高さのフィールドを設定するか、72 から 1200 の範囲で解像度オプションを使用します。アスペクト比を維持するトグルスイッチもあります。処理後、アップロードされたファイルは自動的に削除されます。
変換ツールでは明示的な幅と高さを指定するため、SVG のビューポートをいじったり、デザインエディタでリサイズしたりする必要はありません。出力サイズ（次のセクション参照）を決めて入力するだけです。
ウェブツールを使わずに SVG を PNG に変換
これにはオンライン変換ツールは必要ありません。すべてのデザインツールは PNG を直接エクスポートできます。
- Figma、Illustrator、Affinity、Inkscape： エクスポートダイアログを使用して PNG を選び、ピクセル単位でエクスポートサイズを設定します（ここで以下のスケール係数を適用します）。ソースファイルがある場合はこれが最良の選択肢です。同じ処理でテキストを輪郭に変換し、不要な背景の矩形を削除できるためです。
- ウェブサイトから： SVG（またはブラウザタブで開いた SVG ファイル自体）を右クリックし、「画像を名前を付けて保存」を使用します。通常は SVG が取得されるため、そこからエクスポートまたは変換する必要があります。
- 最後の手段、ツールなし： ブラウザで SVG を開き、ぼやけない最大の倍率までズームインしてスクリーンショットを撮ります。対応するキャプチャツールを使わない限り透明部分は失われ、エッジも実際のエクスポートほどきれいにはなりません。クイックなモックアップには問題ありませんが、本番用としては不十分です。
エクスポートするピクセルサイズは？（スケール係数ガイド）
SVGのビューポートサイズにスケール係数を掛けてエクスポートサイズを決めます。200×200pxのビューポートを持つSVGを1倍でエクスポートすると200×200pxのPNGになり、2倍なら400×400px、3倍なら600×600pxになります。変換ツールでは、この計算は単に入力する幅と高さになります。そして、用途に合わせてスケールを選びましょう。
| 使用ケース | スケール | 例（200×200pxのSVGの場合） |
|---|---|---|
| 一般的な画面（または固定サイズのアイコン用アバターなど） | 1倍 | 200×200px |
| Retina対応 / ウェブでの最適解 | 2倍 | 400×400px |
| 印刷品質 | 3〜4倍 | 600×600〜800×800px |
一般的なウェブ用のアイコンやロゴには、2倍が実用的な最適解です。2倍のファイル1つで標準画面とRetina画面の両方をカバーでき、標準ディスプレイでは自然に縮小表示されるためです。仕様書で特定の固定サイズが指定されている場合は、そのビューポートサイズに合わせた1倍が正解です。印刷用には3〜4倍を選んでください。ステッカーや名刺などの小さな印刷物でも十分な画素数が得られ、大きな印刷物にはさらに比例して多くの画素が必要です。
必要以上に大きくエクスポートしても画質低下のリスクはありません。画素は引き伸ばすのではなくベクター計算から生成されるためです。唯一のデメリットはファイルサイズで、これはスケールの2乗に比例して増えます。つまり、4倍のPNGは1倍のPNGの16倍の画素数になります。そのため、「大きい方が安全」という理由ではなく、ファイルの用途に合わせてサイズを選ぶべきです。
透明性の維持（および白背景を使用すべき場合）
PNGのアルファチャンネルはSVGの透明性をネイティブに保持するため、異なる背景の上に配置する必要があるロゴやアイコンには理想的です。どのスケールでエクスポートしても、透明性はそのまま保たれます。
ただし、ここで注意すべき点があります。ブラウザ上では、実際には背後のページが表示されているにもかかわらず、SVGが白背景を持っているように見えることがあります。変換前に暗い背景でテストしてください。形がはっきり認識できる場合は、本当に透明性があります。もし白い四角形が見える場合は、SVGに背景の矩形が組み込まれています。
背景を埋めるべき場合：一部のプラットフォームや古いツールでは透明性が適切に処理されないことがあります。そのようなアップロードの場合は、単色の背景（通常は白）の方が安全です。
また、不要な背景矩形が含まれている場合は、エクスポートする前にデザインファイル側で削除してください。これは変換設定の問題ではなく、デザインファイル側の修正事項です。
SVGエクスポートを失敗させる落とし穴
ほとんどのSVGからPNGへの変換は正常に完了します。失敗する場合は、主に以下の3つのパターンで起こります。
- フォント。 SVGのテキストは、SVG 1.1仕様に基づき、レンダリング環境で利用可能なフォントを使用して描画されます。ラスタライザーにそのフォントがない場合、文字が置換されたりレイアウトが崩れたりします。解決策はシンプルです：SVGをエクスポートする前に、デザインツールでテキストをパス（輪郭）に変換してください。これが「なぜPNGにしたロゴがおかしいのか？」という問題の最も一般的な原因です。
- 切り抜き。 一部の変換ツールは、SVGで宣言されたビューポートに合わせて出力をクリップします。SVGの内容がビューポート外に広がっている場合、その部分は失われる可能性があります。エクスポートする前に、重要な要素がキャンバスからはみ出ていないか確認しましょう。
- 高度なフィルター。 SVGフィルターやグラデーションのレンダリング結果は、レンダラーによって異なる場合があります。サーバー側のラスタライザーとブラウザでは処理方法が異なり、例えばImageMagickは利用可能な場合はlibrsvgに委譲し、そうでない場合は内部の簡易レンダラーにフォールバックします。グラデーション自体はどの解像度でも滑らかにラスタライズされます（MDN）。ただし、複雑なフィルターチェーンはブラウザでのプレビューとは異なる表示になることがあります。そのような場合は、効果を簡素化するか、デザインツール内で事前にラスタライズしてください。
アイコンセットの一括変換
アイコンセットの良し悪しは「統一感」にかかっています。サイズが混在していたり、透明背景のアイコンと白背景のアイコンが混在していると、個々のファイルには問題なくても、プロダクトやアプリのUI上では壊れているように見えてしまいます。
そこで最初に決めるべきことは以下の2点です。
- 一つのスケール。 ウェブ用であれば通常は2倍（2x）が一般的です。
- 一つの背景ポリシー。 通常は透明ですが、受け側がアルファチャンネルに対応できない場合は白背景などを使用します。
これらの設定をすべてのファイルに適用しましょう。実用的な方法は、複数のSVGを一度に変換ツールにアップロードし、ファイルごとに個別に変換してズレが生じるのではなく、同じ幅と高さで一括してエクスポートすることです。
その後、1つのSVGソースから複数のサイズ（例：16px、32px、512pxなど）が必要な場合は、各サイズでSVGから再エクスポートするか、画像のリサイズツールを使ってください。小さなPNGを拡大するのは避けてください。ぼやけるだけです。
よくある質問：すべてここで回答
SVGをPNGに変換すると画質は落ちますか？
いいえ、適切なサイズでエクスポートすれば画質は落ちません。PNGのピクセルはベクター計算から生成されるため、その解像度においてSVGと同じく鮮明な結果になります。唯一失われるのは「柔軟性」です。PNGは一度作成されると、ピクセルサイズが固定されてしまいます。
PNGをSVGに戻すことはできますか？
きれいに再現されません。トレースは元のパスを復元するのではなくピクセルグリッドを近似するため、常に可逆ではありません。フラットカラーのロゴであれば許容できるレベルでトレースできますが、写真やグラデーションは追従性が低くなります。元のSVGファイルをマスターとして保管しておけば、そもそもトレースする必要はありません。
背景は何を使うべきですか？
異なる背景に配置される要素には透明背景が最適です。PNGのアルファチャンネルはこれをネイティブにサポートしています。宛先側が透明度をサポートしていない場合にのみ、（通常は白色の）単色の背景を使用してください。
