SVG を JPG に
SVG を JPG に変換:品質は自由に調整
品質と背景色を指定して、SVG を軽量な JPEG に書き出します。透過が不要な写真調のグラフィックの共有に向いています。
新規ファイルの既定値を編集しています
プレビュー
SVG とは
SVG(Scalable Vector Graphics)は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。
SVG は Web における標準のベクター形式です。最新のブラウザはすべて標準で対応し、CSS でスタイルを指定でき、JavaScript や SMIL でアニメーションもできます。同等のラスター画像に比べてファイルサイズも大幅に小さくなります。
JPG とは
JPG(JPEG)は非可逆圧縮のラスター画像形式で、写真やグラデーションの多い画像を小さなファイルにまとめます。JPG は透過に対応していないため、透明な部分は指定した背景色で塗りつぶされます。
SVG とラスター形式の比較
ベクター画像(SVG)とラスター画像(PNG、JPG)は用途が異なります。画像を何に使うかによって適した形式が決まります。
| 項目 | SVG | PNG / JPG | ICO / ICNS |
|---|---|---|---|
| 拡大縮小 | 解像度に依存しない | 拡大するとぼやける | 固定サイズで事前に描画 |
| ファイルサイズ | 図形やアイコンは小さい | 解像度とともに増える | 各サイズの画像の集合 |
| 編集 | テキストやベクターツールで編集可 | ピクセル単位の編集のみ | 各サイズを編集して再度まとめる |
| アニメーション | CSS、SMIL、JavaScript | 限定的(APNG / GIF) | 非対応 |
| 透過 | 対応 | PNG は対応、JPG は非対応 | 対応(PNG ベース) |
SVG を JPG に変換するのはどんなとき
透過が不要なら、JPG は PNG の 4〜10 分の 1 になります。写真の共有、サイズ制限のある SNS への投稿、メールへの添付など、単色背景でかまわない場面では SVG を JPG に変換してください。品質 0.85 が一般的な最適点で、可逆との違いはほとんどわからないままサイズは大幅に下がります。品質 0.7 を下回ると、輪郭や文字のまわりにリンギングノイズが見え始めます。
SVG から JPG:ファイルサイズと品質のバランス
ファイルサイズ
JPG は同等の PNG の 4〜10 分の 1 になるのが一般的です。1920×1080 の PNG スクリーンショットが 1〜3 MB だとすると、同じ内容を品質 0.85 の JPG にすれば 150〜400 KB になります。品質 0.7 ならさらにおよそ半分です。図形主体の SVG(ロゴ、線画)では、JPG が SVG 自体より大きくなることもあります。
JPG が適しているとき
ファイルサイズが重要で透過が不要な場面では JPG が有利です。メールへの添付、サイズ制限のある SNS への投稿、ブログ記事の画像、写真的な内容などです。透過のない内容では、どこでも使える形式のなかで最も小さくなります。
JPG ではなく SVG のままにすべきとき
ロゴ、アイコン、イラスト、平坦な色と鮮明な輪郭を持つものは SVG のままにしてください。JPG の非可逆圧縮は硬い輪郭や文字のまわりに目立つリンギングノイズを生みます。まさに SVG が得意な内容です。図形の多いグラフィックでは SVG のほうが小さいのも普通です。
品質とのバランス
JPG の圧縮は非可逆で、品質を 0.0-1.0 で指定します。品質 0.9 ではノイズはほとんど知覚できません。0.7 になると輪郭にリンギングが見え始め、0.5 ではブロックノイズがはっきりします。透過はありません。SVG の透明な部分は、選んだ背景色(既定では白)で塗りつぶされます。
SVG を JPG にオンラインで変換する方法
- ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
- 出力設定(サイズ、DPI、背景、品質、トレースの細かさ)を指定すると、プレビューがその場で更新されます。
- 「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。
プライバシー:ファイルはブラウザから出ません
ファイルが端末の外に出ることはありません。変換は JavaScript と WebAssembly を使ってすべてブラウザ内で実行されます。アップロードもサーバー処理もないため、ファイルに関する情報がどこかへ送られることはありません。
何もアップロードされないため、社外秘のロゴ、社内文書、未公開の顧客作品にも安心して使えます。使用中に端末へキャッシュされるので、初回訪問のあとはネットワーク接続がなくても動作します。
よくある質問
JPG の背景が白くなるのはなぜですか?
JPG は透過を保存できないため、SVG の透明な部分は塗りつぶされます。塗りつぶす色を指定するには単色の背景色を選んでください。透過が必要な場合は PNG か WebP で書き出してください。
JPG の品質はどれくらいにすべきですか?
写真や複雑な絵柄には 0.9 がまず選ぶなら無難です。可逆との違いはほとんどわからないまま、サイズは大きく下がります。サムネイルなら 0.7 から 0.8 に下げてください。JPG の圧縮は非可逆なので、極端に低い値ではブロックノイズが目に見えるようになります。
JPG は SVG の出力に向いていますか?
多くの場合、向いていません。SVG は平坦な色と鮮明な輪郭を持つことが多く、JPG はそれを苦手とします。文字や線のまわりにリンギングノイズが見えます。SVG の内容では、PNG や WebP のほうが小さなファイルサイズで見た目もよくなるのが普通です。JPG が向くのは写真的な SVG(埋め込みのラスター画像など)や、明示的に要求される場合です。