SVGをPNG・JPEG・WebPへブラウザ内で変換する
SVGファイルまたはSVGコードを読み込み、出力形式、倍率またはpixel寸法、背景色、品質を指定して変換できます。処理はブラウザ内で完結し、外部参照や危険な要素は安全化時に除去されます。
SVG画像変換ツールを開く結論：背景色を決めてからJPEGへ変換する
JPEGにはalpha channelがないため、透明なSVGをそのまま保持できません。DevelopToolsではJPEGを選んだ状態で透明背景を指定できず、白へ切り替わります。白、黒、または利用先の背景色を指定してCanvasへ合成してからJPEGを生成します。
JPEGの品質は1～100%で指定できますが、品質値と容量・画質の関係は画像内容とブラウザencoderで変わります。複数設定を作り、文字、輪郭、gradationを比較します。
JPEGへ向く用途と向かない用途
| 用途 | 判断 |
|---|---|
| 背景付きの写真調イラスト | JPEG候補 |
| 透明ロゴ・アイコン | PNGまたはWebPを優先 |
| 小さな文字・細線 | PNGとJPEGを比較 |
| 将来サイズ変更する原稿 | SVGを元データとして保持 |
背景と画質を確認する手順
- 最終利用先の背景色を決めます。
- JPEGと背景色を選び、必要なpixel寸法を指定します。
- 高めの品質から変換し、容量と輪郭を確認します。
- 利用先へ配置して色と余白を最終確認します。
DevelopToolsでSVGをラスター画像へ変換する手順
SVGファイルを選択またはドロップするか、svg要素を含むコードを貼り付けます。複数ファイルには同じ設定をまとめて適用できます。出力形式はPNG・JPEG・WebPで、PNGは透明を保持でき、JPEGは透明を保持できないため背景色が必要です。WebPはブラウザがCanvas出力に対応している場合に使えます。
出力サイズは元SVG、0.5・1・2・3・4倍、幅と高さの直接指定から選べます。直接指定では縦横比を固定でき、1辺の上限は32,767pxです。50メガピクセル以上では警告し、100メガピクセルを超える変換は停止します。JPEGとWebPでは品質、全形式で透明・白・黒・任意色の背景を設定できますが、JPEG選択時の透明指定は白へ切り替わります。
- 元SVGを別名で保管し、ファイルまたはSVGコードを読み込みます。
- プレビューで文字、余白、外部参照に関する警告を確認します。
- PNG・JPEG・WebP、出力サイズ、縦横比、背景色、必要なら品質を設定します。
- 変換後の寸法、容量、透明部分、文字、細線を確認して保存します。
SVGは読み込み時にXMLとして解析されます。DOCTYPE、script、foreignObject、iframe、object、embed、audio、video、イベント属性、javascript: URL、外部画像・外部CSS参照は安全化のため削除されます。外部フォントや画像に依存するSVGは、変換結果が元の表示と異なる場合があります。
保存前に確認するポイント
| 確認対象 | 判断する内容 |
|---|---|
| 出力形式 | 透明が必要ならPNGまたはWebP、透明不要の写真調ならJPEGが用途に合うか |
| 出力寸法 | width・height・viewBoxから得た比率と、利用先が必要とするpixel寸法が合うか |
| 余白と位置 | viewBoxの原点、描画範囲、preserveAspectRatioにより意図しない空白が出ていないか |
| 文字 | 利用環境にないフォントへ依存せず、改行・字幅・位置が変わっていないか |
| 外部参照 | 外部画像、CSS、Webフォント、foreignObjectが除去されても内容が成立するか |
| 安全性 | 元SVGを保持し、変換結果を100%表示と実際の利用先で確認したか |
SVGをラスター画像へ変換すると、拡大しても滑らかなベクター情報は出力画像に残りません。後から別サイズが必要になる可能性がある場合は、元SVGも保存してください。
仕様を確認した参考資料
SVG・Canvas・画像encoderの挙動はブラウザやライブラリの版で変わる場合があります。公式仕様と利用中の環境を確認し、実ファイルで再現性を検証してください。
具体例：SVGをJPEG・JPGに変換する方法｜背景色と画質の設定を実ファイルで確認する
ロゴや図版の元SVGを複製し、ブラウザで単体表示した状態と変換ツールのプレビューを並べます。文字、細線、透明部分、余白、埋め込み画像を先に確認すると、出力形式とサイズの問題を切り分けやすくなります。
候補設定を複数作り、ファイル容量だけで決めず、100%表示と実際の掲載サイズで比較します。再変換できるよう元SVGと採用した設定を残します。
- 元SVGを複製して保管します。
- SVG画像変換ツールへ読み込み、警告と元寸法を確認します。
- 目的の形式・寸法・背景色・品質を設定して変換します。
- 変換画像を利用先で開き、元SVGと比較して採用を決めます。
拡張子だけを書き換えても画像形式は変わりません。SVGを描画し、PNG・JPEG・WebPのencoderで新しい画像を生成する必要があります。
よくある質問
- SVGをJPEG・JPGに変換する方法｜背景色と画質の設定では元SVGを削除してもよいですか？
- 削除しないでください。ラスター画像にはpath、文字、viewBox等の編集可能なベクター情報が残らず、別解像度が必要になったとき元SVGからの再変換が必要です。
- 変換結果はサーバーへ送信されますか？
- DevelopToolsのSVG画像変換ツールでは、読み込み、解析、安全化、Canvas描画、保存をブラウザ内で行い、入力SVGや結果をサーバーへ送信しません。