SVG JPG 変換

使い方

1. 1入力欄にSVGコードを貼り付けるか、デバイスから.svgファイルを選択します。
2. 2ツールが読み取った幅と高さを確認します。幅を空欄にすると、SVGの幅のままになります。
3. 3ピクセル密度、JPGの品質、背景色を設定します。背景色は初期値の白です。
4. 4プレビューを確認します。プレビューはご利用のブラウザで描画され、送信される前に表示されます。
5. 5「JPGに変換」をクリックしてから、.jpgファイルをダウンロードします。

出力例

Original SVG, 240 x 160 units

Converted JPG, 960 x 640 px, quality 80, 20 KB

SVG JPG 変換の使い方

まず、SVGコードを入力欄に貼り付けるか、.svgファイルを選択します。ツールはブラウザ内でコードを整えます。続いて、SVGのwidthとheight属性、またはviewBoxから幅と高さを読み取ります。読み取ったサイズが表示されるので、変換前に確認できます。

出力の幅はpx単位で指定します。空欄にすると、SVGの幅のままになります。ピクセル密度は1x、2x、3xから選べます。JPGの品質と背景色も設定します。プレビューには、選んだ背景色で描画された図が表示されます。

設定が決まったら、「JPGに変換」をクリックします。ツールは整えたSVGをレンダリングサーバーに送り、JPGをダウンロードできるようにします。ダウンロード後は、使用するソフトで画像を確認してください。

SVG JPG 変換で行われること

ツールはまずDOMPurifyを使い、ブラウザ内でSVGを整えます。スクリプトやイベント属性など、動作を伴う部分はこの段階で取り除かれます。整えられたコードはレンダリングサーバーに送られ、ヘッドレスChromium（画面を持たないブラウザエンジン）がSVGを描画します。描画結果は、拡張子が.jpgのJPEGファイルとして保存されます。

これは通常の描画処理で、AIによる処理ではありません。プレビューはご利用のブラウザで描画され、JPGはサーバー上のChromiumで描画されます。結果パネルも確認してください。プレビューと結果が違う場合は、SVGで使っているフォントや外部画像を確認してください。

SVGをJPGに変換する理由

SVGはベクター形式です。MDNは、SVGを図やアイコンなど、どのサイズでも正確に描ける画像に適した形式だと説明しています。一方で、アプリやフォーム、メールツール、文書ツールの中には、ラスター画像しか受け付けないものがあります。JPGはよく使われるラスター形式の一つです。JPGはピクセルを固定の格子で並べた画像なので、SVGに対応していないツールにも配置できます。

変換先がSVGを受け付けるなら、元のSVGを残しておきます。JPGへの変換は、送り先から求められたときに行えば十分です。後から図を拡大する予定がある場合は、SVGを残し、必要なサイズでJPGを作り直してください。

透過したSVGをJPGに変換する場合

JPGは透過に対応していません。MDNは、JPEGにアルファチャンネルがないと説明しています。このため、本ページには透過の設定はありません。塗りがない部分、たとえば角丸や余白は、選んだ背景色で塗りつぶされます。初期値は白です。

こちらの測定では、サンプルカードの角丸と周囲の余白は、JPGで白になりました。半透明の部分は背景色と混ざるため、明るい背景と暗い背景では見た目が変わります。画像を置く場所に合わせて背景色を選んでください。

背景を透過したい場合は、「SVGをPNGに変換するツール」を使ってください。PNGは、SVGの透明な部分を残せます。

出力サイズとピクセル密度

出力の幅は100から4000pxの間で指定します。空欄にすると、SVGの幅のままになります。高さはSVGの比率に合わせて決まります。無料のツールでは、高さを100から2000pxの間にする必要があります。

ピクセル密度は、表示サイズ1単位あたりに描くピクセル数を決めます。2xや3xにすると、同じ見た目のサイズでもピクセル数が増えます。ツールは出力サイズを、幅×密度、高さ×密度の形で表示します。

JPGのピクセル数は決まっています。別のサイズが必要になったら、元のSVGを残し、新しい設定でもう一度変換してください。

JPGの品質の選び方

JPGの品質は1から100で、初期値は80です。ツールのスライダーで変更できます。品質を下げるとファイルは小さくなりますが、劣化が目立ちやすくなります。JPGの圧縮は非可逆なので、出力が元の図と完全に同じになるとは限りません。

