SVGをJPG/JPEGに変換する5つの簡単な方法

SVGはロゴ、アイコン、イラストなど、サイズを自由に変えても品質が落ちないベクター画像として最適なフォーマットです。しかし、すべてのプラットフォームがSVGに対応しているわけではありません。SNS、メールクライアント、CMS、多くの旧型アプリケーションはJPG（JPEGとも呼ばれます）しか受け付けません。SVGファイルをアップロードしようとして「対応していない形式」と言われた経験はありませんか？

安心してください。SVGからJPGへの変換は、やり方が分かればとてもシンプルです。このガイドでは、インストール不要のオンラインツールから、開発者向けのコマンドラインツールまで、5つの実証済みの方法を紹介します。デザイナー、開発者、あるいは「たまに変換したいだけ」という方まで、あなたに合った方法がきっと見つかります。

> 重要な注意：JPGは透明をサポートしていません！

方法を紹介する前に、絶対に知っておくべきことがあります：

JPG/JPEGは透明（アルファチャンネル）をサポートしていません。 透明な背景を保持できるPNGとは異なり、JPGは透明な領域を単色で塗りつぶします—通常は白か黒です。

SVGをJPGに変換すると、透明なピクセルはすべて置き換えられます。SVGに透明な背景がある場合（ほとんどのアイコンやロゴがそうです）、結果は予想と大きく異なるかもしれません：

コンバーターが白背景をデフォルトにしている場合、暗いSVG要素が暗いWebページ上に突然白い四角形の中に表示されることになります。
コンバーターが黒背景をデフォルトにしている場合、明るい要素が見えにくくなる可能性があります。

解決策：SVGをJPGに変換する際、必ず背景色を明示的に選択してください。svg2img.cc を含む優れたコンバーターは、変換前に背景色を選択できるようになっています。

> PNGではなくJPGを選ぶべきケース

JPGとPNGはどちらもラスター形式ですが、用途が異なります。JPGが適しているケース：

写真コンテンツ：JPGは写真や複雑なカラーグラデーションに最適化された非可逆圧縮を使用しています。この種のコンテンツでは、PNGよりファイルサイズが大幅に小さくなります。
メールやSNSでの共有：JPGの小さなファイルサイズは、メール送信やファイルサイズ制限のあるプラットフォームへのアップロードに最適です。
Webサイトのパフォーマンス：SVG由来の画像をヒーローバナーや背景画像として使用する場合、JPGはPNGに比べてページ読み込み時間を大幅に短縮できます。
ユニバーサルな互換性：JPGはこれまで作られたほぼすべてのデバイス、アプリケーション、プラットフォームでサポートされています。JPG以上に「どこでも使える」形式はありません。

PNGを使うべきケース：透明性が必要な場合、シャープなエッジ（スクリーンショットや線画など）が必要な場合、または可逆品質が必要な場合。詳細な比較については、SVGとPNGのガイドをご覧ください。

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

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

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

手順はシンプルです：

ブラウザで変換ツールのサイトを開く。
SVGファイルを読み込む（ドラッグ＆ドロップ、またはファイル選択）。
出力設定を選択—サイズ、背景色、JPG品質。
変換ボタンをクリックしてJPGをダウンロード。

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

数あるオンラインコンバーターの中で、svg2img.cc が際立っている理由は一つ—あなたのファイルがブラウザの外に出ることが絶対にないからです。

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

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

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

svg2img.ccはカスタムサイズ、DPI、背景色（JPG変換に不可欠）、JPG品質レベル（0〜100）の設定に対応し、PNG、JPG、WebPの3形式での出力をサポートしています。

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

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

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

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

InkscapeでSVGファイルを開く。
ファイル → PNG画像をエクスポート を選択（または Ctrl+Shift+E）。
希望するサイズまたはDPIを設定。
まずPNGとしてエクスポート。
任意の画像ビューアーまたはImageMagickコマンドでPNGをJPGに変換：convert output.png output.jpg。

