ぱんだツールズぱんだツールズ無料

SVG→PNG/JPG変換

SVGファイルをPNGまたはJPEG画像に変換

ぱんだツールズファイルはサーバーに送信されません

次のステップ

画像フォーマット変換(JPEG/PNG/WebP)

PNG・JPEG・WebPを相互変換。品質調整付き。

よくある質問

SVGとは何ですか?どんなファイルに対応していますか?

SVG(Scalable Vector Graphics)はXMLベースのベクター形式の画像フォーマットです。拡大・縮小しても画質が劣化しないのが特徴で、ロゴ・アイコン・イラストなどに広く使われています。本ツールは拡張子が .svg のファイルに対応しています。

変換後の画質はどうなりますか?

指定した出力サイズ(幅×高さ)のピクセル数で描画されます。SVGはベクター形式のため、どんな大きなサイズを指定しても輪郭がくっきり維持されます。JPEGの場合は品質スライダーで1〜100%の範囲で調整でき、高く設定するほどファイルサイズは大きくなりますが画質は向上します。

どんなサイズで出力できますか?

SVGファイルのviewBoxまたはwidth/height属性から寸法を自動検出し、デフォルト値として設定します。幅・高さは1〜4096pxの範囲で自由に変更でき、アスペクト比ロックをオンにすると幅か高さの一方を変えると自動的に比率を保ちながら調整されます。

ファイルはサーバーに送信されますか?

いいえ、すべての処理はブラウザ内のCanvas APIで完結します。SVGファイルが外部のサーバーに送信されることは一切ありません。プライベートなデザインデータも安心してご利用いただけます。

SVGに外部フォントや外部リソースが含まれている場合は変換できますか?

ローカルファイルの場合、外部リソース(Webフォント・外部画像など)はブラウザのセキュリティポリシーにより読み込まれないことがあります。その場合、フォントはブラウザのデフォルトフォントで代替されたり、外部画像部分が空白になる可能性があります。SVGファイル内にリソースをインライン化(Base64埋め込みなど)しておくと安定して変換できます。

PNGとJPEGどちらを選べばいいですか?

透明背景(透過)が必要な場合はPNGを選んでください。PNGは可逆圧縮のため画質が劣化せず、ロゴやアイコンに適しています。JPEGは非可逆圧縮で透過には対応していませんが、写真のような複雑なグラデーションを含む画像ではファイルサイズを大幅に削減できます。SNS投稿用の背景なし画像はPNG、Webのバナー画像などはJPEGが一般的です。

SVGを使う理由・メリットは何ですか?

SVGはベクター形式のため解像度に依存せず、4Kディスプレイや印刷でも常に鮮明に表示されます。また、ファイルサイズが小さくXMLテキストで編集できるため、Webアイコンやロゴに最適です。一方でPNGやJPEGなどのラスター形式に変換することで、SVGに対応していないアプリやサービスでも利用できるようになります。

変換できないSVGはありますか?

SVGの仕様上、外部スタイルシート(CSSファイル)を参照しているケース、JavaScriptによるアニメーションが含まれるケース、ブラウザが対応していないSVGフィルターや機能を使用しているケースでは、変換結果が意図と異なる場合があります。また、<use>要素で外部ファイルを参照しているSVGはセキュリティ制限により読み込まれないことがあります。

画像ツール一覧

すべて見る

このツールについて

使い方

  1. SVGファイルをドロップゾーンにドラッグ&ドロップ(またはクリックして選択)
  2. 出力サイズ(幅・高さ)を確認・変更する(SVGの元サイズが自動検出されます)
  3. 出力フォーマット(PNG または JPEG)を選択
  4. JPEGの場合は品質スライダーで圧縮率を調整(デフォルト: 92%)
  5. 「変換する」ボタンをクリックし、変換後の画像をプレビューしてダウンロード

このツールの特徴

  • 追加ライブラリ不要:ブラウザ標準のCanvas APIだけで変換するため、外部ライブラリのインストールや読み込みが不要です
  • サイズを自由に指定:SVGの元サイズを自動検出しつつ、出力サイズを1〜4096pxの範囲で自由に変更できます
  • アスペクト比ロック:比率を固定したまま拡大・縮小できるため、縦横比が崩れません
  • 変換前後をその場でプレビュー:ダウンロード前に変換結果を確認できます
  • 完全プライベート処理:SVGファイルはサーバーに送信されないため、機密性の高いデザインデータも安心して変換できます

こんなときに便利

  • IllustratorやFigmaでエクスポートしたSVGロゴをSNS投稿用のPNGに変換したい
  • SVGに対応していないWordやPowerPointにSVGアイコンを貼り付けたい(PNG変換してから挿入)
  • Webサイト用のOGP画像・サムネイル画像をSVGから高解像度PNGとして書き出したい
  • 変換後にファイルサイズをさらに圧縮したい場合は 画像圧縮ツール もご利用ください
  • PNG/JPEG以外のWebP形式に変換したい場合は WebP変換ツール が便利です

技術的背景:SVGとラスター画像の違い、Canvas APIの仕組み

SVG(Scalable Vector Graphics)はXMLで記述されるベクター形式の画像フォーマットです。直線・曲線・テキストなどを数式(座標データ)で表現するため、どんなサイズに拡大・縮小しても輪郭が劣化しません。一方、PNG・JPEGのような「ラスター形式」はピクセルの集合で画像を表現するため、拡大すると画質が粗くなる(ジャギーが発生する)という特性があります。

本ツールではブラウザ標準の Canvas API を使って変換を行います。具体的には、SVGファイルをBlobオブジェクトとしてメモリに展開し、URL.createObjectURL() でURLを生成して Image 要素に読み込みます。読み込まれた画像データを指定サイズのCanvas上に描画し、canvas.toBlob() でPNGまたはJPEGとしてエンコードします。JPEG変換時には透過部分が白背景で塗りつぶされます。変換が完了したBlobはメモリ上に保持され、ダウンロード時に URL.createObjectURL() でダウンロード用URLを生成します。使用後は URL.revokeObjectURL() でメモリを解放するためメモリリークの心配もありません。

SVGはベクターの特性上、どんな大きな出力サイズを指定しても鮮明な変換結果が得られるのが、ラスター→ラスター変換との大きな違いです。ただし、外部Webフォントや外部画像を参照しているSVGは、ブラウザのセキュリティポリシー(CORS)により外部リソースの読み込みがブロックされる場合があります。その場合は、SVGファイル内にリソースをBase64でインライン化するか、同一ドメインに配置する必要があります。