svg2img
EN中日
← ブログ一覧に戻る
チュートリアル約14分

SVGをPNGに変換する7つの方法：ブラウザ・アプリ・コード

一度だけの変換と継続的な一括処理では、適した方法が異なります。SVGからPNGへ変換する7つの選択肢を整理します。

更新日 2026年8月26日
目次

SVGは形状やパスを保持するベクター形式、PNGは固定されたピクセルを保存するラスター形式です。ロゴやアイコンの元データにはSVGが便利ですが、SNS、メール、CMS、資料作成など、PNGでの入稿を求められる場面もあります。

この記事では、SVGをPNGへ変換する7つの方法を用途別に比較します。方法を選ぶ前に、必要なピクセル寸法、透過背景の有無、フォントや外部画像が含まれているかも確認してください。

SVGからPNGへの変換概要
SVGからPNGへの変換概要

なぜSVGをPNGに変換する必要があるのか？

方法を紹介する前に、変換が必要な理由を整理します。SVGはパスや図形を座標で記述するため拡大に強く、PNGは画像を固定された画素の格子として保存します。

変換が必要になる主なケースは次のとおりです。

  • プラットフォームの互換性：Instagram、X（旧Twitter）、LINE、多くのメールクライアントはSVGアップロードに対応していませんが、PNGは問題なく表示されます。
  • 印刷の要件：一部の印刷ワークフローでは、特定の解像度（例：300 DPI）のラスター画像が必要です。
  • メール署名：多くのメールクライアントはセキュリティ上の理由でSVGをブロックしますが、PNGは問題なく表示できます。
  • Faviconやアプリアイコン：モダンブラウザはSVG faviconに対応していますが、従来のシステムでは特定サイズのPNGが必要です。
  • PPTやドキュメントへの埋め込み：Office系ソフトのSVGサポートには限界があり、PNGの方が互換性が高いです。

方法1：オンライン変換ツール（最も手軽）

ほとんどの方にとって、オンラインコンバーターがSVGからPNGへの最短ルートです。ソフトウェアのインストールは不要、数秒で完了します。

オンラインSVG→PNGコンバーターの使い方

手順は次のとおりです。

  1. ブラウザで変換ツールのサイトを開く。
  2. SVGファイルを読み込む（ドラッグ＆ドロップ、またはファイル選択）。
  3. サイズ、背景色、出力形式を設定する。
  4. 変換ボタンをクリックしてPNGをダウンロード。

svg2img.ccをおすすめする理由

svg2img.cc は、選択したファイルをブラウザ上で処理します。変換のためにファイルをサイトのサーバーへ送信しません。

多くのオンラインコンバーターは、ファイルをリモートサーバーへ送信し、サーバー側で処理して結果を返す仕組みです。その場合、企業ロゴ、デザイン素材、公開前の情報などが第三者のサーバーを経由します。

svg2img.ccでは、変換処理をブラウザ内で実行します。選択したSVGは、変換のためにサイトのサーバーへ送信されません。この方式には次の特徴があります。

  • ローカル処理：選択したデータは、変換のためにサイトのサーバーへアップロードされません。
  • 転送待ちがない：ファイルのアップロード完了を待たずに処理を開始できます。処理時間はSVGの複雑さや端末性能によって変わります。
  • 端末性能を利用：扱えるファイルの複雑さや出力サイズは、ブラウザと端末のメモリに左右されます。
  • 登録不要：現在の変換機能はアカウントを必要とせず、出力に透かしを追加しません。

さらに、svg2img.ccはPNG、JPG、WebPへの出力に対応し、ピクセル寸法、背景色、透明部分を確認しながら書き出せます。

svg2img.ccのインターフェース
svg2img.ccのインターフェース

方法2：デスクトップソフトウェア（プロ向け）

グラフィック作業を日常的に行うなら、デスクトップソフトが最も細かいコントロールを提供します。

Inkscape（無料・オープンソース）

Inkscapeは、SVGを編集してPNGへ書き出せるオープンソースのベクターグラフィックエディターです。PNGエクスポートの手順：

  1. InkscapeでSVGファイルを開く。
  2. ファイル → PNG画像をエクスポート を選択（または Ctrl+Shift+E）。
  3. エクスポートパネルでエクスポート範囲を選択：
    • ページ：キャンバス全体をエクスポート。
    • 描画：コンテンツ部分のみ、余白を自動トリミング。
    • 選択範囲：選択したオブジェクトのみ。
  4. 幅、高さ、またはDPIを設定。
  5. エクスポート をクリック。

InkscapeはDPIやエクスポート範囲の精密な制御が可能で、コマンドラインからのバッチエクスポートにも対応しています。

Adobe Illustrator

