SVGをJPG/JPEGに変換する5つの方法と背景設定

SVGはロゴ、アイコン、イラストなどのベクター素材に向いています。一方、SNS、メールクライアント、CMS、古いアプリケーションでは、入稿形式がJPG/JPEGに限られる場合があります。そのときは、SVGを必要なピクセル寸法で描画してからJPEGとして保存します。

この記事では、ブラウザ、デスクトップアプリ、コマンドライン、コードを使う5つの変換方法を比較します。変換前に、背景色、出力サイズ、JPEG品質の3点を決めておくと、やり直しを減らせます。

重要な注意：JPGは透過（透明背景）に対応していません#

最初に確認しておきたい点があります。

JPG/JPEGは透過（アルファチャンネル / 透明背景）に対応していません。 変換時に透明部分を白などの背景色で合成する必要があります。背景色を指定しない場合の結果は変換ツールによって異なります。

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

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

対処方法：SVGをJPGに変換する際は、背景色を明示的に選択してください。svg2img.cc では、変換前に背景色を指定できます。

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

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

• 写真コンテンツ：JPGは写真や複雑なカラーグラデーションに最適化された非可逆圧縮を使用しています。この種のコンテンツでは、PNGよりファイルサイズが大幅に小さくなります。
• メールやSNSでの共有：JPGの小さなファイルサイズは、メール送信やファイルサイズ制限のあるプラットフォームへのアップロードに最適です。
• Webサイトのパフォーマンス：SVG由来の画像をヒーローバナーや背景画像として使用する場合、JPGはPNGに比べてページ読み込み時間を大幅に短縮できます。
• 幅広い互換性：JPGは多くのブラウザ、文書ソフト、SNS、メール環境で扱えます。

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

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

少量のファイルを変換する場合、オンラインコンバーターならソフトを追加せずに作業できます。

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

手順は次のとおりです。

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

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

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

オンライン変換ツールには、ファイルをリモートサーバーへ送って処理するものがあります。企業ロゴ、未公開のデザイン素材、社内情報を含むSVGでは、利用前に処理場所と保存方針を確認してください。

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

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

svg2img.ccでは、ピクセル寸法、背景色、JPG品質を指定し、PNG、JPG、WebPへ書き出せます。

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

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

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

Inkscapeは、SVGを編集してPNGへ書き出せるオープンソースのベクターグラフィックエディターです。JPGを作成する場合は、次のように一度PNGへ書き出します。

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

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

Adobe Illustrator#

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

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

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

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

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

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

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

ImageMagick#

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

# 基本的なSVG→JPG変換
magick -background white input.svg -flatten output.jpg

# サイズを指定
magick -background white input.svg -resize 1920x1080 -flatten output.jpg

# 物理単位を使う印刷向けSVGを処理
magick -density 300 -background white input.svg -flatten output.jpg

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

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

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

注意：上の例はImageMagick 7のmagickコマンドを使っています。古いImageMagick 6ではconvertを使う環境もあります。JPGは透過を扱えないため、-background white -flattenで背景色を明示することが重要です。

CairoSVG#

CairoSVGはSVGをPNGやPDFへ書き出せます。JPGが必要な場合は、まずPNGへ描画し、単色背景と合成してからJPGにします。

# インストール
pip install cairosvg

# まずSVGをPNGにレンダリング
cairosvg input.svg -o temp.png

# レンダリング時にピクセルサイズを指定
cairosvg input.svg -o temp.png --output-width 1920 --output-height 1080

# 白背景に合成してJPGとして保存
magick temp.png -background white -flatten -quality 90 output.jpg

rsvg-convert（librsvg）#

rsvg-convertはlibrsvgでSVGを描画します。JPGが必要な場合も、まずPNGへ描画し、その後で背景を合成します。

# まずSVGをPNGにレンダリング
rsvg-convert -w 1920 -h 1080 input.svg -o temp.png

# 白背景に合成してJPGとして保存
magick temp.png -background white -flatten -quality 90 output.jpg

# バッチ変換
for f in *.svg; do
  rsvg-convert -w 1920 "$f" -o "${f%.svg}.png"
  magick "${f%.svg}.png" -background white -flatten -quality 90 "${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へ変換することもできます。

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上でSVGを編集している場合は、JPGとして書き出せます。

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

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

Canva#

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

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

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

Sketch（macOSのみ）#

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

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

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

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

JPGは非可逆圧縮を使うため、容量を抑える代わりに一部の画像情報が失われます。品質設定は次の目安で調整します。

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

• 90〜100：視覚的にロスレス。プロ用途に最適ですが、ファイルサイズは大きくなります。
• 70〜89：優れた品質と良好な圧縮。ほとんどのWeb用途に最適なスイートスポット。
• 50〜69：サムネイルや小さな画像には許容範囲。圧縮アーティファクトが見え始めます。
• 50未満：画質の低下が目立ちやすいため、容量を強く抑える必要がある場合に限って検討します。

ピクセルサイズとDPI#

Webや画面表示では、DPIメタデータよりも実際のピクセルサイズが重要です。1200px幅のJPGは、メタデータが72 DPIでも300 DPIでも、画面上の細かさは同じです。DPIは主に、印刷や一部のソフトが物理サイズを解釈するときに意味を持ちます。

• Webやメール：実際の表示サイズで出力し、HiDPI向けには2倍サイズを用意します。
• スライドや文書：文書内で表示する大きさに合わせて出力します。
• 印刷：物理サイズと目標DPIから必要ピクセル数を計算します。4インチ幅のロゴを300 DPIで印刷するなら1200px幅が必要です。

SVG→JPG変換でよくある失敗は、必要なピクセル数が足りない状態でJPG圧縮してしまうことです。SVGは拡大できるため、まず用途に合ったピクセルサイズでレンダリングし、その後で適切なJPG品質を選びます。

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

1. 背景色を明示する#

SVGには透明部分が含まれることがありますが、JPGは透明を保持できません。変換時に背景色を指定しないと、透明な領域が黒や白など意図しない色になる場合があります。利用先の背景に合う色を選んでください。

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

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

3. 適切な解像度を選ぶ#

Web用でRetina/HiDPI画面に対応したい場合は、表示サイズの2倍で書き出します。印刷用では物理サイズから必要なピクセル数を計算します。4インチ幅のロゴなら、300 DPIでは1200px幅が必要です。

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

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

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

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

よくある質問#

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

ある程度は落ちますが、設定によります。SVGはロスレスのベクターフォーマットですが、JPGは非可逆圧縮を使用します。高品質設定（90以上）と十分なピクセルサイズ（Webでは表示サイズの2倍、印刷では目標DPIから計算したサイズ）を使えば、品質低下は目立ちにくくなります。主な問題は圧縮ノイズだけでなく、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から書き出す方法もあります。

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