SVG CONVERTER
履歴SVG→コード
← Back to Blog

SVGをJPGに変換する完全ガイド：オンライン、コマンド、プログラム方法まで解説

SVGをJPGに変換する方法を、オンラインツール、コマンドライン(ImageMagick/cwebp)、Node.js/Pythonプログラムまで、完全なコード例と共に詳解。最適な変換方法を選べます。

2 min read

SVGをJPGに変換する：目的別・完全ガイド

SVG（Scalable Vector Graphics）は拡大縮小に強く、Webアイコンやロゴに広く利用されています。一方、JPG（JPEG）は写真など豊富な色数の画像に適した非可逆圧縮形式です。プロジェクトの要件によっては、SVGをJPGに変換する必要性が生じます。例えば、すべての環境で一貫した表示を求められる印刷物の素材、SVG非対応のレガシーなシステムへのアップロード、あるいは複雑なベクターグラフィックを一枚のラスタ画像として簡単に共有したい場合などです。

本記事では、単にツールを紹介するだけでなく、「なぜ変換が必要か」 という背景から、オンラインツール、コマンドライン、そしてプログラムによる自動化まで、段階的に解説します。各方法のサンプルコードも完全な形で提供するので、そのままご利用いただけます。また、SVGをコードスニペットに変換する必要がある場合は、専用のSVG→Codeツールもご活用ください。

SVGをJPGに変換する必要性と基礎知識

変換を検討する前に、両フォーマットの特性を理解しましょう。SVGはXMLベースのベクター形式であり、図形を数値で定義するため、拡大しても画質が劣化しません。しかし、複雑なグラデーションや詳細な描写を含むとファイルサイズが大きくなり、すべてのブラウザやアプリケーションで完全に同じように表示されるとは限りません。

JPGはピクセル（画素）ベースのラスター形式です。写真のような連続階調の表現に優れ、高い圧縮率でファイルサイズを小さくできますが、拡大すると画質が粗くなる（ピクセルが見える）という欠点があります。SVGをJPGに変換する作業は、本質的にはベクター情報を特定の解像度（例：幅2000ピクセル）のピクセルマップに「レンダリング（描画）」するプロセスです。

方法1：オンラインツールで手軽に変換する

最も手軽な方法は、ブラウザ上で動作する無料のオンライン変換ツールを利用することです。ファイルをアップロードし、数クリックで変換できます。初心者や、頻度の低い単発の作業に最適です。例えば、SVG→CodeツールはSVGグラフィックをフレームワーク対応のコードスニペットに変換する専用プレイグラウンドです。

代表的なツール:

  • Convertio: 多様なフォーマットに対応し、直感的なUIが特徴です。
  • OnlineConvertFree: シンプルで広告が少なく、使いやすいサービスです。

メリット: ソフトウェアのインストールが不要。どのOSからでも利用可能。 デメリット: 大量のファイル処理には向かない。機密性の高いファイルのアップロードには注意が必要。

方法2：コマンドラインで効率的に変換する

開発者や、定期的なバッチ処理を行うユーザーには、コマンドラインツールが強力です。スクリプト化することで、何百ものファイルも一括処理できます。

ImageMagick (convert コマンド) を使用する

ImageMagickは画像処理の定番ツールです。ほとんどのLinuxディストリビューションにプリインストールされており、macOSではHomebrew (brew install imagemagick)、Windowsではインストーラーから導入できます。

基本的な変換コマンドは以下です。

# input.svg を output.jpg に変換
convert input.svg output.jpg

# 出力解像度（DPI）を指定して高品質で変換
convert -density 300 input.svg -quality 92 output_high_res.jpg

# 出力サイズを幅800ピクセルに指定
convert input.svg -resize 800 output_resized.jpg

# 背景を白色で塗りつぶして変換（SVGが透明背景の場合）
convert input.svg -background white -flatten output_with_bg.jpg

専用ツール cwebp や inkscape を活用する

SVGのレンダリングエンジンとして優れているInkscapeをコマンドから使う方法もあります。

# Inkscapeを使用してSVGをPNG経由で高品質JPGに変換
inkscape input.svg --export-filename=output.png --export-dpi=150
convert output.png -quality 90 output.jpg

方法3：Node.js / Python でプログラムから変換する

アプリケーションの機能として画像変換を組み込みたい場合、プログラミング言語を用いた方法が必須です。ここではJavaScript(Node.js)とPythonの二つの主要な言語での実装例を示します。より手軽にコードを生成したい場合は、SVG-to-code playgroundもご利用ください。

Node.js での実装例 (sharp ライブラリ)

sharpは高速な画像処理ライブラリです。まずプロジェクトでインストールします：npm install sharp

以下のコードは、非同期処理でSVGを高品質なJPGに変換します。

const sharp = require('sharp');

async function convertSvgToJpg(inputPath, outputPath) {
  try {
    await sharp(inputPath)
      .jpeg({
        quality: 85, // 画質 (1-100)
        mozjpeg: true // より高効率なJPEG圧縮を使用
      })
      .toFile(outputPath);
    console.log(`変換成功: ${outputPath}`);
  } catch (error) {
    console.error('変換中にエラーが発生しました:', error);
  }
}

