SVG→PNG変換
SVGファイルやソースをCanvas経由でPNGに変換します。出力サイズをpxで指定でき、背景は透明のまま書き出します。読み込みも変換も端末内で完結します。
SVGファイルをドラッグ＆ドロップ
またはクリックしてSVGファイルを選ぶ・下の欄にソースを貼り付けてもOK
SVG→PNG変換の使い方
SVGのソースを貼り付けるかファイルを選び、出力サイズ（px）を指定するとプレビューに描画され、PNGとして保存できます。ソース・幅・高さを変えるたびに即座に再描画されます。読み込みも変換も端末内で完結します。
- SVGを入力します。ソースをテキスト欄に貼り付けるか、「SVGファイルを選ぶ」で読み込みます。初めての方は「サンプルSVG」で試せます。
- 出力サイズ（幅・高さ）をpxで指定します。
- プレビューを確認し、PNG保存を押してダウンロードします。
具体例
- アイコンSVG → 幅512・高さ512を指定して
converted.png（512×512）として書き出す - ロゴSVG → 1024×1024で高解像度のPNGを作り、印刷やOG画像に使う
- サンプルSVG（赤い円）→ クリックでソースが入り、即プレビュー＆保存できる
- viewBox付きの小さなSVG（
0 0 100 100）→ 任意の大きさに拡大してもベクターなのでぼやけない - 横長のSVG → 幅と高さを別々に指定して任意のアスペクト比で書き出す
サイズ指定のルールと上限
幅・高さに入れた値が、そのままキャンバスの寸法（＝PNGのピクセル数）になります。SVGはベクターなので、元の viewBox より大きな値を指定しても線はぼやけません。ただし指定には次の制約があります。
- 1辺の上限は8000px。それを超える値を入れても、通知なしで8000pxとして描画されます（入力欄の数字は書き換わりません）。
- 幅×高さの上限は1600万px。4000×4000（1600万）は通りますが、8000×8000は超過してエラーになります。8000×2000のような細長い指定なら上限内です。
- 空欄や0は512として扱われます。サイズを消しただけでは0×0にはなりません。
- 縦横比は自動で合わせません。指定した幅と高さの箱に描くので、
viewBoxと違う比率を入れると引き伸ばされることがあります。比率を保ちたいときはviewBoxと同じ比の数値を入れてください。
| 用途 | 指定するサイズの目安 | 補足 |
|---|---|---|
| ファビコン | 48×48（または32×32） | 複数サイズをまとめたい場合はファビコン生成のほうが向く |
| スマホのホーム画面アイコン | 180×180 | 正方形のviewBoxで作る |
| アプリ・PWAアイコン | 512×512 | 余白を持たせたデザインが無難 |
| OG画像・SNSサムネイル | 1200×630 | viewBoxも同じ比率（40:21）に寄せる |
| 印刷（幅5cm・300dpi） | 591×任意 | 必要な画素数はDPI・印刷サイズ計算で確認できる |
変換できるSVG・できないSVG
このツールはSVGを画像として読み込んでからキャンバスに描く方式です。この経路ではSVGが「セキュアな静的モード」で描画されるため、次のものは無効になります。仕様上の制限で、外部通信をしない設計とも一致しています。
| SVGの内容 | 結果 | 対処 |
|---|---|---|
xmlns 属性がない | 解析エラー | 先頭を <svg xmlns="http://www.w3.org/2000/svg" ...> にする。HTMLからコピーすると欠けていることが多い |
閉じタグ漏れ・未エスケープの & | 解析エラー | XMLとして正しい形に直す |
| Webフォントの読み込み | 効かない（端末のフォントで代替、または描かれない） | テキストをパスへ変換（アウトライン化）してから貼る |
外部画像の参照（image の外部URL） | 描かれない | Base64のデータURIとしてSVG内に埋め込む（画像 ↔ Base64） |
| スクリプト・SMILアニメーション | 実行されない（静止した状態で描画） | アニメが必要ならアニメGIF生成など別の手段を使う |
圧縮された .svgz | 読めない | 展開して通常のSVGにする |
逆に言えば、外部を参照しない自己完結したSVGであれば確実に変換できます。ソース欄への貼り付け・ファイル選択・ドラッグ＆ドロップのいずれでも、幅・高さを変えるたびにその場で描き直します。
背景の透過と、白背景にしたいとき
描画前にキャンバスを消去してから描くため、SVGで塗っていない領域は透明のままPNGになります。ロゴやアイコンをそのまま重ねられる一方、白背景が前提の資料に貼ると背景が抜けて見えることがあります。白（や任意の色）を敷きたい場合は、SVGの側に最初の要素として矩形を置いてから変換してください。
<rect width="100%" height="100%" fill="#ffffff"/> を <svg> の直後に入れるのが手軽です。JPEGで書き出す機能はないため、透過を確実に潰したい場合もこの方法になります。
エラー表示の意味
| 表示 | 原因 |
|---|---|
| SVGソースを貼るかファイルを選んでください。 | ソース欄が空。ファイル選択後は自動でソース欄に流し込まれる |
| 出力サイズが大きすぎます。幅か高さを小さくしてください。 | 幅×高さが1600万pxを超えた |
| SVGを解析できません。 | xmlns の欠落やXMLの構文エラーで画像として読み込めなかった |
| PNGを作成できませんでした（サイズが大きすぎる可能性があります）。 | 指定は上限内でも、その端末のブラウザがPNGを書き出せなかった |