SVG を PNG に変換

必要なサイズを選んで、くっきりした PNG を受け取れます。無料、登録不要、透かしなし。ファイルはブラウザから出ません。

SVG ファイルをここにドロップ、またはクリックして選択

複数まとめて可・1 ファイル最大 20 MB

100% ブラウザ内で完結
アップロード不要・登録不要
透過を保持
一括 + ZIP

ベクター画像には決まったピクセルサイズがありません。ここで選ぶサイズが、PNG の精細さを決めます。なぜ？

SVG を PNG に変換する理由

SVG のほうが優れた形式です — 受け取ってもらえない場所に出くわすまでは。メールクライアントは SVG を取り除きます。多くの SNS はプロフィール画像にもプレビュー画像にも受け付けません。アップロードフォーム、印刷サービス、EC の管理画面、そして少し古いソフトは、ピクセルしか理解しません。プレゼン資料や文書に埋め込んだときの挙動も読めません。これは SVG の欠陥ではなく、単に普及の度合いの差です。PNG はどこでも通ります。

つまり変換の理由はたいてい互換性であって、好みではありません。SVG をマスターとして保ち、必要になったときに、その用途が求めるサイズで PNG を書き出す — それだけです。

もうひとつの理由は、見た目を確定させることです。SVG は見る人の環境にあるフォントと描画エンジンで描かれるため、マシンによって微妙に変わり得ます。PNG はどこでも同じです。判断はすべて済んでいるからです。

そして逆方向と違い、こちらは素直な処理です。PNG から SVG へはファイルに存在しない形を推測する作業ですが、SVG から PNG は描くだけで、ブラウザは描くのが得意です。決めることは、どれだけ大きく描くかだけです。

「画質は落ちますか」は問いの立て方がずれています

SVG には自前のピクセルサイズがありません。変換時に「保つ」べきものは存在せず、あるのはあなたが選ぶサイズだけ。そして、すべてはその選択で決まります。

これはこの変換に関して最も多く検索される疑問のひとつで、そう考えるのももっともです。JPEG は保存のたびに少し代償を払うので、変換もそうだと思ってしまう。ベクターはそうではありません。

SVG は命令の集まりです — ここに円を描く、このパスをこの色で塗る。解像度という概念がありません。PNG に書き出すとき、ブラウザはあなたが指定したサイズでその命令を実行し、一から描き直します。4000 ピクセルを指定すれば 4000 ピクセルで描きます。元からピクセルデータが無いので、縮小も再圧縮も起きません。

この性質がどこまで通用するかを実測しました。100 ピクセルの元画像を拡大方向に描画すると、1000 ピクセルで約 20 ミリ秒、4000 ピクセルで約 4 分の 1 秒、8000 ピクセルで約 1 秒、16000 ピクセルで約 5 秒・4.5 MB。どの段階もきれいな描き直しで、引き伸ばしではありません。それ以上ではブラウザのキャンバスが音を上げるため、このツールは長辺を 16000 に制限しています。

ですから書き出した PNG がぼやけていたりギザギザだったりする場合、原因が変換の劣化であることはまずありません。置かれる場所に対してピクセル数が足りていないのです。64 ピクセルの PNG をスライドで幅 400 ピクセルに引き伸ばせば、どのツールで作っても見栄えは悪くなります。

これで問いの形が変わります。「どうすれば劣化を避けられるか」ではなく「ここには何ピクセル必要か」です。ファビコンなら 512。SNS のプレビューなら 1200 × 630。印刷所に出すロゴなら、先方が指定した数字。その数字さえ分かれば、変換自体は簡単な部分です。だからこのツールでは、サイズをメニューの奥ではなく一番手前に置いています。

ベクターは指定サイズで描き直され、ビットマップは引き伸ばされるだけです。

SVG を PNG に変換する手順

4 ステップ、すべてこのブラウザタブの中で完結します。何もアップロードされません。

SVG をドロップ

1 件でも、まとめてでも。各ファイルをこの端末上で読み取り、サイズ・ウェブ上のリソースへの参照の有無・そもそも書き出せるファイルかどうかを確認します。

元のサイズを確認

