SVGをPNGに変換

SVGをPNGに変換し、Webフォント、図の文字、リンク画像もブラウザーでの表示どおりに保ちます。倍率またはピクセル数を指定して、PNG、JPG、WebP、レイヤー分けしたPSDで保存できます。無料です。

SVG → PNG無料・ブラウザで動作

·手元にSVGがない場合は

変換はお使いのデバイス上で行われ、ファイルが当社のサーバーにアップロードされることはありません。SVG内のWebフォントやリンク画像は、ファイルを正しく表示するために、ブラウザーがそれぞれのサーバーからダウンロードします。

  • 無料でSVGからPNGへ、登録不要・ウォーターマークなし
  • お使いのデバイス上で変換
  • PNG、JPG、WebP、レイヤー分けしたPSD
  • 最大50ファイル、ZIPでダウンロード

SVGをPNGに変換した例

このページのために描き下ろした5つのSVGファイルを、各カードの設定でここで変換しました。例を読み込むと、その設定が変換ツールに反映されます。

A5ポスターSVG → PNG

A5ポスター

1,748 × 2,480 px · PNG · 300 DPI

ミリ単位のサイズを、印刷用に300DPIで保存。

フローチャートSVG → PNG

フローチャート

1,440 × 880 px · PNG · 2×

foreignObject内のdraw.io形式のラベルも位置どおりに。

夕焼けのイラストSVG → JPG

夕焼けのイラスト

1,600 × 1,600 px · JPG · 2×

グラデーション、フィルター、CSSクラスをそのまま保ち、指定色の背景でJPGに。

線画アイコンセットSVG → PNG

線画アイコンセット

6ファイル · 192 × 192 px · PNG · 8× · ZIP

各アイコンをviewBoxからサイズ決定し、6個まとめて1つのZIPに。

ブランドロゴタイプSVG → PNG

ブランドロゴタイプ

2,800 × 880 px · PNG · 4×

Googleフォントも正しく描画され、4倍の透過PNGに。

3ステップでSVGをPNGに変換する方法

ファイルを追加し、サイズを決めてダウンロードするだけでSVGをPNGに変換できます。

  1. .svgまたは.svgzファイルを最大50個（各20MBまで）ドロップ、選択、貼り付けするか、SVGコードを貼り付けます。ページ上のどこに貼り付けてもかまいません。

  2. 初期値は2倍です。1倍、4倍、8倍、またはピクセル数も指定できます。PNG、JPG、レイヤー分けしたPSD、対応ブラウザーではWebPで保存できます。

  3. 1ファイルずつ、またはまとめてZIPで保存できます。ファイルごとにメモとクイック修正が表示され、設定を変えると完成ファイルがすぐに再描画されます。

今すぐ試す

このSVGからPNGへの変換ツールの強み

ロゴ、アイコン、図、印刷物に役立つ、この無料変換ツールの6つの強み。

  1. ブラウザーの表示そのまま

    ブラウザーの表示そのまま

    ブラウザー自身のSVGエンジンで各ファイルを描画するため、CSSスタイル、グラデーション、フィルター、クリップパスがデザインどおりに出力されます。この夕焼けのイラストも、グラデーション、やわらかな光、CSSクラスを保ったまま、温かみのあるクリーム色の背景でJPGとして保存しました。

  2. Webフォントとリンク画像も埋め込み

    Webフォントとリンク画像も埋め込み

    Google FontsなどのWebフォントを描画前にダウンロードして埋め込むので、ロゴタイプの字形がすべて保たれます。リンク画像も取得して埋め込み、各ファイルに使用したフォントと画像が一覧表示されます。この植物モチーフのロゴタイプは、4倍の透過PNGになりました。

  3. 図のラベルをすべて保持、小さなミスも修復

    図のラベルをすべて保持、小さなミスも修復

    draw.ioの図は、foreignObject内のHTMLラベルも含めてすべてのラベルを保持します。xmlnsの欠落やコード前後の余分なテキストといった小さなミスは自動で修復され、変更内容がメモに表示されるので、フローチャートも描いたとおりに読めます。

  4. 画面にも印刷にも正確なサイズ

    画面にも印刷にも正確なサイズ

    1倍、2倍、4倍、8倍から選ぶか、必要なピクセル数を入力すると、ダウンロード前に出力サイズが表示されます。ミリ、インチ、ポイントは1インチ＝96ピクセルで換算されるため、A5の夜市ポスターは300DPI印刷用に1,748 × 2,480pxで出力されました。

  5. グループからレイヤー分けしたPSDを作成

    グループからレイヤー分けしたPSDを作成

    PSDを選ぶと、最上位の各グループがそれぞれPhotoshopのレイヤーになり、idまたはラベルの名前が付きます。指定した背景色も独立したレイヤーになります。このドライブ旅行のシーンは、空、太陽、メサ、道路、車、サボテンが別々のレイヤーで開きます。

  6. 一括変換、ZIP、印刷用DPI

    一括変換、ZIP、印刷用DPI

    最大50個のSVGファイルを一度に変換して1つのZIPで保存でき、viewBoxしかないアイコンはそこからサイズを決めます。PNGとJPGは96DPIで、印刷用に72、150、300DPIも選べます。JPGとWebPは4段階の画質に対応。ここにある6つの線画アイコンは、8倍で1つのZIPにまとめました。

