ブランドのロゴタイプ
@font-face でリンクした 2 つの Web フォントを描画前にダウンロードして埋め込み、4× の透過 PNG として保存します。
無料 · ブラウザで完結
SVG→PNG 変換ツール
SVG を PNG に高画質で変換できます。SVG ファイルでも貼り付けたコードでも、くっきりした PNG、JPG、WebP、レイヤー付き PSD に、一度に最大 50 個まで。サイズは 1×〜8×、ピクセル指定、印刷用 DPI から選べ、Web フォントやリンクされた画像は先に埋め込まれます。ワンクリックでファビコンとアプリアイコン一式も作成。アップロードは一切ありません。
手元に SVG がなければ、サンプルで試せます：
変換はお使いの端末上で行われ、ファイルが当社のサーバーにアップロードされることはありません。SVG 内でリンクされた Web フォントや画像は、埋め込みのためにブラウザがそれぞれのサーバーから直接ダウンロードします。
作例
SVG を PNG に変換した作例
Web フォント、リンクされた写真、HTML のラベル、ミリ単位のサイズ、viewBox だけのアイコンなど、多くの変換ツールがつまずく要素を含む 6 つのオリジナルファイルです。どれも対応する設定で変換ツールに読み込まれます。
線画アイコンセット
viewBox だけを持つ 6 つのアイコンを、16〜256 px のサイズごとのフォルダに書き出します。
陽だまりのポストカード
リンクされた写真、グラデーション、ドロップシャドウのフィルター、パスに沿ったテキスト、CSS クラスを含む SVG を、白背景の JPG で保存します。
フローチャート
draw.io 形式の HTML で書かれたラベル（foreignObject）が、太字や改行も含めてそのまま残ります。
A5 のイベントポスター
ミリ単位でサイズ指定された SVG です。印刷サイズ 300 DPI でちょうど 1,748 × 2,480 px になり、DPI は PNG に保存されます。
アプリアイコン
正方形の SVG 1 つから、favicon.ico、PNG のファビコン、Apple・Android 用アイコン、Web マニフェストを作成します。
3 ステップ
SVG を PNG に変換する方法
ファイルを追加し、サイズを選んでダウンロード。すべてこのブラウザのタブ内で完結します。
01 SVG ファイルを追加
.svg / .svgz ファイルを最大 50 個（各 20 MB まで）ドロップ・選択・貼り付けするか、SVG コードを貼り付けるか、リンクから SVG を読み込みます。
02 サイズと形式を選ぶ
1×〜8× の倍率、ピクセル指定、DPI を指定した印刷サイズから選びます。PNG、JPG、WebP、レイヤー付き PSD で保存するか、アイコンセットやファビコン一式に切り替えます。
03 ダウンロード
1 ファイルずつ、またはすべてを 1 つの ZIP で保存します。埋め込めなかったフォントや画像は、該当するファイルに名前が表示されます。
この変換ツールを選ぶ理由
この SVG→PNG 変換ツールが選ばれる理由
多くの変換ツールでは、文字が消えたり、リンクした写真が壊れた画像になったり、サイズが勝手に縮小されたりします。
ブラウザ自身のレンダラーで描画
CSS、グラデーション、フィルター、マスク、HTML のラベルを、Web 上で SVG を表示しているのと同じ SVG エンジンで描画します。
フォントと画像を埋め込み
@font-face、Google Fonts の @import、リンクされた画像を先にダウンロードして埋め込みます。フォントはテキストで使っている文字だけをサブセット化。失敗したものは名前を表示します。
壊れた SVG コードを修復
xmlns の欠落、 などの HTML 実体参照、重複した属性や引用符のない属性、閉じていないタグを修正するので、真っ白な画像になりません。
スクリプトは実行されない
スクリプト、イベントハンドラー、安全でない HTML は削除され、ファイルはそもそもスクリプトが動かない画像として描画されます。
サイズをごまかさない
ダウンロード前に出力サイズとファイルサイズを表示し、知らないうちに縮小することはありません。
ファビコン、アイコンセット、PSD
ワンクリックでファビコンとアプリアイコン一式、すべてのアイコンを全サイズでフォルダ分けしたセット、またはレイヤー付き PSD を作成できます。
仕上がりの目安
正確に描画されるもの・異なる場合があるもの
各ファイルはお使いのブラウザが描画し、含められなかったものは変換ツールが一覧で表示します。
正確に描画されるもの
- パス、図形、線、マーカー、グラデーション、パターン、マスク、クリッピングパス。
- <style> ブロックやクラスの CSS、不透明度、描画モード。
- ぼかしやドロップシャドウなどの SVG フィルター。
- 端末にインストールされたフォント、または変換ツールが埋め込めた Web フォントのテキスト。
- ほかのサイトからの読み込みを許可しているサーバー上のリンク画像と、データ URL として埋め込み済みの画像。
- draw.io が書き出す foreignObject 内の HTML ラベル（安全でない HTML を削除したうえで描画）。
異なる場合があるもの
- インストールされておらず、ダウンロードもできないフォントは別のフォントで代替され、そのファイルの注意事項に名前が表示されます。
- ほかのサイトからの読み込みをブロック（CORS）しているサーバー上の画像やフォントは省かれ、一覧に表示されます。
- logo.png のような相対リンクは、端末上のファイルからは参照できません。リンクから SVG を読み込むか、埋め込んでください。
- アニメーション SVG は最初のフレームになります。スクリプトは削除され、実行されることはありません。
- ほかの SVG ファイルを参照する <use> や、外部スタイルシートは読み込まれません。
- 一部のフィルターや描画モードは、Chrome、Firefox、Safari で見た目が少し異なります。Safari では HTML ラベルがプレーンテキストの代替表示で書き出されることがあります。
どの環境でもまったく同じ見た目にしたい文字は、SVG を書き出す前にデザインアプリでアウトライン化しておきましょう。
サイズと DPI
SVG→PNG 変換のサイズと DPI ガイド
SVG には決まったピクセルサイズがありません。変換ツールは width と height を読み取って、mm、cm、in、pt を 1 インチ 96 ピクセルでピクセルに換算するか、viewBox を使い、選んだサイズで図形を描き直します。小さなビットマップを引き伸ばすことはありません。
画面用のサイズ
| 設定 | 向いている用途 |
|---|---|
| 1× | SVG 本来のサイズ。画像サイズがすでに指定されているページ向け。 |
| 2× | 初期設定。Retina やほとんどのスマホ画面でくっきり表示されます。 |
| 3× – 4× | スライド、SNS の投稿、拡大して見られる資料に。 |
| 8× | 大判の印刷や、あとでトリミングするアートワークに。 |
| ピクセル指定 | SNS 投稿用の 1080 px など、決まった幅や高さが必要なときに。両方入力すると枠内に収まります。 |
印刷サイズのピクセル数
| 用紙 | 150 DPI | 300 DPI |
|---|---|---|
| A4（210 × 297 mm） | 1,240 × 1,754 | 2,480 × 3,508 |
| A5（148 × 210 mm） | 874 × 1,240 | 1,748 × 2,480 |
| US レター（8.5 × 11 in） | 1,275 × 1,650 | 2,550 × 3,300 |
| 写真（4 × 6 in） | 600 × 900 | 1,200 × 1,800 |
DPI だけではピクセル数は増えません。印刷・レイアウトアプリに、どの大きさで印刷するかを伝える情報です。PNG では pHYs チャンク、JPG では JFIF ヘッダーに保存されますが、WebP には標準の保存場所がありません。「印刷サイズ」ではピクセル数の計算にも DPI を使うので、A5 として描かれた SVG は上の表のとおりのサイズで出力されます。
ファビコンとアプリアイコン
ファビコンとアプリアイコン一式をワンクリックで
ロゴやアイコンの SVG を追加して「ファビコン一式」に切り替えれば、Web サイトや Web アプリに必要なものを 1 つの ZIP でダウンロードできます：
- 16、32、48 px の画像を含む favicon.ico と、各サイズの PNG ファビコン
- タイルの色を背景にした 180 px の apple-touch-icon.png
- 192 px と 512 px の Android アイコンと、セーフゾーンの余白付きマスカブルアイコン
- 整理済みの favicon.svg と、アプリ名とテーマカラー入りの site.webmanifest
- ページの <head> に貼り付ける HTML タグ
アイコンセットが丸ごと必要なら、「アイコンセット」モードですべての SVG を、16〜1024 px からチェックしたサイズで、サイズごとのフォルダに書き出せます。
活用例
SVG ファイルを変換する主な用途
アプリ・Web のアイコン
16〜1024 px のアイコンセットをサイズごとのフォルダで、または ICO・Apple・Android アイコン入りのファビコン一式を。
スライドや資料
PowerPoint、Keynote、Google ドキュメント、Word はどれも PNG に対応。ロゴを 2× や 3× にすれば、プロジェクターでもくっきり映ります。
SNS 投稿やチャット
ほとんどの SNS やチャットアプリは SVG のアップロードに対応していません。正確なピクセルサイズで PNG、JPG、WebP に保存しましょう。
印刷と Photoshop
DPI を指定して印刷用のサイズにし、DPI をファイルに保存。または最上位グループごとに 1 レイヤーの PSD を作成できます。
SVG→PNG 変換のよくある質問
SVG を PNG に無料で変換するにはどうすればいいですか？
このページ上部の変換ツールに SVG ファイルをドロップし、サイズと形式を選んでダウンロードするだけです。変換はブラウザ内で行われるため、登録不要、透かしなし、クレジット不要で、無料で使えます。
SVG ファイルはどこかにアップロードされますか？
いいえ。ファイルはお使いの端末上で読み込まれ、描画されます。PNG に埋め込むため、SVG がリンクしている Web フォントと画像だけは、ブラウザがそれぞれのサーバーからダウンロードします。
SVG を高画質（高解像度）の PNG に変換するには？
2×、3×、4×、8× を選ぶか、ピクセル数を直接入力します。小さなビットマップを拡大するのではなく、そのサイズで図形を描き直すので、エッジはくっきりしたままです。パソコンでは 1 辺 16,384 px、約 100 メガピクセルまで（スマホでは約 16 メガピクセルまで）対応しています。それを超える場合はお知らせし、勝手に縮小することはありません。
PNG の文字が別のフォントになってしまうのはなぜですか？
SVG はフォント名を指定しているだけです。そのフォントが端末にインストールされておらず、Google Fonts のようにダウンロードを許可しているサーバーへのリンクも SVG にない場合、ブラウザは別のフォントで代替します。変換ツールは、足りないフォントの名前をそのファイルに表示します。Web フォントをリンクするか、文字をアウトライン化すれば解決します。
複数の SVG ファイルを一括で変換できますか？
はい。各 20 MB までの .svg / .svgz ファイルを最大 50 個追加し、1 つの ZIP でダウンロードできます。「アイコンセット」モードなら、すべてのファイルを複数のサイズで、サイズごとのフォルダに書き出せます。
SVG からファビコンを作るには？
SVG を追加して「ファビコン一式」を選び、ZIP をダウンロードします。中身は favicon.ico（16、32、48 px）、PNG のファビコン、180 px の Apple タッチアイコン、192 px と 512 px の Android アイコン、マスカブルアイコン、favicon.svg、site.webmanifest、ページ用の HTML タグです。
背景を透明のままにできますか？
はい。背景色を選ばない限り、PNG と WebP は透明のままです。JPG は透明部分を保存できないため、白または選んだ色になります。
DPI はいくつにすればいいですか？
画面表示用なら関係ないので、72 や 96 で問題ありません。印刷用なら「印刷サイズ」と 300 DPI を選んでください。変換ツールが SVG の実寸からピクセル数を計算し、PNG と JPG ファイルに DPI を保存します。
SVG をレイヤー付きの PSD に変換できますか？
はい。PSD を選ぶと、最上位の各グループや図形が、id またはラベルの名前を付けたピクセルレイヤーになり、全体の合成画像の上に重なります。テキストはピクセルになり、編集できる文字としては残りません。
出どころのわからない SVG ファイルを開いても安全ですか？
SVG ファイルにはスクリプトを含めることができます。この変換ツールは描画前にスクリプト、イベントハンドラー、安全でない HTML を削除し、そもそもスクリプトが動かない画像としてファイルを描画します。
SVG→PNG 変換ツール
今すぐ SVG を PNG に変換
SVG ファイルをドロップし、サイズを選んでダウンロード。無料で、変換は端末上で行われます。
SVG ファイルを選択