こちらの測定では、ツールのサンプルカード（960 x 640 px）は、品質50で14KB、品質80で20KB、品質95で38KBになりました。結果は描いた図によって変わります。多くの画像では、初期値の80から試すとよい出発点です。文字の周りにブロックノイズや輪郭のぼやけが出る場合は、品質を上げてください。

JPGとPNGの選び方

ロゴやアイコン、グラフなど、フラットな色とシャープな輪郭を持つ図は、通常PNGのほうがきれいに仕上がります。MDNは、図やグラフのように鮮明さが求められる内容では、非可逆圧縮で満足のいく結果が得られないことがあると説明しています。より正確な再現が必要な場合、MDNはPNGを勧めています。JPGは、写真に近い描画やグラデーション、またはプログラムやフォームで指定されている場合に向いています。

ファイルサイズだけで判断することはできません。こちらの測定では、サンプルカードは背景が白のPNGで191KB、背景を透過したPNGで208KBでした。多くの色が塗り分けられ、文字が多い図は、PNGのほうが小さくなることがあります。手元のSVGで両方の形式を比べてみてください。

SVG内のフォントと画像

文字は、レンダリングサーバーにインストールされたフォントで描画されます。インストール済みのフォントは、Liberation Sans、Liberation Serif、Liberation Mono、Noto Sans、Noto Serif、Noto Sans Displayです。Noto系のフォントは、Arabic、Hebrew、Devanagari、Thai、中国語、日本語、韓国語など、多くの文字にも対応しています。ArialとHelveticaはLiberation Sansに、Times New RomanはLiberation Serifに、Courier NewはLiberation Monoに、GeorgiaはNoto Serifに割り当てられます。

サーバーにないフォント、たとえばSegoe UI、Roboto、Inter、またはデバイスにあるフォントは、代替フォントで描画されます。見た目を保つには、フォントをSVGに埋め込むか、公開URLまたはデータURLから@font-faceで読み込んでください。外部画像は、公開されたhttpまたはhttpsのアドレスからだけ読み込まれます。

SVGから取り除かれるもの

SVGがブラウザから送られる前に、ツールはスクリプトやイベント属性（たとえばonclick）を取り除きます。同様に、ほかの動作を伴う部分も取り除かれます。描画にJavaScriptが必要なSVGは、その内容がJPGに表示されません。

変換前にプレビューを確認してください。要素が欠けている場合は、SVGのコードにスクリプトやイベント属性がないか確認してください。図は、通常のSVGの図形と文字に作り直すことをおすすめします。

制限とプライバシー

.svgファイルは2 MBまで開けます。無料のツールでは、SVGコードは256 KBまで変換できます。アカウント登録なしで使う場合は、セキュリティ確認（Cloudflare Turnstile）が必要です。ログインしているユーザーはセキュリティ確認を省略でき、クレジットを使います。JPGには透かしが入りません。

変換結果は10分後に削除されます。履歴は保存されません。ダウンロードは、それまでに済ませてください。使用する権利のある画像だけを変換してください（利用ポリシーを参照）。失敗したジョブやタイムアウトしたジョブは、クレジットが返却されます。

APIでSVGをJPGに変換する

ファイルが多い場合は、APIを使うと便利です。POST /v1/render にリクエストを送ります。SVGはhtmlフィールドに入れ、outputにはjpegを指定します。ビューポートの幅と高さを設定します。device_scale_factorは1から3まで、qualityは1から100までです。レスポンスは、job_idを含む202です。

GET /v1/jobs/:id をポーリングし、statusがsucceeded、failed、timeoutのいずれかになるまで確認します。download_urlは短時間だけ有効な署名付きリンクなので、準備ができたら早めにダウンロードしてください。一括処理用のエンドポイントはないため、1つのドキュメントにつき1リクエストを送ります。Webhookはまだ利用できません。認証は、APIキーをAuthorization: Bearer または x-api-key で送ります。ツールの下には、現在の設定から生成されたcURL、Node.js、Pythonの例が表示されます。

関連ツール

透過が必要な場合は「SVGをPNGに変換するツール」を使ってください。ベクターのままPDFにして、どのサイズでも図をシャープに保ちたい場合は「SVGをPDFに変換するツール」があります。ラスター画像をベクターのパスに戻したい場合は「JPGをSVGに変換するツール」や「画像をベクター化するツール」を使います。PNGをJPGに変換する場合は「PNGをJPGに変換するツール」、文字を画像にする場合は「テキストをPNGに変換するツール」、Webページの場合は「HTMLをJPGに変換するツール」を使ってください。

よくある質問