Illustratorを利用している場合は、次の手順でPNGへ書き出せます。

  1. IllustratorでSVGファイルを開く。
  2. ファイル → 書き出し → 書き出し形式... を選択。
  3. フォーマットをPNGに選択。
  4. PNGオプションダイアログで設定：
    • カラーモード：画面用はRGB、印刷用はCMYK。
    • 解像度：画面（72 PPI）、中（150 PPI）、高（300 PPI）。
    • 背景：透明または白。
    • アンチエイリアス：文字最適化またはアートワーク最適化。
  5. OK をクリックしてエクスポート。

その他のデスクトップツール

  • GIMP：無料のラスター画像エディター。Inkscape拡張経由でSVGを開き、PNGとしてエクスポート可能。
  • Affinity Designer：Illustratorの有料代替品。SVG/PNGエクスポート機能が充実。
  • macOSプレビュー：OSとSVGの構成によっては、プレビューで開いて ファイル → 書き出す からPNGを保存できます。書き出し後の表示を確認してください。

方法3：コマンドラインツール（自動化に最適）

バッチ変換や自動化パイプラインに組み込みたい開発者・パワーユーザーには、コマンドラインツールがベストです。

ImageMagick

ImageMagickはLinux、macOS、Windowsで利用できる画像処理ツールです。

bash
# 基本的な変換
convert input.svg output.png

# サイズを指定
convert -width 1024 -height 768 input.svg output.png

# 物理単位を使うSVG向けにdensityを指定
convert -density 300 input.svg output.png

# ディレクトリ内の全SVGを一括変換
for f in *.svg; do convert "$f" "${f%.svg}.png"; done

注意：ImageMagickは内蔵のSVGレンダラーを使用するため、複雑なCSSスタイルが適用されたSVGでは、ブラウザの表示と異なる結果になることがあります。

rsvg-convert（librsvg）

rsvg-convertはlibrsvgを使ってSVGを描画します。利用する場合は次のように実行します。

bash
# 基本的な変換
rsvg-convert -w 1024 -h 768 input.svg -o output.png

# DPIを設定
rsvg-convert -d 300 -p 300 input.svg -o output.png

# バッチ変換
for f in *.svg; do rsvg-convert -w 1920 "$f" -o "${f%.svg}.png"; done

Ubuntu/Debianへのインストール：sudo apt install librsvg2-bin macOSへのインストール：brew install librsvg

CairoSVG（Python）

CairoSVGはPythonから利用できるSVG変換ツールです。対応するSVGでは次のように実行できます。

bash
# インストール
pip install cairosvg

# 基本的な変換
cairosvg input.svg -o output.png

# サイズを指定
cairosvg input.svg -o output.png --output-width 1024 --output-height 768

# DPIを設定
cairosvg input.svg -o output.png --dpi 300

方法4：ブラウザの開発者ツール（緊急用）

追加ツールをインストールせずに仕組みを試す場合は、ブラウザの開発者ツールからCanvas APIを実行できます。

Chrome / Edge / Firefox での手順：

  1. ブラウザでSVGファイルを直接開く（タブにドラッグ、または Ctrl+O）。
  2. ページを右クリックして 検証 を選択（または F12）。
  3. DOMインスペクターで <svg> 要素を選択。
  4. Ctrl+C で要素をコピー。
  5. コンソール タブを開く。
  6. 以下のコードを実行：
