SVGをJPGに変換
JPGは行き先が厳格なときの書き出しです——メール署名、マーケットプレイス、SVGも透過も拒むCMS。ベクターは選んだスケールで描画され、白背景に合成されます。透過が必要な作品なら、SVG→PNGの方をお使いください。
あわせて便利: SVGをPNGに変換
使い方
ベクターを追加してください。変換の瞬間にブラウザ内で描画され、白背景に載ります。
ラスタースケール(既定2×)とJPEG画質を選びます。初期値の90は、ベクター特有の硬い輪郭を守るための手堅い値です。
仕上がったJPGを個別に、または1つのアーカイブで書き出してください。
SVG vs JPG
率直に言って、ベクター画像とJPEGは相性の悪い組み合わせです。輪郭のくっきりした平坦な色面は、写真向けに調整された圧縮が最も苦手とする素材そのもの。この組み合わせが働くのは受け取る側がJPG以外を認めない場合だけで、選択肢があるなら可逆ラスターの方がきれいに仕上がります。
| SVG | JPG | |
|---|---|---|
| 圧縮方式 | ベクター(XMLテキスト) | 非可逆(ロッシー) |
| 透過 | あり(フルアルファ) | なし |
| アニメーション | あり(CSS/SMIL) | なし |
| 対応環境 | 全ブラウザ対応。ただしアップロードフォームでは拒否されがち | あらゆる環境 — 最も無難な形式 |
| 向いている用途 | ロゴ、アイコン、イラスト | 写真、アップロード制限の厳しいフォーム |
よくある質問
いいえ。変換はWebAssemblyによってブラウザ内で完結するため、ファイルがお使いの端末の外に出ることは一切ありません。サーバーを介さない仕組みなので、ページを一度読み込めばオフラインでも動作し、ファイルサイズの制限も端末のメモリ以外にはありません。
SVGはベクター形式のため決まったピクセル数を持たず、出力解像度はご自身で選べます。倍率はSVGが宣言しているサイズに掛かる係数で、100×100のアイコンを3倍で書き出すと300×300の画像になります。ベクターから直接描画されるので、どの倍率でも輪郭は完全にシャープなままです。後から拡大するのではなく、用途に必要なサイズを最初から指定してください。
白になります。JPGにアルファチャンネルはありません。暗い背景に置く予定ならそれでは困るはずなので、PNGで書き出すか、特定の背景色が必要ならSVG自体に背景の矩形を足してください。
正直なところ、最適ではありません。JPGは写真のための形式で、輪郭が鋭い平坦な色面には近くで見るとわずかなリンギング(にじみ)が出ます。JPGが勝つのは、行き先がJPGを要求する場合と、ベクター内に写真的な要素が含まれる場合。それ以外はPNGかWebPの方が清潔です。
3つです。無限の拡大性(書き出しは固定ピクセル)、透過(白で埋まる)、完全に鋭い輪郭(JPEG圧縮でうっすら縁が波打つ)。引き換えに得るのは通用度——JPGはこれまで作られたあらゆるフォームとメールクライアントを通過します。許されるならSVGをPNGに変換が輪郭もアルファも保ちます。JPGは頑固な門番専用です。
透明を前提にデザインされたロゴやアイコン——白い塗りつぶしはたいていロゴの望みの逆です——と、幾何学的で極端にクリーンなアート。後者はどの画質でも輪郭沿いのハロが見えがちです。どちらもPNGなら美しく変換できます。JPGの出番は、ベクター内に写真が埋め込まれているときと、アップローダが他を全部突き返すときです。
関連ツール
SVGをPNGに変換
SVGを1〜4倍のスケールで高解像度PNGに書き出す無料ツール。透過は設計どおり、輪郭はどの倍率でも鮮明です。ラスタライズはすべてブラウザ内で行われ、ファイルは送信されません。
JPGをWebPに変換
JPG写真をWebPに変換する無料ツールです。ブラウザ内で完結し、アップロードも登録も不要。見た目はそのままに約25〜35%軽くなるので、ページの表示速度改善にそのまま効いてきます。
PNGをJPGに変換
PNGをJPGに変換して写真を70〜90%軽くできる無料ツールです。処理はブラウザ内で完結し、ファイルは端末から出ません。ファイルごとの画質スライダーで、容量と画質のバランスを自由に調整できます。
SVGをICO(ファビコン)に変換
SVGは最高のファビコン素材。宣言サイズの4倍で描画してから縮小するため、16pxでも輪郭が崩れません。透過ごと16・32・48pxの3サイズをICOに収めます。