SVGをPNGに変換するガイド：サイズ、フォント、形式、DPI

仕組みと、くっきり仕上げるコツ。

SVGはPNGより高画質？

どちらが優れているというより、仕組みが違います。SVGは図形を描画命令として保存するので、どのサイズでもくっきりしたままです。PNGは固定されたピクセルの格子を保存しますが、スライド、文書、チャットアプリ、アップロードフォームなど、どこでも開けます。PNGは可逆圧縮で透過も保つため、十分な大きさのPNGなら見た目の劣化はありません。

SVGを高解像度でPNGに変換する方法

SVGには決まったピクセルサイズがありません。変換ツールはwidthとheightを読み取り、mm、cm、in、ptを1インチ＝96ピクセルで換算するか、viewBoxを使います。初期値の2倍ならRetinaディスプレイでも文字がくっきり。さらに大きくするには4倍、8倍、またはピクセル数を指定します。図形は新しいサイズで描き直されるので、輪郭はシャープなままです。width、height、viewBoxのないファイルは標準の300 × 150で描画され、メモにサイズの設定方法が表示されます。

SVGの文字をPNGに変換する方法

パソコンにインストール済みのフォントはそのまま使えます。@importで読み込むGoogle FontsなどのWebフォントは、先にダウンロードして埋め込むので、字形が保たれます。中国語フォントのように多数のパーツに分割されたフォントは、テキストで使う部分だけをダウンロードします。各ファイルの下のメモには、使用したすべてのフォント名が表示されます。プライベートサーバー上のフォントは、SVGを書き出す前に文字をアウトライン化すれば、すべての文字が正確に保たれます。

図、リンク画像、CSS

draw.ioはラベルをforeignObject（SVG内のHTML）に入れますが、ブラウザーで描画するので、どのラベルも位置どおりに残ります。リンク画像は先にダウンロードして埋め込み、メモにはファイルが使用した各画像が一覧表示されます。パソコン上でSVGと同じ場所に保存した画像は、ファイルに埋め込むかWebアドレスでリンクしてください。httpのアドレスはhttpsに変えれば、どの安全なページでも画像が読み込まれます。

透過PNG、JPG、WebP、PSDとDPI

PNGは透過を保ち、初期設定の形式です。JPGは背景を白または指定した色で塗りつぶします。WebPはブラウザーが保存に対応している場合に選べ、ファイルサイズが小さく透過も保てます。PSDは最上位の各グループをレイヤーにします。DPIはピクセルを増やすものではなく、印刷サイズを決めるものです。A5（幅148mm）を300DPIで印刷するなら、1748ピクセルにします。8〜64pxの余白を付けると、絵の周りにスペースができます。

SVGファイルの変換が役立つ場面

SVGからPNGへの変換がよく使われる作業。

  • サイトや資料のロゴ

    Webサイト、スライド、メール用に2倍の透過PNGロゴを。

  • アプリ・Webのアイコン

    アイコンセットをまとめて一括変換し、ZIPに。viewBoxしかないアイコンもそこからサイズを決めます。

  • 資料に載せる図

    draw.ioの図をラベルもすべてそのまま、Wikiやレポートに。

  • 印刷とPhotoshop

    300DPIのポスター、または編集を続けられるレイヤー分けしたPSDに。

SVGをPNGに変換：よくある質問

無料での利用、透過、解像度、フォント、一括変換、プライバシー、サイズ、PSDについて。

今すぐSVGをPNGに変換

SVGファイルをドロップし、サイズを選んでダウンロード。無料で、お使いのデバイス上で変換します。

今すぐ試す