本文へスキップ
にゃんこツール

SVG→PNG変換(高解像度・透過対応)

SVGファイルを読み込むかSVGコードを貼り付けて、PNG画像に変換します。倍率を上げれば高解像度のPNGも作れ、背景は透過のままでも、白や好きな色でも塗れます。ブラウザ内で処理され、アップロードはされません。SVGを軽量化したいときは SVG最適化 もご利用ください。

🔒 ブラウザ内で完結・入力データはサーバーに送信されません

ここにSVGファイルをドラッグ&ドロップするか、ボタンから選択してください。

プレビュー

使い方

  1. SVGファイルを枠内にドラッグ&ドロップするか、「SVGコードを貼り付け」欄にコードを貼り付けます。
  2. 「出力サイズ(倍率)」と「背景」を選びます。「色を指定」を選ぶと背景色を決められます。
  3. プレビューで仕上がりを確認します。
  4. 「PNG画像をダウンロード」ボタンで保存します。

注意事項

  • SVGはブラウザの画像読み込みで描画するため、外部の画像・フォント・CSSを参照しているSVGは、それらが読み込まれず表示が崩れることがあります。画像は data URI で埋め込んでください。
  • foreignObject(HTMLの埋め込み)を含むSVGは、ブラウザによってはPNGに書き出せません。
  • 出力サイズは1辺8192px・総画素数1,600万までです。大きなSVGに高い倍率を指定するとエラーになります。
  • テキストは、お使いの端末にあるフォントで描画されます。特殊なフォントを使うSVGは、事前にテキストを図形(パス)に変換しておくと見た目が崩れません。

用語解説

SVG

図形や文字を数式(ベクター)で表す画像形式です。拡大しても粗くならず、ロゴやアイコンによく使われます。

PNG

色数を落とさずに保存できるラスター画像(ピクセルの集まり)の形式です。背景の透過に対応しています。

viewBox

SVGの描画領域の座標と大きさを指定する属性です。width・heightを省略しても、viewBoxがあれば元の大きさや縦横比を判定できます。

よくある質問

PNGの解像度(大きさ)はどう決まりますか?

SVGのwidth・height(なければviewBox)を元のサイズとし、選んだ倍率をかけた大きさで出力します。SVGはベクター形式なので、4倍にしても粗くならずにくっきり書き出せます。

背景を透明のままPNGにできますか?

できます。背景で「透過」を選べば、SVGの塗りがない部分は透明のまま書き出されます。白や好きな色で塗りつぶしたい場合は「白」または「色を指定」を選んでください。

文字やフォントが崩れるのはなぜですか?

SVG内のテキストは、お使いの端末にインストールされているフォントで描画されます。Webフォントや特殊なフォントを指定していると別のフォントに置き換わるため、事前にテキストをパス(図形)に変換しておくと確実です。

SVGコードを貼り付けたのにエラーになります。

コードが「<svg」で始まっているか、width・heightまたはviewBoxがあるかを確認してください。タグの閉じ忘れなど構文の誤りがあると画像として読み込めません。

SVGのファイルはサーバーにアップロードされますか?

されません。変換はすべてブラウザ内で行われ、SVGの内容が外部に送信されることはありません。

このページをシェア

↑↓ 選択 Enter 開く Esc 閉じる