ファイルから読み取ったサイズと、それがどこから来たのか — width と height 属性か、viewBox か — を表示します。これは見た目以上に重要で、理由は次の項で説明します。

出力サイズを選ぶ

倍率、正確なピクセル値、あるいはプリセット（ファビコン 512、SNS 画像 1200 × 630、アプリアイコン 1024）から選べます。比率を保ちたいときは縦横比を固定。背景は透明か白を選べます。

変換してダウンロード

各ファイルを指定サイズで描画してお渡しします。複数件は ZIP にまとめます。アップロードしないので、サーバー上に控えは残らず、順番待ちもありません。

逆向きですか？手元にあるのが PNG でベクターが欲しい場合、それははるかに難しい問題です。取りかかる前に一読をおすすめします — PNG を SVG に変換するページで、できることとできないことを説明しています.

この変換ツールでできること

ブラウザの中で、指定したサイズちょうどの PNG に SVG を変換します。見返りは求めません。アカウント不要、メールアドレス不要、1 日の上限なし、透かしなし、順番待ちなし。

サイズは隠し設定ではなく主役の操作です。倍率、縦横比ロック付きの正確なピクセル指定、そして実際の用途に合わせたプリセット。このキーワードで上位に出るツールのうち 2 つには、サイズの選択肢が**まったくありません**。出てきたものを受け取るだけです。

初期値の出どころを明示します。ファイルから読み取ったサイズは、その出典とともに表示されます。SVG はサイズの宣言の仕方が統一されておらず、ブラウザが返す答えが欲しい答えとは限らないからです。

変換の後ではなく前にファイルを点検します。SVG がブラウザ内でつまずき方は 3 通りあり、いずれも事前に検出できます。書き出せなくなる HTML の埋め込み、ウェブから読み込むため描画されないフォントや画像、そしてファイル自体を読み込めなくする名前空間宣言の欠落。前の 2 つは説明し、3 つ目はその場で直します。

一括変換は標準機能で、実用上の上限はありません。複数ファイルを一度に、サイズ設定は一度だけ、最後に ZIP がひとつ。

透明は既定で保たれます。ベタ塗りが要る場面のために、白背景の選択肢もあります。

よく使われる場面：

指定ピクセルサイズのファビコンやアプリアイコン
ビットマップである必要がある SNS のプレビュー画像
SVG が取り除かれるメール署名やメールマガジン
PNG しか受け付けない EC の管理画面や印刷入稿
SVG の埋め込み挙動が読めないプレゼン資料や文書
どこでも同じに見える必要があるスクリーンショットやドキュメント用画像
高精細ディスプレイ向けの 2× / 3× アイコン書き出し

どの端末でも使えます

ブラウザ内で動くので、インストールするものはなく、プラットフォームによる違いもありません。

§ 01

Windows

Chrome、Edge、Firefox で動きます。インストール不要、後に残るものもありません。

§ 02

Mac

Safari、Chrome、Firefox で動きます。PNG は他のファイルと同じくダウンロードフォルダに入ります。

§ 03

iPhone と iPad

「ファイル」から SVG を選び、PNG を「ファイル」に保存。アプリは要りません。

§ 04

Android

どのファイルマネージャーからでも使えます。変換は端末上で行われ、サーバーでは行われません。

§ 05

Linux

Firefox でも Chromium でも動きます。ImageMagick が入っていないときに便利です。

§ 06

Chromebook

ブラウザ内でローカルに動きます — Chromebook では、そもそもそこ以外に動く場所がありません。

SVG がつまずきうる箇所

変換そのものは安定しています。不安定なのは SVG ファイルのほうで、書かれ方が大きく異なります。以下の 4 つは、ドロップされたファイルごとに毎回確認している項目です。結論は実ファイルを実ブラウザに通して測ったものです。

SVG の書き方は 3 通り、既定サイズも 3 通り — うち 2 つは画像と無関係な CSS の既定値です。