注意：InkscapeはPNGへの直接エクスポートのみ対応しており、JPGには直接出力できません。JPGを得るには追加のステップが必要で、少し不便です。ただし、Inkscapeの描画品質は非常に優れています。

Adobe Illustrator

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

IllustratorでSVGファイルを開く。
ファイル → 書き出し → 書き出し形式... を選択。
フォーマットをJPEGに選択。
JPEGオプションダイアログで設定：
- 品質：0〜100のスライダー（または低/中/高/最高）。
- カラーモード：画面用はRGB、印刷用はCMYK。
- 解像度：画面（72 PPI）、中（150 PPI）、高（300 PPI）。
- 背景：背景色を選択—デフォルトは白。
OK をクリックしてエクスポート。

Illustratorは圧縮品質と背景処理のきめ細かい制御が可能で、プロの仕事に最適です。

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

GIMP：無料のラスター画像エディター。SVGを開き、品質制御付きでJPGとしてエクスポート可能。
Affinity Designer：Illustratorの有料代替品。SVG/JPGエクスポート機能が充実。
Photoshop：SVGを開き、希望の解像度でラスタライズし、ファイル → 書き出し → 書き出し形式... でJPGを選択。

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

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

ImageMagick

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

# 基本的なSVG→JPG変換
convert input.svg output.jpg

# サイズを指定
convert -resize 1920x1080 input.svg output.jpg

# DPIを設定して高品質化
convert -density 300 input.svg output.jpg

# JPG品質を設定（0-100、高いほど高品質・大容量）
convert -quality 90 -density 300 input.svg output.jpg

# 白背景を追加して透明領域を処理（JPG変換に不可欠！）
convert -background white -flatten input.svg output.jpg

# ディレクトリ内の全SVGを一括変換
for f in *.svg; do convert -background white -flatten -quality 85 "$f" "${f%.svg}.jpg"; done

注意：-background white -flatten フラグはSVG→JPG変換に不可欠です。これらがないと、透明な領域が黒くレンダリングされる可能性があります。

CairoSVG

CairoSVGはPythonベースのSVGコンバーターで、高品質な出力を生成します：

# インストール
pip install cairosvg

# 基本的なSVG→JPG変換
cairosvg input.svg -o output.jpg

# サイズを指定
cairosvg input.svg -o output.jpg --output-width 1920 --output-height 1080

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

rsvg-convert（librsvg）

rsvg-convertは、GNOMEデスクトップ環境と同じレンダリングエンジン（librsvg）を使用するため、SVG変換においてImageMagickより優れた結果を出すことが多いです：

# 基本的な変換（出力形式は拡張子で決定）
rsvg-convert -w 1920 -h 1080 input.svg -o output.jpg

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

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

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

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

JavaScript（Canvas API）

ブラウザ内でCanvas APIを使ってSVGをJPGに変換—これはsvg2img.ccのようなブラウザベースツールが裏側でやっていることと同じです：

async function svgToJpg(svgFile, width, height, quality = 0.92, bgColor = '#ffffff') {
  // 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');

      // 背景色で塗りつぶし（JPGは透明をサポートしない！）
      ctx.fillStyle = bgColor;
      ctx.fillRect(0, 0, width, height);

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

      // キャンバスをJPGに変換
      canvas.toBlob((blob) => {
        URL.revokeObjectURL(url);
        resolve(blob);
      }, 'image/jpeg', quality);
    };
    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 jpgBlob = await svgToJpg(file, 1920, 1080, 0.9, '#ffffff');
  const downloadUrl = URL.createObjectURL(jpgBlob);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = 'output.jpg';
  a.click();
});

PNG変換との重要な違い：ctx.fillStyle = bgColor; ctx.fillRect(...) は描画前に背景を塗りつぶします。このステップがないと、SVGの透明な領域がJPGでは黒くなります。canvas.toBlob() の第3引数はJPG品質（0.0〜1.0）を制御します。

