SVG2IMG Logosvg2img
EN中日

SVGをPNGに変換する7つの簡単な方法（完全ガイド）

•Jack

SVGとPNGは、Webデザインで最もよく使われる画像フォーマットの2つですが、それぞれ役割が大きく異なります。SVGはロゴやアイコンなど、サイズを自由に変えても品質が落ちない「ベクター画像」として優れていますが、多くのプラットフォーム—SNS、メールクライアント、一部のCMS—はまだPNGしか受け付けてくれません。SVGファイルを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 が際立っている理由は一つ—あなたのファイルがブラウザの外に出ることが絶対にないからです。

多くのオンラインコンバーターは、ファイルをリモートサーバーにアップロードし、サーバー側で処理して結果を返す仕組みです。つまり、あなたのSVGデータ—企業ロゴ、デザイン assets、機密情報など—がインターネット経由で第三者のサーバーに送信されることになります。

svg2img.ccは全く異なるアプローチを取ります。すべての変換はブラウザ内でクライアント側のJavaScriptにより完結します。ファイルがサーバーにアップロードされることは一切ありません。これが意味するのは：

  • 完全なプライバシー：デザインデータはあなたのPCに留まります。どこにも送信されません。
  • 瞬時の速度：アップロード/ダウンロードの待ち時間なし。変換はミリ秒単位で完了。
  • オフラインでも動作：ページが一度読み込まれれば、インターネット接続がなくても変換可能。
  • ファイルサイズ制限なし：サーバー型ツールは5〜50 MBの制限がよくありますが、ローカル処理なら大きなファイルも問題ありません。
  • 完全無料、制限なし：1日の利用制限、透かし、有料プラン—一切ありません。

さらに、svg2img.ccはPNG、JPG、WebPの3形式での出力に対応し、カスタムサイズやDPIの設定、背景色と透明度の制御も可能です。

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

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

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

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

Inkscapeはプロフェッショナルグレードのベクターグラフィックエディターで、SVG作業に最適な無料ツールの一つです。PNGエクスポートの手順：

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

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

Adobe Illustrator

Creative Cloudのサブスクライバーにとって、Illustratorは洗練されたエクスポート機能を提供します：

  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プレビュー：MacでSVGをプレビューで開き、ファイル → 書き出す でPNG保存可能—ただし描画品質にばらつきがあります。

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

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

ImageMagick

ImageMagickは、Linux、macOS、Windowsで利用可能な多機能画像処理スイートです：

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

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

# DPIを設定して高画質化
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は、ImageMagickよりもSVG変換に適しているとされることが多いです。GNOMEデスクトップ環境と同じレンダリングエンジン（librsvg）を使用しているためです：

# 基本的な変換
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機能への対応に優れています：

# インストール
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：ブラウザの開発者ツール（緊急用）

たまに1回だけ変換したい、でも何もインストールしたくない—そんな時は、ブラウザの開発者ツールが使えます。

Chrome / Edge / Firefox での手順：

  1. ブラウザでSVGファイルを直接開く（タブにドラッグ、または Ctrl+O）。
  2. ページを右クリックして 検証 を選択（または F12）。
  3. DOMインスペクターで <svg> 要素を選択。
  4. Ctrl+C で要素をコピー。
  5. コンソール タブを開く。
  6. 以下のコードを実行：
// キャンバスを作成し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はSNSやマーケティングデザインで大人気のツールです：

  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に変換—これはsvg2img.ccのようなブラウザベースツールが裏側でやっていることと同じです：

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();
});

このアプローチの強みは—svg2img.ccと同様—完全にクライアント側で動作する点です。サーバーは不要です。

Python（CairoSVG）

サーバーサイドや自動バッチ処理には、PythonとCairoSVGの組み合わせが強力です：

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用途では72〜150 DPIで十分です。印刷用途では最低300 DPIを目指しましょう。よくある失敗は、SVGの元のサイズのまま変換して、小さくて低解像度のPNGになってしまうことです。

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

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

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

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

4. 外部参照をチェック

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

5. 複数サイズでテスト

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

> よくある質問

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

いいえ。SVGはベクターフォーマットなので、PNGに変換する際に任意の解像度でレンダリングできます。重要なのは、用途に十分な解像度（またはDPI）を選ぶことです。印刷には300 DPI以上、Webには表示サイズの2倍（Retina対応）が目安です。

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

ツールによります。多くのオンラインコンバーターはファイルをサーバーにアップロードして処理するため、データが第三者を経由します。svg2img.ccは異なります—ブラウザ上ですべてをローカル処理するため、ファイルがデバイスの外に出ることはありません。

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

サーバー型ツールは5〜50 MBの制限が一般的です。svg2img.ccのようなブラウザベースのツールはローカルで処理するため、この制限がありません。コマンドラインツールは、実質的にシステムメモリが上限です。

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

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

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

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

> まとめ

SVGからPNGへの変換は、決して難しくありません。素早い一回限りの変換から、完全な自動化パイプラインまで、あなたのワークフローに合った方法がきっとあります：

  • スピードと手軽さを求めるなら、ブラウザベースのツールが圧倒的です。
  • プロ品質を求めるなら、デスクトップソフトが最も細かい制御を提供します。
  • 自動化を求めるなら、コマンドラインツールが頼もしい味方です。
  • アプリ統合を求めるなら、プログラミングライブラリが最大の柔軟性を与えます。

今すぐSVGファイルを変換したいなら、svg2img.cc を試してみてください。完全無料、インストール不要、プライバシー保護、すべての変換がブラウザ内で完結します。登録不要、アップロード不要—ドラッグして、変換して、ダウンロードするだけ。シンプルです。

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