ケース	何が起きるか	このツールの挙動
ファイルに width と height がある	それを使う。必要なら cm・mm・pt・インチから換算	採用して出典を表示
viewBox だけで width と height がない	ブラウザは 150 × 150 と報告 — 画像とは無関係な CSS の既定値	代わりに viewBox を使う（作者の意図はそちら）
どちらも無い	ブラウザは 300 × 150 と報告し、中身を収めるための拡大縮小もしない	300 × 150 にフォールバックし、その旨を表示
ウェブから読み込むフォントや画像	取得されない — 文字が黙って別のフォントになる	検出して変換前に知らせる
foreignObject 内の HTML	キャンバスが汚染され、ブラウザが書き出しを拒否	検出して説明し、Inkscape を案内
xmlns 宣言の欠落	ファイルがまったく読み込まれない	自動で補って続行

実際に問題になる 2 つは、変換を押す前に検出されます。

ブラウザ内では誰にも直せない、ただひとつのこと

SVG に foreignObject — ベクターの中に埋め込まれた HTML — が含まれていると、それが描画された時点でブラウザはキャンバスを「汚染された」と印付け、以後は誰にもピクセルの読み出しを許しません。クロスオリジンのコンテンツに関するセキュリティ規則であり、バグでも、変換ツールが回避できるものでもありません。ブラウザのタブ内で動くツールはすべて同じ壁に当たります。できているように見えるものは、処理をサーバー側で行っています。作図ツールはこの種のファイルの代表的な出どころで、Mermaid も draw.io もテキストブロックに foreignObject を出力します。この種のファイルが手元にあるなら、Inkscape のようなデスクトップアプリなら何事もなく書き出せます。押す前に分かったほうが良いので、ボタンを押す前にこの点を確認しています。

書き出したサイズで足りているかの確かめ方

PNG を開いて 100% 表示にし、実際に置かれる大きさ — 収まる段の幅、印刷される寸法、プラットフォームが要求するピクセル数 — と見比べてください。PNG のほうが小さければぼやけて見えますし、これはどの変換ツールのどの設定でも変わりません。もっと大きい数字で書き出し直すだけです。画面向けなら、必要なサイズの 2 倍で書き出すのが良い習慣です。高精細ディスプレイは CSS ピクセル 1 つあたり物理ピクセル 2 つを描くからです。

あなたの SVG はブラウザから出ません

変換はあなたの端末で行われます。ファイルはこの端末上で読み取られ、このタブの中でキャンバスに描かれ、そのままお渡しします。アップロードしないので、サーバー上に控えは残らず、保存期間を気にする必要もありません。

ここは正確に書くべきところです。ブラウザ内で変換すること自体は、このページ独自の特徴ではありません。現在このキーワードで 1 位のサイトも完全にクライアント側で動いており、そう明記しています。事実だから、そして工具を選ぶ理由になるから書いているのであって、私たちだけの強みだからではありません。

ひとつ実質的な違いがあります。SVG 内のスクリプトは実行されません。ブラウザが画像要素経由で SVG を描画するとき、スクリプトは実行されず、外部リソースも取得されません — どちらも検証済みです。ですから出どころの怪しいファイルでも、ここでは描かれる以上のことはできません。

§ 01

アップロードなし

ファイルはあなたの端末で変換されます。

§ 02

アカウント不要

登録もメールアドレスも 1 日の上限もありません。

§ 03

透かしなし

PNG はそのままあなたのものです。

§ 04

スクリプトは実行されない

SVG に埋め込まれたものは何も動きません。

よくある質問

SVG を PNG に変換すると画質は落ちますか？⌄

落ちません。よく聞かれる疑問なので、丁寧に説明します。SVG には解像度がありません — 描画命令の集まりです。PNG への書き出しは、指定したサイズでその命令を実行することなので、圧縮も縮小も起きません。PNG がぼやけて見えるなら、置かれる場所に対してピクセル数が足りていないということです。もっと大きいサイズで書き出し直せば、くっきりします。

どのサイズで書き出せばいいですか？⌄

行き先が求めるサイズです。ファビコンは 512 ピクセル、SNS のプレビューは 1200 × 630、アプリアイコンは 1024。画面に出るもので自分でサイズを決められる場合は、必要な大きさの 2 倍で書き出してください。高精細ディスプレイは CSS ピクセル 1 つあたり物理ピクセル 2 つを描くので、2× の書き出しがそうした画面で輪郭を保つ方法です。印刷なら、印刷を担当する人に尋ねてください。ピクセル数か、DPI と仕上がり寸法を教えてくれます。