javascript
// キャンバスを作成しSVGを描画
const svgString = '<svg><!-- ここにSVGコードを貼り付け --></svg>';
const canvas = document.createElement('canvas');
canvas.width = 1024;
canvas.height = 1024;
const ctx = canvas.getContext('2d');
const img = new Image();
const blob = new Blob([svgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
img.onload = function () {
  ctx.drawImage(img, 0, 0, 1024, 1024);
  const pngUrl = canvas.toDataURL('image/png');
  const a = document.createElement('a');
  a.href = pngUrl;
  a.download = 'output.png';
  a.click();
  URL.revokeObjectURL(url);
};
img.src = url;

正直なところ、少し面倒な方法です。でも緊急時には役立ちますし、何もインストールせずに済みます。もっとスムーズなブラウザ体験をお望みなら、svg2img.ccがこのプロセスを洗練されたインターフェースで提供しています。

方法5：デザインツール（Figma、Canva、Sketch）

すでにデザインツールで作業しているなら、そのままSVGをPNGにエクスポートできます。ツールを切り替える必要はありません。

Figma

Figmaは多くのチームで標準的なデザインツールとなっています。SVG/PNGエクスポートの手順：

  1. FigmaプロジェクトにSVGファイルをインポート（キャンバスにドラッグ＆ドロップ）。
  2. エクスポートしたいフレームまたは要素を選択。
  3. 右サイドバーの Export セクションまでスクロール。
  4. + ボタンをクリックしてエクスポート設定を追加。
  5. フォーマットを PNG に選択。
  6. エクスポート倍率（1x、2x、3x、4x）またはカスタム幅を設定。
  7. Export をクリックして保存先を選択。

Figmaでは書き出し設定を複数追加し、@1x、@2x、@3x など異なる表示密度向けの画像をまとめて生成できます。

Canva

Canva上でSVGを編集している場合は、PNGとして書き出せます。

  1. 新しいデザインを作成、または既存のものを開く。
  2. 左パネルの アップロード タブからSVGファイルをアップロード。
  3. SVGをキャンバスに追加。
  4. 右上の 共有 → ダウンロード をクリック。
  5. ファイルタイプを PNG に選択。
  6. 画質設定を選択。
  7. ダウンロード をクリック。

注意：Canvaの無料プランではエクスポートに一部制限があります。無制限の高解像度エクスポートには、Canva Proへの加入が必要な場合があります。

Sketch（macOSのみ）

MacユーザーでSketchを使っている方：

  1. SketchでSVGファイルを開く。
  2. エクスポートしたいアートボードまたはレイヤーを選択。
  3. インスペクターパネルで Make Exportable をクリック。
  4. フォーマットを PNG に設定し、スケールファクターを選択。
  5. Export Selected をクリック。

方法6：プログラミング（JavaScript & Python）

アプリケーションにSVG→PNG変換機能を組み込みたい開発者向けに、2つの人気言語での実装方法を紹介します。

JavaScript（Canvas API）

ブラウザのCanvas APIを使い、クライアント側でSVGをPNGへ変換することもできます。

javascript
async function svgToPng(svgFile, width, height) {
  // SVGファイルの内容を読み込む
  const svgText = await svgFile.text();

  // SVGから画像を作成
  const img = new Image();
  const svgBlob = new Blob([svgText], { type: 'image/svg+xml;charset=utf-8' });
  const url = URL.createObjectURL(svgBlob);

  return new Promise((resolve, reject) => {
    img.onload = () => {
      // 指定サイズのキャンバスを作成
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');

      // SVG画像をキャンバスに描画
      ctx.drawImage(img, 0, 0, width, height);

      // キャンバスをPNGに変換
      canvas.toBlob((blob) => {
        URL.revokeObjectURL(url);
        resolve(blob);
      }, 'image/png');
    };
    img.onerror = reject;
    img.src = url;
  });
}

// 使い方
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const pngBlob = await svgToPng(file, 2048, 2048);
  const downloadUrl = URL.createObjectURL(pngBlob);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = 'output.png';
  a.click();
});

この例はクライアント側で動作するため、変換用サーバーを用意する必要はありません。

Python（CairoSVG）

サーバー側やバッチ処理でPythonを使う場合は、CairoSVGを組み込めます。

python
import cairosvg
import os

def convert_svg_to_png(input_path, output_path, width=None, height=None, dpi=300):
    """SVGファイルをPNGに変換する。"""
    kwargs = {'write_to': output_path, 'dpi': dpi}
    if width:
        kwargs['output_width'] = width
    if height:
        kwargs['output_height'] = height
    cairosvg.svg2png(url=input_path, **kwargs)

def batch_convert(input_dir, output_dir, width=1920):
    """ディレクトリ内の全SVGファイルをPNGに一括変換する。"""
    os.makedirs(output_dir, exist_ok=True)
    for filename in os.listdir(input_dir):
        if filename.endswith('.svg'):
            input_path = os.path.join(input_dir, filename)
            output_path = os.path.join(output_dir, filename.replace('.svg', '.png'))
            convert_svg_to_png(input_path, output_path, width=width)
            print(f"変換完了: {filename}")

# 使い方
batch_convert('./svg-icons', './png-icons', width=512)

方法7：ブラウザ拡張機能

Web上のSVGを頻繁にPNGとして保存する場合は、ブラウザ拡張機能も選択肢になります。

人気の拡張機能

  • SVG Export（Chrome / Firefox）：WebページからSVG要素を抽出し、各種スケールでPNGエクスポート可能。
  • Save SVG as PNG（Chrome）：右クリックメニューに「SVGをPNGで保存」オプションを追加。
  • SVG Gobbler（Chrome）：ページ上のすべてのSVG（インライン、背景画像、CSS内）を検出し、エクスポートオプションを提供。

注意点

ブラウザ拡張機能を使う場合は、次の点を確認します。

  • 外部リソース（フォント、リンク画像）を参照する複雑なSVGは正しく処理されないことがあります。
  • 解像度の選択肢が限られている場合があります。
  • セキュリティを気にするユーザーにとっては、拡張機能にページ内容へのアクセスを許可することに抵抗があるかもしれません。
  • ブラウザのアップデートで動作しなくなることがあります。

たまに使う分には拡張機能で十分です。信頼性が高く、プライバシーに配慮した変換体験をお望みなら、svg2img.ccのような専用ツールをおすすめします。