// 関数の使用例
convertSvgToJpg('logo.svg', 'converted-logo.jpg');

sharpの詳細はNode.js公式ドキュメントとは別に、sharp公式リポジトリで確認できます。

Python での実装例 (cairosvg ライブラリ)

PythonではcairosvgがSVGのPDF/PNGへのレンダリングに優れています。Pillow (PIL) と組み合わせてJPGに変換します。

import cairosvg
from PIL import Image
from io import BytesIO

def convert_svg_to_jpg(svg_path, jpg_path, dpi=150, quality=90):
    """
    SVGファイルをJPGに変換する関数

Args:
        svg_path (str): 入力SVGファイルのパス
        jpg_path (str): 出力JPGファイルのパス
        dpi (int): 出力解像度
        quality (int): JPG品質 (1-100)
    """
    try:
        # 1. SVGをPNGバイトデータにレンダリング
        png_bytes = cairosvg.svg2png(url=svg_path, dpi=dpi)

# 2. バイトデータをPIL Imageで開く
        img = Image.open(BytesIO(png_bytes))

# 3. RGBモードに変換（RGBAの場合、透明部分が白になる）
        if img.mode in ('RGBA', 'LA'):
            background = Image.new('RGB', img.size, (255, 255, 255))
            if img.mode == 'LA':
                background.paste(img.convert('RGBA'), mask=img.convert('RGBA'))
            else:
                background.paste(img, mask=img.split()[-1]) # アルファチャンネルをマスクとして使用
            img = background
        elif img.mode != 'RGB':
            img = img.convert('RGB')

# 4. JPGとして保存
        img.save(jpg_path, 'JPEG', quality=quality, optimize=True)
        print(f"変換成功: {jpg_path}")

except FileNotFoundError:
        print(f"エラー: ファイル '{svg_path}' が見つかりません。")
    except Exception as e:
        print(f"変換中に予期せぬエラーが発生しました: {e}")

# 関数の使用例
if __name__ == "__main__":
    convert_svg_to_jpg('input.svg', 'output.jpg', dpi=200, quality=95)

このコードは、透明背景を白で塗りつぶす処理も含んだ実用的な例です。

解決策の比較とよくある間違い

各方法は一長一短です。オンラインツールは「簡単さ」、コマンドラインは「効率と自動化」、プログラミングは「アプリケーションへの組み込みと柔軟性」が強みです。

よくある失敗と解決策:

  • 出力が荒い: これは解像度（DPI）設定が低すぎることが原因です。コマンドやプログラムでdensityやdpiパラメータを高く設定しましょう（例：150, 300）。
  • 背景が黒くなる/透明が保持されない: JPG形式は透明度（アルファチャンネル）をサポートしません。変換時に背景色（通常は白）を指定して「塗りつぶす」必要があります。上記の-background white -flatten（ImageMagick）やPythonコード内のRGB変換処理がその例です。
  • 複雑なSVGが正しくレンダリングされない: 使用しているライブラリやツールのSVGサポートレベルに依存します。Inkscapeベースの変換や、最新版のsharp/cairosvgの使用を試してください。専用の SVG-to-code ツール も、正確なレンダリングとコード生成に役立ちます。

SVGからJPGへの変換に関するFAQ

Q: SVGをJPGに変換すると画質はどうなりますか？ A: JPGは非可逆圧縮のため、完全な原画質の保持はできません。特にシャープなエッジやテキスト部分にアーティファクト（ノイズ）が生じることがあります。qualityパラメータを高く（90以上）設定し、高DPIでレンダリングすることで、見た目の品質を大幅に向上させられます。

Q: 変換後も背景を透明にしたいのですが、可能ですか？ A: JPG形式では透明背景を保存できません。透明を維持する必要がある場合は、PNG形式への変換を検討してください。PNGは可逆圧縮で透明度をサポートしています。

Q: 一度に大量のSVGファイルをJPGに変換するには？ A: コマンドラインのバッチ処理か、プログラミングスクリプトが最適です。例えば、bashスクリプトでfor file in *.svg; do convert "$file" "${file%.svg}.jpg"; doneとすれば、ディレクトリ内の全SVGファイルを変換できます。Node.jsやPythonでも同様のループ処理を記述できます。

まとめ

SVGをJPGに変換する方法は、ユーザーの技術レベルと作業規模によって最適な選択肢が変わります。単発の作業ならオンラインツール、効率的なバッチ処理ならコマンドライン、Webサービスやアプリケーションに組み込むならNode.jsやPythonによるプログラミング、という棲み分けが明確です。

変換時に重要なのは、「解像度(DPI)」と「背景色の処理」の2点を意識することです。これらを正しく設定することで、用途に合った高品質なJPG画像を得ることができるでしょう。本記事で紹介したコードサンプルを出発点として、ご自身のプロジェクトに適したSVGからJPGへの変換ワークフローを構築してください。