PNG がぼやけて見えるのはなぜですか？⌄

ほぼ必ず、表示される領域より小さいサイズで書き出しているからです。64 ピクセルの PNG がスライドで幅 400 ピクセルに引き伸ばされているなら、それはプレゼンソフトが拡大しているのであって、どの変換ツールのどの設定でも救えません。実際に表示されるサイズか、それ以上で書き出してください。もうひとつの原因は高精細ディスプレイですが、これは同じ問題の別の顔で、対処法も同じ — もっと大きく書き出すことです。

文字のフォントが変わったのはなぜですか？⌄

その SVG がウェブ上にあるフォントを参照していて、ブラウザは SVG の描画時に外部リソースを取得しないからです。これは意図的なセキュリティ境界で、このツールの制約ではありません — ブラウザ内で動く変換ツールはすべて同じです。文字は黙って既定のフォントに置き換わります。避けるには、フォントを SVG に埋め込むか、デザインソフトで文字をアウトライン化してから書き出してください。この点は検出して、変換前にお知らせします。

SVG が変換できないのはなぜですか？⌄

ほぼ 2 つの理由で説明がつきます。ひとつはファイルに foreignObject — ベクターに埋め込まれた HTML — が含まれていて、セキュリティ上ブラウザが書き出しを拒む場合。Mermaid や draw.io のような作図ツールがこの種のファイルを作りますが、Inkscape のようなデスクトップアプリなら問題なく書き出せます。もうひとつは XML 自体が壊れていて、ブラウザが読み込めない場合。3 つ目の理由である xmlns 宣言の欠落は、ファイルを拒否せずその場で直しています。

既定ではどのサイズが使われますか？⌄

ファイルが指定しているサイズで、それがファイルのどこから来たのかもお伝えします。SVG に width と height 属性があればそれを使い、必要なら cm・mm・pt・インチから換算します。viewBox だけなら viewBox を使います。これは意図的で、この種のファイルに対してブラウザは 150 × 150 と報告しますが、それは画像とまったく関係のない CSS の既定値だからです。サイズがまったく無いファイルは 300 × 150 にフォールバックし、その旨を明示します。

透明は保たれますか？⌄

はい、既定で保たれます。PNG は透明に対応しているので、SVG で何も描かれていない部分はそのまま透明になります。ベタ塗りの背景が必要な場合 — アップロードフォームや印刷工程で求められることがあります — 白背景の選択肢があります。

複数のファイルを一度に変換できますか？⌄

できます。好きなだけドロップして、サイズは一度だけ設定すれば、ZIP がひとつ返ってきます。倍率は各ファイルの元サイズを基準に計算されるので、大きさの異なるアイコンをまとめて 2 倍にしても、同じサイズに揃えられることはありません。完全に同じサイズにしたい場合は、正確なサイズを入力してください。

サイズに上限はありますか？⌄

長辺 16000 ピクセルです。これは適当な数字ではなく、ブラウザのキャンバスが動かなくなる地点です。実測では、16000 × 16000 は約 5 秒で 4.5 MB の正しい PNG を出しますが、20000 は完全に失敗します。それより大きい指定は使える範囲に収め、その旨をお知らせします。

ファイルをアップロードする必要はありますか？⌄

ありません。ファイルはあなたの端末で、このブラウザタブの中で読み取られ変換されます。どこにも送られないので、どこにも保存されず、保存期間も存在しません。

PNG を SVG に戻せますか？⌄

できますが、はるかに難しい作業なので、始める前に理解しておく価値があります。ピクセルからベクターへは、ファイルに存在しない形をなぞる作業です。ロゴや線画にはよく効き、写真にはまるで効きません。PNG を SVG に変換するページで、画像の種類ごとの実力を数値で示しています。

そもそも SVG とは何ですか？⌄

ピクセルの格子ではなく、形 — 線、曲線、塗り — を記述したテキストファイルです。点ではなく命令を保存しているので、どんな大きさにも描けてギザギザになりませんし、ロゴやアイコンのようなベタ塗りの図では、ビットマップよりずっと小さくなるのが普通です。テキストエディタで開いて読むこともできます。代償は、どこでも受け取ってもらえるわけではないこと — このページが存在する理由がそれです。