Python（CairoSVG + Pillow）

サーバーサイドや自動バッチ処理には、Pythonが強力なパイプラインを提供します：

import cairosvg
from PIL import Image
import io
import os

def convert_svg_to_jpg(input_path, output_path, width=None, height=None,
                        quality=90, bg_color=(255, 255, 255)):
    """SVGファイルをJPGに変換する（背景色対応）。"""
    # CairoSVGはPNGを出力するため、メモリ上でPNGを生成
    png_data = io.BytesIO()
    kwargs = {'write_to': png_data, 'dpi': 300}
    if width:
        kwargs['output_width'] = width
    if height:
        kwargs['output_height'] = height
    cairosvg.svg2png(url=input_path, **kwargs)

    # PNGを開いて背景色付きJPGに変換
    png_data.seek(0)
    img = Image.open(png_data)

    # 透明度の処理：単色背景に合成
    if img.mode in ('RGBA', 'LA'):
        background = Image.new('RGB', img.size, bg_color)
        background.paste(img, mask=img.split()[-1])  # アルファチャンネルをマスクとして使用
        img = background
    else:
        img = img.convert('RGB')

    img.save(output_path, 'JPEG', quality=quality)

def batch_convert(input_dir, output_dir, width=1920, quality=85):
    """ディレクトリ内の全SVGファイルをJPGに一括変換する。"""
    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', '.jpg'))
            convert_svg_to_jpg(input_path, output_path, width=width, quality=quality)
            print(f"変換完了: {filename}")

# 使い方
batch_convert('./svg-icons', './jpg-icons', width=1920, quality=85)

このアプローチは、RGBA画像を検出して単色（白またはカスタムカラー）の背景に合成することで、透明→背景色の変換を正しく処理します。

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

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

Figma

Figmaは多くのチームで標準的なデザインツールとなっています：

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

Figmaは複数サイズの同時エクスポートにも対応—異なる表示密度向けの画像バリアントを一度に生成するのに便利です。

Canva

CanvaはSNSやマーケティングデザインで大人気のツールです：

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

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

Sketch（macOSのみ）

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

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

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

方法	最も適している用途	費用	速度	品質制御	難易度
オンラインツール (svg2img.cc)	素早く、単発の変換	無料	瞬時	高	初心者
デスクトップソフト	プロのデザイン作業	無料〜有料	高速	非常に高い	中級
コマンドライン	自動化・バッチ処理	無料	高速	高	上級
プログラミング	アプリ統合、カスタム処理	無料	各种	完全制御	上級
デザインツール	デザインワークフロー内	無料〜有料	高速	高	初心者

> JPG品質設定について理解する

JPGは非可逆圧縮を使用します。つまり、ファイルサイズを小さくするために一部の画像データが破棄されます。品質パラメータはこのトレードオフを制御します：

品質パラメータ（0〜100）

90〜100：視覚的にロスレス。プロ用途に最適ですが、ファイルサイズは大きくなります。
70〜89：優れた品質と良好な圧縮。ほとんどのWeb用途に最適なスイートスポット。
50〜69：サムネイルや小さな画像には許容範囲。圧縮アーティファクトが見え始めます。
50未満：顕著な品質低下。ファイルサイズが絶対的な優先事項の場合のみ使用。

用途別のDPI設定

72 DPI：標準的な画面解像度。Web表示やメールに適しています。
150 DPI：中品質。プレゼンテーションや基本的な印刷に適しています。
300 DPI：プロの印刷品質。パンフレット、名刺、ポスターに必要です。

SVG→JPG変換でよくある間違いは、低品質設定と低DPIを組み合わせてしまうこと。SVGは無限に拡大可能なので、常に十分に高い解像度でレンダリングしてからJPG圧縮を適用してください。

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

1. 必ず背景色を設定する

これほど強調してもしすぎることはありません。SVGファイルは通常、透明な背景を持っています。JPGに変換する際、背景色を明示的に指定しないと、透明な領域が予測不能に黒または白になります。画像が使用される場面に合った色を選んでください。

