SVG を JPG に変換

なぜ SVG をわざわざ変換するのか

技術的にはほぼあらゆる点で SVG のほうが優れています。どれだけ拡大しても鮮明で、ファイルはたいてい極小、テキストエディタでそのまま編集もできます。ところがどこかにアップロードしようとすると、JPG か PNG しか受け付けないと言われます。

SVG を JPG に変換する理由はそこに尽きます。JPG のほうが優れているからではなく、画像の送り先がベクターを受け付けないからです。実際のところ、次の 3 つでほとんど説明がつきます。

SVG を JPG に変換する 3 ステップ

アカウントもアップロードの手順も順番待ちもありません。ここで SVG を JPG に変換するには、ファイルを置くだけです。置いた瞬間にご自身のブラウザが読み取ります。

1. 1

   SVG を置く

   複数まとめてでも構いません。width/height も viewBox も持たないファイルは、適当な既定サイズで黙って変換されるのではなく、個別に印が付きます。その場合は「正しい推測」というものが存在しないからです。

2. 2

   サイズと背景色を選ぶ

   倍率、正確な幅、アイコンのプリセットから選べます。複数選べば、その全部が一度に書き出されます。次に透明部分を埋める色を選びます。多くの方が期待する結果に合わせて、既定は白です。

3. 3

   サイズを確認してダウンロード

   表示される出力サイズは推定ではなく、実際にエンコードして測った値です。見えている数字がそのまま結果になります。1 つずつでも、ZIP でまとめてでも受け取れます。

透明を残したい場合は、PNG で書き出す同じ仕組みのツールがあります。どちらを選ぶべきかは、下の比較表で説明しています。

透明な背景という厄介ごと

ほとんどの SVG は背景が透明です。ロゴとは何もない空間に浮かぶ図形の集まりで、だからこそどんな色の面にもきれいに載ります。一方 JPG にはアルファチャンネルがありません。そのピクセルが透けているという情報を、形式として記録する手段がないのです。そのため変換時には、透明なピクセルはすべて実際の何らかの色にならなければならず、どの色にするかはツールが決めます。

この決定こそが、SVG から JPG への変換で最も多い苦情の出どころです。ロゴの背景が黒くなって返ってくる、というものです。技術的には何も壊れていません。透明部分が描画キャンバスの既定色で埋められただけで、初期化されていないキャンバスのその既定色は黒なのです。白で埋めるツールもあれば黒で埋めるツールもあり、そして大半はこの件に触れません。よく知られた変換サービスの一つは、透明領域が単色で埋められることを FAQ で認めていますが、どの色にするかを指定する手段は用意していません。

ここでは塗りつぶしの色は偶然ではなく操作対象です。多くの方の期待に合い、文書にも馴染むため白があらかじめ選ばれており、黒はワンクリック、それ以外の色も直接指定できます。もし本当に残したいのがその透明そのものであれば、JPG はそもそも目標の形式として間違っています。その場合は PNG への変換をお使いください

関連ツール

変換の前後で必要になるかもしれないもの。いずれもブラウザ内で動作します。

• SVG を PNG に変換 — 同じベクター入力ですが、透明な背景は変換後も残ります
• 画像を圧縮 — アップロードに容量制限があるとき、書き出した JPG を正確な KB まで落とします
• 画像サイズを変更 — 手元のビットマップの寸法を変更。証明写真や SNS 向けのプリセット付き
• PNG を JPG に変換 — ベクターではなく、もともとビットマップのファイル向け
• 画像を WebP に変換 — フォーム提出ではなくウェブ掲載が目的なら、より小さい新しい形式へ