使い方
- SVGの入力元でSVGファイルか貼り付けたSVGのコードを選びます。ファイルの場合はファイルを選択を押すか、ボックスにドロップします。
- 大きさを決めます。拡大率は図の本来の大きさに掛けられ、幅(px)を指定すると、その幅の画像になります。
- 背景を選びます。透明を選ぶと、PNG、WebP、AVIFで透けた部分が残ります。色を選ぶと、その色で塗られます。
- 出力形式を選び、図を変換するを押します。複数のファイルは、1つのZIPにまとめられます。
大きさと鮮明さ
SVGは図形で描かれた図なので、どの大きさでも鮮明なままです。拡大率は、図に書かれた幅と高さに掛けられます。それらがない場合は、viewBoxに掛けられます。4倍の拡大率の画像は、縦と横でそれぞれ4倍の画素になり、全体では16倍になります。
リンクとスクリプト
図は、ブラウザの画像要素を通して表示されます。SVGの中のスクリプトは動かず、フォントやアドレスで指定された画像などのほかのファイルへのリンクは読み込まれません。そのため、文字が代わりのフォントで描かれることがあります。特定のフォントが必要な場合は、SVGを作ったソフトで文字をアウトラインに変換してください。
透明部分と形式
PNG、WebP、AVIFは透明な部分を保ちます。JPEGには透明部分がないため、色を選ばない限り背景は白になります。長辺は最大8192ピクセルに制限され、ブラウザで扱えないほど大きな画像は小さくされます。
例:64×64のアイコンを4倍に
幅と高さが64のSVGアイコンは、拡大率4で256×256ピクセルになります。代わりに幅1024を選ぶと、同じアイコンは1024×1024ピクセルになります。ブラウザがその大きさで図形を描き直すため、鮮明なままです。
よくある質問
SVGはサーバーにアップロードされますか?
いいえ。ファイルか貼り付けたコードは、ブラウザの中で読み取られて描かれ、PNG、JPEG、WebP、AVIFのファイルはお使いの端末の中で作られます。ページを読み込んだ後でインターネット接続を切り、図を変換してみると、確認できます。
画像の中で、フォントが違って見えるのはなぜですか?
図が、画像から届かないフォントを指定している場合、ブラウザは代わりのフォントを使います。アドレスで指定されたフォントは読み込まれないため、SVGを作ったソフトで文字をアウトラインに変換してください。
SVGの中のリンク先の画像が表示されないのはなぜですか?
安全のため、画像として表示される図はほかのファイルを読み込みません。そのため、アドレスで指定された画像は除かれます。画像をSVGの中にデータURI(data:)として埋め込むか、先に変換してください。
画像が思ったより小さいのはなぜですか?
拡大率も幅も選ばない場合、画像は図の本来の大きさになります。幅と高さがない図はviewBoxの大きさを使い、どちらもない図は512ピクセルの正方形として扱われます。
どの出力形式を選べばよいですか?
PNGは劣化がなく透明部分を保つため、アイコンやロゴに向いています。JPEGは写真では小さくなりますが、透明部分はありません。WebPとAVIFはさらに小さくなりますが、ブラウザが保存に対応している場合に限ります。
複数のSVGファイルをまとめて変換できますか?
はい。最大30ファイルまで選び、まとめて変換できます。各ファイルは、新しい拡張子を付けた元の名前を保ち、すべて1つのZIPファイルでダウンロードできます。
出典
- MDN(英語):HTMLCanvasElement.toBlob()、画像がどのように書き出されるか
- W3C(英語):SVG 2、Scalable Vector Graphics仕様
- MDN(英語):SVGのviewBox属性
数値と文章の最終確認日:2026年11月10日火曜日。