Picovert

SVGをPNGに無料変換：4つの簡単な方法

Picovert チーム著2026-05-144分で読了

SVGはベクター形式です — 数学的命令で図形とパスを保存します。PNGはラスター形式です — ピクセルを保存します。SVGをPNGに変換するということは、ベクターを特定のピクセルサイズで レンダリングすることを意味します。プラットフォームがSVGをサポートしていない場合、 印刷やソーシャルメディア用の固定解像度画像が必要な場合、または古いソフトウェアとの 互換性が必要な場合にPNGが必要です。4つの無料方法をご紹介します。

変換前：適切な解像度の選択

SVGは解像度独立型です — 品質を失わずにどのサイズでもレンダリングできます。 変換前に必要なピクセル寸法を決定してください：

  • Webアイコン：32×32、64×64、または128×128 px — ファビコンとUIアイコン用の小さなPNG
  • ソーシャルメディアプロフィール画像：最低400×400または800×800 px
  • 印刷：基準として300 DPIを使用 — 3インチの印刷には 正方形ロゴで900×900 pxが必要
  • Retina / HiDPIディスプレイ：CSSピクセルサイズの2×または3×で書き出す （例：100×100 CSS要素には200×200 px PNG）

PNGは書き出したサイズと同じくらいシャープです — 必要な最大サイズを選択し、 そこから縮小してください。

方法1：ブラウザ（最速、インストール不要）

最新のブラウザはSVGをレンダリングしてPNGとして保存できます。 シンプルなSVGには最も素早い方法です：

  1. Chrome、Firefox、またはSafariでSVGファイルを開く（ブラウザにドラッグ）
  2. 画像を右クリックして名前を付けて画像を保存を選択 — 一部のブラウザはPNG直接書き出しを提供
  3. 正確なサイズには：ブラウザのDevTools（F12）を開き、<svg>要素を見つけ、 スクリーンショット前にwidthとheight属性を目標ピクセルに設定

制限：ブラウザのスクリーンショットは画面解像度に制限されます。 高解像度PNG（例：4000×4000 px）にはInkscapeまたはImageMagickを使用してください。

方法2：Inkscape（無料、最高品質）

Inkscapeは出力解像度を完全に制御できるSVG→PNG変換に最適な無料ツールです。 Windows、Mac、Linux用の無料オープンソースです。

  1. inkscape.orgからInkscapeをダウンロードしてインストール
  2. InkscapeでSVGファイルを開く
  3. ファイル → PNG画像を書き出すに移動（またはWindows/LinuxでShift+Ctrl+E、MacでShift+Cmd+E）
  4. PNG書き出しダイアログで：
    • ドキュメントタブ：ドキュメントサイズでSVGキャンバス全体を書き出す
    • 描画タブ：実際の描画コンテンツにトリミング（空白を削除）
    • 選択タブ：選択した要素のみ書き出す
  5. ピクセル単位で幅と高さを設定、 またはDPIを設定（96 DPI = 画面、300 DPI = 印刷品質）
  6. 別名で書き出すをクリック、ファイル名と場所を選択、書き出しをクリック

Inkscapeはデフォルトで透明度を保持します — SVGに透明な背景がある場合、 PNGも透明な背景になります。

方法3：ImageMagickコマンドライン（バッチ変換）

複数のSVGを変換したり、プロセスを自動化する必要がある場合、 ImageMagick（無料、オープンソース）がターミナルから機能します：

  1. imagemagick.orgからImageMagickをインストール（Macの場合Homebrew: brew install imagemagick）
  2. 300 DPIで単一ファイルを変換：
    convert -density 300 input.svg output.png
  3. 特定のピクセルサイズに変換：
    convert -size 1000x1000 input.svg output.png
  4. フォルダ内のすべてのSVGをバッチ変換：
    for f in *.svg; do convert -density 300 "$f" "${f%.svg}.png"; done

ImageMagickは自動化、CI/CDパイプライン、または大量のSVGファイルの一括変換に最適です。

方法4：オンラインSVG→PNG変換ツール

ソフトウェアインストールなしの素早い単発変換：

  • Convertio（convertio.co）：SVGをアップロード、出力サイズを設定、PNGをダウンロード
  • CloudConvert：カスタム幅/高さとDPI設定をサポート
  • SVGtoPNG.com：解像度オプション付きのシンプルなドラッグ＆ドロップ

オンラインツールはシンプルなロゴやアイコンに適しています。カスタムフォントや 複雑なエフェクトを持つSVGは出力品質を確認してください — 一部のオンライン変換ツールは すべてのSVG機能を正しく処理しません。

透明度：背景の保持または削除

SVGには透明な背景があることが多いです。各方法の処理方法：

  • Inkscape：デフォルトで透明度を保持 — PNGも透明な背景になります
  • ImageMagick：透明度を保持。白い背景を追加するには： コマンドに-background white -flattenを追加
  • ブラウザ：通常、保存した画像で透明度を保持
  • オンラインツール：ほとんどが透明度を保持 — 使用前に出力を確認

透明度をサポートしないプラットフォーム用に白い背景のPNGが必要な場合は、 書き出し後に画像変換を使用して背景を追加してください。

SVG→PNG：期待できること

  • 品質：PNGは書き出しサイズで完全にシャープです — ただし、後でそのサイズを超えて拡大するとぼやけます
  • ファイルサイズ：シンプルなロゴの1000×1000 px PNGは通常10〜100 KB。 色数の多い複雑なSVGはより大きなPNGを生成します
  • テキスト：SVGのテキストはフォントが埋め込まれているかアウトラインに 変換されている場合に正しくレンダリングされます。そうでない場合はフォントがインストール されたInkscapeを使用してください
  • グラデーションとエフェクト：SVGのグラデーション、シャドウ、フィルターは InkscapeとImageMagickで適切にレンダリングされます。オンラインツールは差があります

変換後、画像圧縮を使用して見た目の品質を失わずに PNGファイルサイズを削減してください — Web使用に便利です。