2. ベクターコンテンツには高品質設定を使用

SVGの線画、テキスト、シャープなエッジは、実はJPG圧縮にとって最も苦手なケースです。非可逆圧縮はシャープな境界にアーティファクトを生じさせます。ロゴやイラストには品質90以上を使用してください。写真やグラデーションを含むSVGコンテンツの場合、品質80〜85で通常十分です。

3. 適切な解像度を選ぶ

Web用には表示サイズの2倍（Retina/HiDPI画面対応）で変換。印刷用には300 DPIで実際の印刷サイズで計算。4インチ幅のロゴは300 DPIで1200ピクセル幅でレンダリングする必要があります。

4. 変換前にフォントを埋め込む

SVGにWebフォントやカスタムフォントを使ったテキストが含まれている場合、変換後のJPGでフォントが正しく表示されないことがあります。SVGエディターでテキストをアウトライン（パス）に変換してから変換することをおすすめします。

5. 明るい背景と暗い背景の両方でテスト

JPGは透明をフラット化するため、明るい背景と暗い背景の両方で出力をテストし、選択した背景色が実際の使用場面で適切に見えることを確認してください。

> よくある質問

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

ある程度は落ちますが、設定によります。SVGはロスレスのベクターフォーマットですが、JPGは非可逆圧縮を使用します。ただし、高品質設定（90以上）と十分な解像度（印刷用300 DPI、Web用は表示サイズの2倍）を使用すれば、品質の低下は人間の目にはほぼ感知できません。主な問題は圧縮アーティファクトではなく、JPGの透明性を表現できないことです。

SVG→JPG変換時に背景色を設定するにはどうすればいいですか？

svg2img.ccでは、変換設定に専用の背景色ピッカーがあります。ImageMagickでは -background white -flatten を使用。JavaScript Canvas APIでは、SVGを描画する前に ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, width, height); を実行。Pythonでは、Pillowを使ってRGBA画像を単色背景に合成します。

印刷にはどのDPIを使うべきですか？

プロの印刷出力には、最終的な印刷物の物理サイズで 300 DPI を使用します。例えば、5×7インチで印刷する場合、SVGを1500×2100ピクセル（5×300と7×300）でレンダリングします。大判印刷（バナー、ポスター）は視聴距離が遠いため、150 DPIで通常十分です。

スマホでSVGをJPGに変換できますか？

はい。svg2img.ccのようなブラウザベースのツールは、モバイルブラウザでも動作します—サイトを開き、SVGを読み込み、変換するだけ。処理はクライアント側で行われるため、アプリのインストールは不要です。

変換後のJPGの背景が黒いのはなぜですか？

これは、コンバーターがSVGの透明性を正しく処理していない場合に発生します。JPGはアルファチャンネルをサポートしていないため、透明ピクセルはデフォルトで黒（またはレンダリングエンジンによっては他の色）になります。JPGへの変換時には必ず背景色を明示的に設定してください。svg2img.ccなどのツールは、変換前に背景色を選択できるため、この問題を自動的に処理できます。

> まとめ

SVGからJPGへの変換は決して難しくありません—しかし、絶対に忘れてはならないルールが一つあります：必ず背景色を設定すること。JPGは透明をサポートしていません。

素早い一回限りの変換から、完全な自動化パイプラインまで、あなたのワークフローに合った方法がきっとあります：

スピードと手軽さを求めるなら、svg2img.ccのようなブラウザベースのツールが圧倒的です。
プロ品質を求めるなら、デスクトップソフトが最も細かい制御を提供します。
自動化を求めるなら、コマンドラインツールが頼もしい味方です。
アプリ統合を求めるなら、プログラミングライブラリが最大の柔軟性を与えます。
デザインワークフローを求めるなら、FigmaやCanvaでクリエイティブな環境から離れる必要はありません。

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