SVG を PNG に変換
ファイルはお使いのデバイス上で変換されます。アップロードされることはありません。
またはここにドロップ、Ctrl+V／⌘V で貼り付け
.svg
- ファイルはデバイスの外に出ません
- 一括変換＋ZIP
- 登録不要・制限なし
この変換ツールはブラウザ内で動作するため、JavaScript が必要です。変換するには JavaScript を有効にしてください。手順は下で詳しく説明しています。
設定
ベクターのロゴやアイコンを、必要なスケールのくっきりした PNG に。背景は透明のままです。
SVG はコードで記述された図形で、どの大きさでも鮮明です。ただ、使えない場所はたくさんあります。SNS のプロフィール画像、スライド、メールの署名、アプリストア、通販サイト、多くの CMS のアップロード欄は PNG を求めます。このページは各 SVG をブラウザで描画し、透明な背景を保ったまま PNG で保存します。高精細ディスプレイや印刷用には 2倍か 4倍を選んでください。ベクターをその大きさで描画するので、引き伸ばしたようなぼやけは出ず、輪郭はくっきりしたままです。
SVG を PNG に変換する方法
- .svg ファイル（ロゴ、アイコン、図、イラスト）をドロップします。
- スケールを選びます。1倍は SVG に書かれた幅と高さ、2倍は最近の画面でくっきり見せるための 2 倍、4倍は印刷や大きなスライド向けです。
- 変換して PNG を保存するか、すべてを ZIP でダウンロードします。
画質・サイズ・メタデータはどうなるか
描画は最終的な画素サイズで 1 回だけ行うので、拡大によるぼやけはありません。64px のアイコンを 4倍にすれば、きれいな 256px の PNG になります。PNG は可逆形式なので、アンチエイリアスのかかったふちも透明な部分も正確に記録されます。
仕上がりの大きさは SVG が宣言しているサイズで決まり、viewBox しかない場合はそれを使います。ファイル容量はスケールとともに増え、2 倍にするごとにおよそ 4 倍になります。Web フォントで組まれた文字は、フォントが SVG に埋め込まれているか、アウトライン（パス）化されている場合にのみ正しく描画されます。
- テストファイル
- 30
- 平均入力サイズ
- 1 KB
- 平均出力サイズ
- 54 KB
- サイズの変化
- 50 倍に増加
- 1 ファイルあたりの時間
- 6 ms
SVG と PNG の違い
| 正式名称 | SVG | PNG |
|---|---|---|
| 正式名称 | Scalable Vector Graphics | Portable Network Graphics |
| 登場 | 2001 | 1996 |
| 策定 | W3C · SVG 1.1 / SVG 2 | W3C · ISO/IEC 15948 |
| 圧縮 | 可逆 | 可逆 |
| 透過 | あり | あり |
| アニメーション | あり | あり |
| 最大サイズ | — | 2,147,483,647 × 2,147,483,647 px |
| Chrome / Edge | 対応 | 対応 |
| Safari | 対応 | 対応 |
| Firefox | 対応 | 対応 |
| Windows | — | 対応 |
| iPhone / iPad | — | 対応 |
| Android | — | 対応 |
| 主な用途 | Web サイトのロゴ、アイコン、グラフ、イラスト。 | スクリーンショット、ロゴ、アイコン、図、透明な背景が必要な画像。 |
SVG SVG は W3C の形式で、図形を画素ではなく、XML で書かれた形、パス、文字として記述します。どの大きさでも鮮明で、ファイルもたいてい小さいのですが、写真を効率よく保持することはできず、多くのアプリやアップロードフォームは PNG のような画素の画像しか受け付けません。
PNG PNG は 1996 年に W3C が公開し、のちに ISO/IEC 15948 となった可逆の画像形式です。すべての画素を正確に保ち、完全な透過に対応しているので、スクリーンショット、ロゴ、文字に最適です。写真を PNG で保存すると、JPG の数倍の容量になるのが普通です。
このサイトを使わずに変換する
SVG はどのブラウザでも表示できます。タブで開いてスクリーンショットを撮れば 1 枚だけならすぐですが、解像度は画面のままで、背景もたいてい白になります。Inkscape のような無料のベクター編集ソフトなら、書き出しダイアログから好きなサイズの PNG を出力できます。Mac では Finder で SVG を選んでスペースキーを押すとクイックルックで中身を確認でき、変換前のチェックに便利です。透過を保ったまま複数を変換するなら、このページのほうが早く済みます。
トラブルシューティング
- 文字が別のフォントになる。 SVG が URL から読み込む Web フォントはここでは使えず、あなたのパソコンに入っているフォントも他人の環境にはありません。編集ソフトで文字をアウトライン化してください。
- SVG 内の画像が表示されない。 外部にリンクされた画像は、安全のため読み込みません。変換前に SVG へデータとして埋め込みます。
- PNG が小さすぎる。 SVG が小さな幅と高さを宣言しています。4倍を選ぶか、width と height の属性を書き換えてください。
- アニメーション。 CSS や SMIL のアニメーションは無視され、SVG の最初の状態が書き出されます。
よくある質問
SVG を背景透過の PNG にするには？
SVG をここにドロップして変換するだけで、背景は自動的に透明のままになります。PNG は透過に対応しており、こちらで塗りつぶしを加えることもありません。ただし、SVG 自体に背景として白い長方形が描かれている場合は、それも図形の一部なので表示されます。先にベクター編集ソフトで削除してください。
PNG はどのサイズになりますか？
1倍なら、SVG に書かれた幅と高さ（なければ viewBox）になります。2倍はその両方が 2 倍、4倍は 4 倍です。300×100 のロゴは 4倍で 1200×400 になります。アプリのアイコン用に 512px の枠に収めたいときなどは最大サイズを設定してください。最大サイズは縮小にのみ働きます。
PNG にすると SVG と見た目が変わるのはなぜ？
たいていはフォントかリンクされたファイルが原因です。SVG は外部のフォントや画像を取得できない隔離されたモードで描画するため、文字が標準フォントに置き換わったり、リンク先の画像が空白になったりします。編集ソフトで文字をアウトライン化し、画像を埋め込んでから、もう一度変換してください。
SVG をオンラインで変換しても安全ですか？
このページでは、SVG は端末から一度も出ません。あなたのブラウザが描画し、何もアップロードしません。さらに、SVG はページに埋め込むのではなく画像として描画するので、SVG 内のスクリプトは実行されません。公開前のクライアントのロゴや図面を扱うときに、この点は重要です。