SVGをJPGに変換
アップロードフォーム、マーケットプレイス、印刷会社のなかには、JPGしか受け付けないところがあります。必要なサイズで、選んだ背景色の上にベクターをレンダリングします。JPGには透過がないからです。何も保存されません。
- 保存しません
- 順番待ちなし
- 登録不要・透かしなし
使い方
SVGを追加
.svgファイルをいくつでもドロップします。
サイズと背景を選ぶ
ピクセル幅を設定し（ベクターはどんなサイズでもくっきりです）、透明だった部分を塗る色を選びます。
ダウンロード
設定した画質で、1つずつまたはZIPで保存します。
JPGがベクターと相性の悪い理由と、劣化を最小にする方法
JPEGは写真のために設計されました。滑らかなグラデーションとシャープな輪郭のない画像なら、8×8ブロックの変換とクロマサブサンプリングがうまく働きます。ベクターのアートワークはその正反対です。単色の塗り、1ピクセルの線、鋭い角、小さな文字。JPEGではそうした輪郭すべてにかすかな波紋状のにじみが出て、鮮やかな色と白が接する境目には色のフチが現れます。色が半分の解像度で保存されるからです。画質90以上ならにじみはほとんど見えませんが、75ではどんなロゴでも目に付きます。このページの画質スライダーが高めから始まるのはそのためです。
背景色は飾りではありません。背景のないSVGは「何もない場所」に描かれますが、JPEGはすべてのピクセルに何かを持たなければならないので、空いた部分はエンコード前に塗りつぶされます。アンチエイリアスされた輪郭は透明に向かってブレンドされていましたが、変換後は選んだ色に向かってブレンドされます。そのため白の上でレンダリングしたロゴを暗いページに置くと、薄いフチが見えます。配置先の色を選ぶか、輪郭をブレンドしないまま保てるPNGを使ってください。
ファイル内で完結しているものはすべて描かれたとおりにレンダリングされます。グラデーション、フィルター、マスク、クリッピング、埋め込みのデータURI画像などです。リンクされた画像とWebフォントは読み込まれません。画像としてレンダリングされるSVGはネットワークから隔離されているからです。スクリプトも実行されません。SVGがviewBoxだけを宣言している場合、縦横比はそこから決まり、設定した幅が高さを決めます。
ほかの目的には
rsvg-convert -w 1600 -b white in.svg -o out.pngのあとにcjpeg -quality 92を使えば、ブラウザのエンコーダーよりきれいなJPEGができ、文字の背後には本物のフォント環境があります。Inkscapeならコマンドラインから、DPIと背景を指定してフォルダー全体を書き出せます。
変換する前に、JPGを要求している相手がPNGを受け付けないか確認してください。ほとんどのものは受け付けますし、ロゴのPNGはより小さく、くっきりしていて、透過もあります。本当にJPGが必要な場面は限られています。アップロード条件の厳しいマーケットプレイス、一部の印刷会社、PNG対応より前の古いシステムです。
よくある質問
PNGにすべきではありませんか？
たいていの場合、はい。ベクターのアートワークは単色の塗りとシャープな輪郭でできており、JPGはそれを苦手とし、PNGは完璧に圧縮します。透過を保てるのもPNGだけです。出品フォーム、古いシステム、印刷会社など、JPGを明確に要求される場合にこのページを使い、それ以外はSVG PNG変換を使ってください。
透明な背景はどうなりますか？
JPGには透過がないので、SVGが何も描いていない部分はエンコード前に選んだ色で塗りつぶされます。初期設定は白です。画像を置く場所の色に合わせてください。
どのサイズでレンダリングすればよいですか？
表示または印刷される最大のサイズの、高密度画面向けに2倍です。元がベクターなので、大きくレンダリングしても画質上の不利はありません。不利になるのはファイルサイズだけです。
デザインツールと文字の表示が違うのはなぜですか？
SVGはフォントを名前で指定し、レンダリングする環境にそのフォントがなければ手持ちのもので代用されます。書き出す前に文字をアウトライン化すれば問題は消えます。URLで参照されたWebフォントは取得しません。レンダリングは外部に一切アクセスしません。
ファイルはどこかに保存されますか？
いいえ。どの段階でも何も保存されません。
ご注意： 外部の画像やWebフォントに依存するSVGは、それらなしでレンダリングされます。スクリプトは実行されず、アニメーションは最初のフレームでレンダリングされます。低画質ではシャープな輪郭にJPG特有のにじみが出るので、アートワークでは90以上にしてください。
このツールをあなたのサイトに設置
ブログ、授業のページ、ヘルプ記事などに無料で設置できます。コードを1つ貼り付けるだけで、訪問者がそのページ上でツールを使えるようになります。