SVG を PNG に変換

この無料ツールは、SVG のロゴ、アイコン、グラフを PNG 画像として描画します。サイズは SVG 本来のサイズ、その 2 倍か 4 倍、または指定した幅から選べ、透過背景はそのまま保持されます。SVG の描画も PNG の作成もブラウザーが行うため、ファイルはアップロードされません。外部ファイルにリンクしたフォントや画像は読み込まれず、白い背景も追加されません。

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

うまく変換できないファイルがありましたか？ [email protected] までメールでお知らせください。小さなサンプルファイルを添えていただけると、修正しやすくなります。

要点

入力: SVG (.svg)。出力: PNG (.png)。
ファイルはアップロードされません。処理はお使いのブラウザー内、ご自身の端末で行われます。
画像サイズ: 1辺16,384ピクセルまで（iPhoneとiPadでは約1,600万画素）。
最新のブラウザー（Chrome、Edge、Firefox、Safari）が必要です。パソコン、タブレット、スマートフォンで使え、インストールは不要です。
無料、登録不要です。

SVG を PNG に変換する理由

SVG は描画の指示の集まりなので、どんなサイズでもくっきり描画できます。ところが、スライド、ワープロソフト、SNS、アプリストア、メールの署名、そして多くのアップロードフォームは、ピクセルの画像しか受け付けません。PNG に変換するには、何ピクセル必要かを決める必要があり、ここでの設定はそれだけです。SVG 自体のサイズ、その 2 倍か 4 倍、または正確な幅を選べます。小さな画像を拡大するのではなく、そのサイズで新たに描画するため輪郭はくっきりしたままで、透過背景も透過のまま残ります。幅や高さがなく viewBox だけを持つ SVG にも対応しています。SVG の描画も PNG の書き出しもブラウザーが行うため、ファイルはお使いの端末から外に出ません。このモードでは外部ファイルにリンクしたフォントや画像は読み込めず、SVG がそれらを使っている場合は一覧に警告が表示されます。

SVG を PNG に変換する方法

.svg ファイルをボックスにドロップするか、クリックして選びます。
「PNG のサイズ」を選びます。標準は「2 倍、おすすめ」で、「幅を指定…」でピクセル単位の幅も入力できます。一覧には各 PNG の仕上がりサイズが表示されます。
「PNG に変換」をクリックし、PNG、またはすべてをまとめた ZIP をダウンロードします。

知っておきたいこと

大事なのはピクセル数で、DPI ではありません

PNG にはピクセル単位の幅と高さがあり、DPI の値は印刷時の大きさについてファイルに保存されたヒントにすぎません。鮮明さを決めるのはピクセル数です。ロゴを幅 5 cm、1 インチあたり 300 ピクセルで印刷するなら約 590 ピクセルの幅が必要なので、DPI の設定を探すのではなく、その幅を選んでください。画面用なら、SVG 本来のサイズの 2 倍で高解像度ディスプレイでもくっきり見えます。

幅と高さがない SVG

多くのアイコンや書き出された図版は、viewBox="0 0 24 24" のように viewBox だけを持っています。その場合、ブラウザーは独自に 300 × 150 ピクセルを選んでしまいますが、このツールは viewBox を基準サイズとして使うので、1 倍なら 24 × 24、2 倍なら 48 × 48 になります。インチ、ミリメートル、ポイントで指定されたサイズは、CSS の標準である 1 インチあたり 96 ピクセルで換算されます。

リンクしたフォントや画像は読み込まれません

ブラウザーが SVG を画像として描画するときは、セキュリティ上の理由でファイルの外にあるものを一切取得しません。Web フォントで設定した文字はお使いの端末にインストールされたフォントで代用され、アドレスでリンクされた画像は表示されません。データとして SVG に埋め込まれたフォントや画像は使えます。文字の見た目を正確に保つ必要があるなら、書き出す前にデザインソフトで文字をアウトライン化してください。

背景は透過のままです

SVG が塗っていない部分は、PNG では透明になります。色付きのスライドに載せるロゴにはこれが理想的ですが、白い背景は追加されません。ビューアーによっては、透過部分が黒や市松模様で表示されます。

非常に大きなサイズ

ブラウザーの canvas にはサイズの上限があり、このページでは 1 辺あたり 16,384 ピクセルまで扱えます。スマホやタブレットではもっと手前で失敗することがあるため、ポスターサイズの PNG はパソコンで書き出してください。

ファイル形式について

SVG

SVG（Scalable Vector Graphics）は、W3C が定めたベクター図形用の XML 形式で、2001 年から勧告になっています。ピクセルではなく、図形、パス、テキスト、グラデーションを命令として保存するため、どの大きさでもくっきり表示されます。 Figma、Illustrator、Inkscape から書き出したロゴ、アイコン、グラフ、イラストは SVG であることがよくあります。

ただのテキストファイルなので、どのテキストエディターでも開いて編集できます。
決まったピクセルサイズはありません。幅、高さ、viewBox は、標準でどの大きさに描くかを示すだけです。
ほかのファイルやウェブサイトのフォントや画像にリンクでき、その場合はそれらも読み込める必要があります。
すべてのブラウザーで開けますが、多くのオフィスソフト、SNS、アップロードフォームは PNG か JPG しか受け付けません。

PNG

PNG（Portable Network Graphics）は 1996 年に登場した可逆圧縮の画像形式で、スクリーンショット、ロゴ、図、透過のある画像によく使われます。すべてのピクセルが正確に保存されるため、文字や輪郭はくっきりしたままです。

可逆圧縮のため、何度保存し直しても画質は落ちません。
完全な透過（アルファチャンネル）に対応しています。
写真を PNG で保存すると、たいてい JPG の数倍の大きさになります。

よくある質問

SVG ファイルはアップロードされますか？

いいえ。SVG の描画も PNG の作成も、お使いの端末上のブラウザーが行います。

PNG はどのくらいのサイズにすればよいですか？

Web ページやスライドなら、表示サイズの 2 倍に。印刷用なら、印刷する幅（インチ）に 300 を掛けてください。アプリのアイコンやファビコンは、たいていプラットフォームが決めた固定サイズがあります。

PNG の文字の見た目が違うのはなぜですか？

SVG が埋め込みではなくリンクで Web フォントを使っていて、ブラウザーが別のフォントで代用している可能性が高いです。Illustrator、Inkscape、Figma で文字をパスに変換するか、フォントを埋め込んでから、もう一度変換してください。

透過ではなく白い背景にできますか？

ここにはその設定はありません。SVG の最初の要素として白い長方形を追加するか、画像編集ソフトで PNG を白の上に配置してください。

PNG はベクター画像のままですか？

いいえ。PNG は選んだサイズのピクセルでできています。SVG を元ファイルとして残し、別のサイズが必要になったら新たに PNG を作ってください。