SVG PNG 変換 - オンラインで瞬時に一括変換 (無料・透過対応)

面倒な登録なしで、SVGファイルを透明度を維持したまま高画質なPNGへ瞬時に一括変換できる無料ツールです。

プライバシー優先

  • ファイルがブラウザの外に出ることはありません
  • サーバーへのアップロードなし
  • お使いのデバイス上でローカルに処理

SVGとPNG、どちらを使うべきかを見分ける基準

SVGはXMLベースのベクターフォーマットで、拡大・縮小してもエッジが劣化しません。アイコン、ロゴ、UIのスキン、技術的なダイアグラムなど、幾何学的な形状を含むグラフィックに適しています。一方、PNGはピクセルベースのラスター画像で、写真や複雑なグラデーション、フィルター処理を施した画像との相性が良いフォーマットです。

重要なのは「どちらが優れているか」ではなく、配信先の環境がどちらを受け入れるかです。WordPressのテーマによってはSVGのアップロードをセキュリティ上の理由で拒否します。メールクライアントの多くはSVGをレンダリングしません。アプリストアのアイコン提出ではPNGが指定されるケースがほとんどです。つまり、SVG to PNGの変換は「劣化版を作る作業」ではなく、配信環境に合わせたフォーマット最適化と捉えるべきです。

変換で品質が落ちる3つの典型的な失敗

1. 解像度の指定を怠る
SVGには固定のピクセルサイズがないため、変換ツールにサイズ指定をしないと、ツールのデフォルト値（往往是500×500や1024×1024）で出力されます。想定していたサイズと異なれば、後から拡大して使う場面でボケが発生します。変換前に「どこで、どのサイズで使うか」を決めておくことが第一歩です。

2. 透明背景が失われる
PNG-24は透明度（アルファチャンネル）をサポートしていますが、すべての変換ツールがこの情報を正しく保持するわけではありません。特に、一部の簡易ツールやコマンドラインツールでは、背景色を白で塗りつぶす設定がデフォルトになっていることがあります。SVGにbackground: transparentが指定されていても、変換時に上書きされるケースがあるので注意が必要です。

3. スケール比が崩れる
SVGはviewBox属性でアスペクト比を定義していますが、変換時にこの比率が無視され、縦横比が歪むことがあります。特に、viewBox="0 0 100 50"のような非正方形のSVGを、正方形の出力サイズに変換すると、内容が stretched または compressed されて表示されます。変換ツールには、viewBoxを尊重するものとそうでないものがあります。

SVG to PNG変換の具体的な手順

Pixes.appのSVG to PNGコンバーターを使った場合のワークフローを例に、正しい変換手順を示します。

ステップ1：SVGファイルをアップロードする
ドラッグ＆ドロップ、またはファイル選択ボタンからSVGファイルを読み込みます。対応フォーマットは.svgファイルおよび.svgz（gzip圧縮SVG）です。外部リソース（フォントや画像参照）を含むSVGの場合、それらが正しく埋め込まれているかを事前に確認してください。

ステップ2：出力サイズを指定する
幅と高さをピクセル単位で入力します。元のSVGのviewBox比を維持する場合は、幅のみ（または高さのみ）を入力すると、もう一方が自動計算されます。用途別の目安：
• Web用アイコン：64×64 〜 512×512
• SNSプロフィール画像：400×400
• メール署名ロゴ：200〜300px幅
• 高DPIディスプレイ対応：想定表示サイズの2倍

ステップ3：背景設定を確認する
透明背景を維持する場合は「Transparent」を選択。背景色を指定したい場合は、カラーピッカーで色を選べます。Webサイトの特定の背景色に合わせて変換すると、アンチエイリアスの色が自然に馴染みます。

ステップ4：変換を実行し、ダウンロードする
「Convert」ボタンをクリックすると、サーバーサイドでレンダリングが行われ、PNGファイルが生成されます。結果を確認し、問題がなければダウンロードします。

  1. [object Object]
  2. [object Object]
  3. [object Object]
  4. [object Object]

透明背景とアンチエイリアスの関係

PNGの透明背景は、ピクセルごとに0〜255のアルファ値を持つことで実現されています。SVGのパスやシェイプのエッジは、通常アンチエイリアス処理によって滑らかに表現されます。このアンチエイリアスは、エッジ付近のピクセルを半透明にすることで実現されるため、透明背景とアンチエイリアスは密接に連動しています。

ここで問題になるのが、変換先の背景色です。例えば、黒いアイコンを透明背景のPNGに変換した後、白い背景のWebサイトに配置すると、エッジにうっすらと灰色のフリンジ（halo effect）が見えることがあります。これは、アンチエイリアス用の中間色が黒と透明のブレンドで計算されているためです。

これを回避するには、最終的な配置先の背景色を事前に把握し、その色を背景に指定して変換します。这样、アンチエイリアスの色が背景と一体化し、フリンジが発生しません。配置先が複数ある場合は、背景色ごとに別々のPNGを用意するのが理想的です。

