SVGをJPGに変換

SVGをJPGに変換する手順

1. SVGファイルを追加する.svgファイルを選択するか、ボックスにドロップしてください。1ファイル5MBまで扱えます。
2. サイズ、画質、背景を決める幅を空にするとSVGの元のサイズになります。ピクセルで幅を入力することもでき、1倍から4倍の拡大も選べます。画質の初期値は90、背景の初期値は白です。
3. JPGをダウンロードする各行の「ダウンロード」を押すか、すべてまとめてZIPで保存してください。行には最終的なピクセルサイズが表示されます。設定を変えたときは、もう一度変換を押して結果を作り直します。

SVGをJPGに変換する理由

SVGは図形と曲線で絵を表すので、どんなサイズにしてもぼやけません。ただ、申込フォームのアップロード、メールの添付、古いワープロソフト、印刷会社の入稿、一部のCMSなどは、JPGしか受け付けずSVGを断ることがあります。そのようなときに、SVGをJPGにしておくと確実に使えます。

JPGは透過を保存できないため、このツールはSVGを単色の背景に重ねて描画します。初期値は白で、黒、グレー、好きな色にも変えられます。SVGはベクター画像なので、変換時に出力サイズを決められます。大きめに書き出せば、高解像度のディスプレイでもくっきり表示できます。

参考資料： MDN: SVG（日本語）

解像度と画質の決め方

初期のサイズは、SVGファイルに書かれているサイズです。viewBoxだけが書かれたSVGはそこから大きさを読み取り、どちらもない場合は1024 × 1024ピクセルで変換します。幅を入力すると縦横比は保たれ、高さは自動で決まります。

拡大は幅に掛け算されるので、200ピクセルのアイコンを4倍にすると800ピクセルになります。幅は16から8192ピクセルまで指定でき、端末が扱える大きさを超える場合は自動で縮小されます。目安としては、画像を表示する大きさを決め、高解像度のディスプレイ向けにその2倍で書き出してください。

画質は1から100で、初期値の90はイラストやSVGに埋め込まれた写真に向いたバランスです。フラットなロゴや細い文字は、画質を70前後より下げると輪郭の周りにうっすらとにじみが出ます。それらは高めのままにしてください。輪郭をくっきり残したい、背景を透過のままにしたいときは、SVGをPNGに変換するツールをお使いください。

SVGで正しく描画されないもの

SVGには、スクリプトや外部リソースへのリンクを含められます。描画の前に、スクリプト、イベントハンドラ、外部参照を取り除き、コードを実行できない通常の画像要素を通して描画します。そのため、外部にリンクされた画像、フォント、スタイルシートは反映されず、見つかったときは結果の行に表示されます。SVGの中にデータとして埋め込まれた画像は、そのまま使えます。

いちばん多い戸惑いは文字です。SVGが使っているフォントがパソコンに入っていないと、ブラウザが別のフォントに置き換え、文字の見た目が変わります。書き出す前にベクター編集ソフトで文字をアウトライン化しておくと、元の見た目のまま変換できます。

• 透過部分は背景色で塗られます。初期値は白です。
• 半透明の図形、グラデーション、マスク、フィルターはブラウザが描画し、そのうえで背景色と合成されます。
• 処理はすべて端末の中で行われ、アップロードはありません。

ロゴやアイコンをJPGにするとき

ロゴやアイコンのSVGをJPGにするのは、SNSのプロフィール画像や、ECサイトの商品画像、名刺や資料の差し込み用など、背景が白で問題のない場面が中心です。背景が暗いページに置く場合は、白い縁が目立たないように、貼り付け先の色を背景に指定してください。

あとでファイルを軽くしたいときは、画像圧縮ツールで画質をさらに調整できます。ただし、JPGの保存を重ねるたびに少しずつ画質が下がるので、元のSVGは必ず残しておきましょう。

よくある質問