比較表：どの方法を選ぶべきか？

方法最も適している用途費用プライバシー速度品質制御
オンラインツール (svg2img.cc)単発または少量の変換無料ブラウザ内処理ファイルによる寸法・背景など
デスクトップソフトデザイン作業無料〜有料端末内処理ファイルによる詳細
コマンドライン自動化・バッチ処理無料端末内処理環境による詳細
ブラウザ開発者ツール一時的な確認無料ブラウザ内処理手順による限定的
デザインツールデザインワークフロー内無料〜有料良好高速高
プログラミングアプリ統合、カスタム処理実装による実装による実装による実装次第
ブラウザ拡張機能日常的なページ内抽出無料やや低い高速限定的
方法比較チャート
方法比較チャート

より良い変換のためのヒント

どの方法でも、次の点を確認すると出力の失敗を減らせます。

1. 適切な解像度を選ぶ

Web用途では、まず出力するピクセルサイズが重要です。DPIメタデータを変えても、400pxのPNGが画面上で急にシャープになるわけではありません。400px表示でHiDPI対応したいなら、800pxで書き出す方が意味があります。印刷用途では、物理サイズと目標DPIから必要なピクセル数を計算します。

2. 透明背景を正しく処理する

SVGファイルは多くの場合、透明な背景を持っています。PNGへの変換時に透明度が維持されるよう確認しましょう（PNGは透明をネイティブサポートしています）。白や他の単色背景が必要な場合は、変換時に明示的に設定してください。

3. テキストとフォントに注意

SVGにWebフォントやカスタムフォントを使ったテキストが含まれている場合、変換後のPNGでフォントが正しく表示されないことがあります。これは、変換を実行するシステムにそのフォントがインストールされていない場合に発生します。変換前にフォントをSVGに埋め込むか、テキストをアウトライン化（パスに変換）しておくことをおすすめします。

4. 外部参照をチェック

一部のSVGは外部スタイルシート、画像、フォントを参照しています。これらの参照は変換中に機能しなくなることがあります。特にコマンドラインツールを使用する場合、すべてのリソースをSVGファイル内に埋め込むことで、最も確実な変換結果が得られます。

5. 複数サイズでテスト

複数のサイズ（1x、2x、4xなど）で変換し、各サイズで出力が正しく見えるか確認しましょう。これは、様々なサイズで表示されるアイコンやロゴに特に重要です。

よくある質問

SVGをPNGに変換すると画質が落ちますか？

いいえ。SVGはベクターフォーマットなので、PNGに変換するときに任意のピクセルサイズでレンダリングできます。印刷では物理サイズと目標DPIからピクセル数を計算し、Webでは実際の表示サイズを基準にします。HiDPI対応なら表示サイズの2倍が目安です。

オンラインのSVG→PNGコンバーターは安全ですか？

ツールによります。オンライン変換ツールには、ファイルをサーバーへ送って処理するものがあります。svg2img.ccでは変換対象のSVGを対応ブラウザ内で処理し、サイトのサーバーへ送信しません。

SVGファイルのサイズ制限はありますか？

svg2img.ccはサーバー側のアップロード上限を設ける方式ではありませんが、扱えるSVGの複雑さや出力サイズはブラウザと端末のメモリに左右されます。大きなファイルでは、出力寸法を下げるか、デスクトップまたはコマンドラインの変換ツールも検討してください。

変換後のPNGがSVGと違って見えるのはなぜですか？

よくある原因は：フォントの不足（代替フォントでレンダリングされる）、コンバーターのレンダリングエンジンが一部のSVG機能に対応していない、外部リソースがSVGに埋め込まれていない、などです。モダンなレンダリングエンジンを使うコンバーター（ブラウザベースツールなど）が、通常最も正確な結果を出します。

複数のSVGファイルをまとめて変換できますか？

はい。rsvg-convertやCairoSVGなどのコマンドラインツールは、スクリプトによるバッチ処理に対応しています。Inkscapeなどのデスクトップソフトもバッチエクスポートが可能です。コードを書かずにバッチ処理したい場合は、方法6のPythonスクリプトを参照してください。

まとめ

SVGからPNGへの変換方法は、ファイル数や作業頻度に応じて選びます。

  • 少量の変換には、ブラウザベースのツールが手軽です。
  • 細かな調整には、デスクトップソフトが向いています。
  • 定期的な処理には、コマンドラインツールが便利です。
  • アプリへの組み込みには、用途に合うプログラミングライブラリを選びます。

少量のファイルを一時的に変換する場合は、svg2img.cc をブラウザから利用できます。登録は不要で、選択したファイルは変換のためにサイトのサーバーへ送信されません。

svg2img.ccを試す
svg2img.ccを試す

実際のファイルで試す

ファイルをアップロードせず、ブラウザ内でSVGを変換できます。

変換ツールを開く