🖼 画像・メディア

SVG→PNG変換

SVGファイルやソースをCanvas経由でPNGに変換します。

SVGファイルをドラッグ＆ドロップ

またはクリックしてSVGファイルを選ぶ・下の欄にソースを貼り付けてもOK

SVG→PNG変換の使い方

SVGのソースを貼り付けるかファイルを選び、出力サイズ（px）を指定するとプレビューに描画され、PNGとして保存できます。ソース・幅・高さを変えるたびに即座に再描画されます。読み込みも変換も端末内で完結します。

  1. SVGを入力します。ソースをテキスト欄に貼り付けるか、「SVGファイルを選ぶ」で読み込みます。初めての方は「サンプルSVG」で試せます。
  2. 出力サイズ（幅・高さ）をpxで指定します。
  3. プレビューを確認し、PNG保存を押してダウンロードします。

具体例

  • アイコンSVG → 幅512・高さ512を指定して converted.png（512×512）として書き出す
  • ロゴSVG → 1024×1024で高解像度のPNGを作り、印刷やOG画像に使う
  • サンプルSVG（赤い円）→ クリックでソースが入り、即プレビュー＆保存できる
  • viewBox付きの小さなSVG（0 0 100 100）→ 任意の大きさに拡大してもベクターなのでぼやけない
  • 横長のSVG → 幅と高さを別々に指定して任意のアスペクト比で書き出す

慣れている方向け

  • ソースの貼り付けと幅・高さの変更はライブ反映。サイズ違いを素早く試せます。
  • SVGはベクターなので、表示サイズより大きい出力を指定しても鮮明なPNGになります。
  • 外部画像・Webフォントを参照しない自己完結したSVGが確実に変換できます。

よくある質問

入力したSVGはサーバーに送信されますか？
いいえ。読み込みもPNG変換もすべてお使いのブラウザ内で行われ、SVGが外部に送信・保存されることはありません。オフラインでも動作します。
外部SVG URLは使えますか？
いいえ。ファイル選択またはソース貼り付けのみ対応しています（外部通信なし）。URLで読み込みたい場合はSVGの中身をコピーしてソース欄に貼り付けてください。
出力サイズは自由に決められますか？
はい。幅・高さ（px）を指定して書き出します。SVGはベクター形式なので、元の表示サイズより大きな値を指定しても線がぼやけず鮮明なPNGになります。例: 512×512 や 1024×1024。
変換できないSVGはありますか？
外部画像やWebフォントを参照するSVGは、外部通信を行わないため正しく描画されないことがあります。viewBox付きの自己完結したSVGが確実です。解析できない場合はエラーを表示します。