Web制作におけるSVG-PNG変換の実践的な使いどころ

フォールバック画像の生成
SVGをタグで直接使う場合でも、要素やsrcsetでPNGフォールバックを用意するのが堅実です。特に、レガシーブラウザのサポートが必要なプロジェクトでは、この二重構造が品質を保証します。

OGP画像やSNSサムネイル
Twitter CardやOpen Graphの仕様では、PNGまたはJPEGが推奨されています。SVGで作ったブランドロゴやアイコンをOGP画像に組み込む場合は、事前にPNGに変換しておく必要があります。この際、1200×630px（OGP標準サイズ）で出力すると、各プラットフォームで最適に表示されます。

CMSやメールテンプレートでの使用
WordPressのビジュアルエディタ、Mailchimp、HubSpotなど、多くのプラットフォームがSVGの直接アップロードを制限しています。ロゴやバナー画像をこれらのプラットフォームで使う場合、PNG変換は必須工程です。このとき、元のSVGの最適化も同時に行うと効率的です。SVG optimizerツールで不要なメタデータやパスの冗長性を除去してから変換すれば、出力PNGの品質が向上します。

印刷用途への橋渡し
印刷会社によっては、SVGではなくAI（Adobe Illustrator）形式やPNGを要求するケースがあります。SVGからPNGへの変換は、この橋渡しとして機能します。印刷用途では300dpi以上の解像度で出力することを推奨しますが、Web用ツールの大半は72dpi基準のため、出力サイズを印刷サイズの約4倍に設定してピクセル数でカバーするのが現実的な方法です。

変換後の最適化を見落とさない

PNGは非可逆圧縮を行わないため、ファイルサイズが大きくなりやすいフォーマットです。変換直後のPNGファイルをそのままWebにデプロイすると、ページの読み込み速度に悪影響を与える可能性があります。

PNGの最適化で効果的なのは、色数の削減です。写真を含まないアイコンやロゴであれば、PNG-8（最大256色）に落とすだけでファイルサイズを大幅に削減できます。PNG-24が必要な場面でも、不要なメタデータ（EXIF、テキストチャンク）を除去すれば数%〜十数%の削減が見込めます。

この最適化工程を変換直後に組み込むことで、SVGから最適化済みPNGまでのワークフローが一気通貫で完結します。手作業で圧縮ツールを別途起動する手間が省けるだけでなく、変換→最適化の順序を忘れることもなくなります。

大量変換を伴うワークフローのポイント

アイコンセットやUIキットのように、数十〜数百のSVGファイルを一括でPNGに変換する場面では、個別に処理していては時間がかかりすぎます。このとき重要なのは、命名規則と出力サイズの事前定義です。

例えば、「icon-arrow-right.svg」を「icon-arrow-right-24px.png」「icon-arrow-right-48px.png」のように、サイズをファイル名に含めるルールを決めておけば、デザイナーとフロントエンド開発者の間でのファイルの受け渡しがスムーズになります。複数サイズの出力が必要な場合は、1×と2×（Retina用）の2種類をセットで生成するのが一般的です。

また、大量変換では元のSVGの品質管理も重要です。パスが極端に複雑なSVGや、不要なグループやクリッピングマスクを含むSVGは、変換後のPNGにも問題を引きずります。変換前にSVG optimizerでクリーニングしておくことで、変換エラーのリスクを減らし、出力品質を均一にできます。

SVG以外のラスター出力との使い分け

PNGの次に出番が多いラスターフォーマットはJPEGです。SVGをラスター画像として出力する際、PNGとJPEGのどちらを選ぶかは、画像の内容と用途で判断します。

PNGを選ぶべき場面：透明背景が必要な場合、テキストやアイコンなどシャープなエッジが重要な場合、色数が少ないグラフィックの場合。JPEGを選ぶべき場面：写真を含む合成画像の場合、ファイルサイズが最優先事項の場合、透明度が不要な場合。SVG to JPGへの変換は、写真ベースのOGP画像やバナー広告などで効果を発揮します。

フォーマット選択を誤ると、PNGの場合は不必要にファイルサイズが大きくなり、JPEGの場合はエッジにノイズが発生します。変換ツールを使う前に、「この画像のどこが重要か」を一度確認するだけで、出力の品質は大きく変わります。

このツールの使い方

  1. 画像をアップロード。
  2. 変換を開始。
  3. 変換後のファイルをダウンロード。

関連ツール

よくある質問 (FAQ)

SVG PNG 変換 をオンラインで使うには？
ファイルをアップロードし、変換を開始して、処理が完了したら結果をダウンロードします。
ファイルはサーバーに送信されますか？
いいえ。変換はブラウザ内でローカルに実行されます。
スマホからも使えますか？
はい。デスクトップとモバイルの両方のモダンブラウザで動作します。