SVG→PNG・JPEG・WebP変換
SVGファイル（または貼り付けたSVGのテキスト）を、PNG・JPEG・WebPに変換します。倍率か幅の指定、背景色（透明も可）、プレビューつき。SVG内のスクリプトや外部URLは、実行も取得もしません。
読み込み中…
使い方と仕様
SVGは拡大しても粗くならない図形のデータで、メールや SNS、スライドには貼れないことがあります。そういう場面のために、決めた大きさの画像（PNG・JPEG・WebP）にします。SVGのファイルをドロップするか、SVGのテキストを貼り付けると、すぐにプレビューが出ます。
出力の大きさは、「倍率」か「幅」で決めます。倍率は、SVGの元の大きさ × 倍率を四捨五入して整数のピクセルにします（最低1px）。幅を決めたときの高さは、元の縦横比のまま四捨五入します。たとえば 300×200 のSVGを幅100pxにすると、高さは 66.67 を丸めて 67px です。大きさは、一辺16384px以下、3600万画素以下まで。それを超える指定は、理由を表示して止めます。
元の大きさは、根元の svg タグから次の順に決めます。width と height が両方ある → その値。片方だけで viewBox がある → viewBox の縦横比で補う。どちらもなく viewBox がある → viewBox の幅と高さ。pt・mm・cm・in・pc は 1インチ=96px で換算し、em は 16px とみなします。% 指定や、viewBox も width・height もない SVG は、大きさを決める材料がないので、理由を表示して、幅と高さを入力してもらいます。
安全のため、SVGは画像として読み込んで描きます。この方法では、SVGの中の script は動かず、onclick などのイベントも働かず、外部のURL（画像・フォント・CSS）も取りに行きません。外部の画像やフォントに頼っているSVGは、その部分が抜けた絵になります。文字は、手元のフォントで描かれるので、SVGが指定したフォントがないと、別のフォントで出ます。SVGの中にこれらが見つかったときは、画面に「読み込みません」と知らせます。
背景は、透明か、選んだ色。透明にできるのは PNG と WebP で、JPEG は透明を持てないので、透明を選んでも白になります。JPEG と WebP は、画質を50〜100で選べます。変換は、ブラウザの中だけで行い、SVGの内容はどこにも送られません。
よくある質問
- SVGの文字が、元のデザインと違うフォントで出ます。
- ブラウザが、SVGの中から外部のフォントを取りに行かないためです。手元にないフォントの文字は、代わりのフォントで描かれます。確実に同じ形にしたいときは、元のデザインツールで、文字を「アウトライン化」（図形に変換）してから書き出してください。
- 「大きさを決められません」と出ました。
- 根元の svg タグに width・height も viewBox もない（または % 指定だけの）SVGは、画像にしたときの縦横比が分かりません。画面の指示のとおり、幅と高さを入れてください。SVGの中身が、入れた大きさより大きいと、はみ出した部分は切れます。
- 外部の画像を参照しているSVGで、画像が出ません。
- この道具は、安全のためSVGから外部のURLを取得しません。参照先の画像をSVGの中に埋め込んで（data URI にして）から変換してください。
- WebP で保存できないときは？
- ブラウザによっては WebP の書き出しに対応しておらず、PNG で保存されることがあります。そのときは保存後の表示で、実際の形式をお知らせします。