# SVGを適切な大きさのPNGに変換する方法

変換そのものは簡単なほうです。結果が使えるかどうかを決めるのは、誰も答えを渡してくれない問い、つまり「何ピクセルにするか」のほうです。ここでは、その数値がどこから来るのか、そして図がピクセルになる途中で何を失うのかを説明します。

[SVG→画像変換ツールを開く](https://abox.tools/ja/svg-to-image/): サイズを指定するだけ。ベクターには、失うサイズがそもそもありません。

最終更新 2026年8月26日

## 短い答え

[SVGを画像に](https://abox.tools/ja/svg-to-image/)を開いてファイルを入れ、大きさを指定します。どの大きさにすべきか誰にも言われていないなら、**長辺1024ピクセル**が良い初期値です。たいていの用途に十分大きく、メールで送れる程度には小さい値です。形式はPNGのまま、背景は透過のまま、そのままファイルを受け取ってください。

以下は、その初期値では足りない場合の話です。数値を指定されたとき、印刷に回すとき、そして出てきたものがおかしく見えるときです。

![プレビューのカード。指定した大きさで描かれた図と、その下のピクセル寸法。](https://abox.tools/screens/convert-an-svg-to-png/preview.webp)

ツールは保存する前に、しかも保存する大きさで描いてみせます。書き出しの不具合はまずここに出ます。

## 大きさがファイルではなく、こちらの判断である理由

JPEGは測られたピクセルの格子なので、どれだけの大きさかという問いには答えがあります。SVGはそもそも画像ではなく、指示の集まりです。ここに円を描け、この線をこの色で。そして指示に大きさはありません。ブラウザはそれを16ピクセルでも4000ピクセルでも実行できますし、どちらでも同じだけ鮮明です。拡大縮小しているのではなく、描き直しているからです。

だから変換が代わりに数値を選ぶことはできませんし、大きな数値を選んでも何の代償もありません。「大きくして」が無料である唯一の画像処理が、これです。

たいていのSVGファイルは`width`と`height`の属性を持っており、道具はそれを表示します。ですがそれは初期値であって、上限ではありません。`width="24"`と書かれたアイコンが言っているのは、描いた人が24ピクセルのツールバーを念頭に置いていた、ということだけです。

## その数値が実際どこから来るのか

**ウェブサイトの場合。**その画像がページ上で占める大きさをCSSピクセルで取り、気にかけている画面のピクセル密度を掛けます。幅200ピクセルの枠に入るロゴには、RetinaのノートPCには400ピクセル、最近のスマホには600のファイルが必要です。`@2x`と`@3x`の意味はそれで全部ですし、それらを書き出す道具が、同じ計算を3回する手間を省いてくれる理由でもあります。

**アプリのアイコン、ストアの掲載画像、ファビコンの場合。**数値は公開されていて、考えることは何もありません。ストアのページに書かれたとおり、正確にです。ファビコンについては、そもそも書き出さないでください。[.icoを作ってください](https://abox.tools/ja/guides/make-a-favicon/)。1つのファイルに複数のサイズを収められるからです。ブラウザのタブ、ブックマーク、Windowsのショートカットは、それぞれ別のサイズを求めます。

**印刷の場合。**インチ単位の物理的な大きさに、プリンターの解像度を掛けます。名刺に幅2インチで入るロゴを300 DPIで刷るなら600ピクセル。同じロゴをA4の幅いっぱい、8.3インチに置くなら約2500です。印刷所は当然のように300 DPIを求めますし、部屋の向こうから見る大判の横断幕なら150で十分です。

**SNSのプレビューやOG画像の場合。**プラットフォームが枠を指定してきます。リンクのプレビューは、たいてい1200 × 630です。そしてその枠は、手元のロゴとは違う形をしています。「余白で埋める」の設定は、そのためのものです。図は自分の比率のまま中央に置かれ、残りは背景色で埋まります。引き伸ばされたロゴは、確かめなかったことを全員に知らせてしまいます。

2つが同時に当てはまるなら、大きいほうを使ってください。必要より大きいPNGはダウンロードがわずかに大きいだけですが、小さすぎるPNGはあとから直せません。その理由は、次の節にあります。

![サイズのカード。大きさの言い方を並べたメニューが幅に設定され、1024が入力され、横に定番の幅が並んでいます。](https://abox.tools/screens/convert-an-svg-to-png/size.webp)

同じことを言う五通りのやり方です。どれが正しいかは、数字を渡されたのか、置き場所を渡されたのかで決まります。

## 戻る道はありません

ピクセル化は一方通行です。いったんPNGになれば、それはほかの画像と同じピクセルであり、あとから拡大するには、一度も測られなかった細部を発明するしかありません。写真を拡大したときと同じ、ぼやけて滲んだ結果です。

ですからSVGを取っておいてください。それが原本であり、たいていファイルも小さく、将来のどの大きさもそこから完璧に出てきます。PNGは、ひとつの特定の用途のための書き出しです。別の大きさが必要になったときの正しい動きは、書き出したものをリサイズすることではなく、もう一度書き出すことです。

PNGをSVGに戻せると謳うソフトもあります。それがしているのはトレース、つまりピクセルの格子を説明できそうな曲線を推測することです。平坦な2色の図版ならそれなりに動きますが、それ以外では高くつく無意味なものを作りますし、元の図が持っていたものを取り戻すことは決してありません。

## ピクセルになった瞬間に変わる3つのこと

書き出したSVGがおかしく見えるとき、その理由はほぼ必ずこの3つのどれかです。そして3つとも、書き出したあとではなく前に知っておく価値があります。

**文字は、その端末にあるフォントで描かれます。**文字を含むSVGは、フォントを含んでいません。名前を指定して、探すのは描画側に任せます。そのフォントが入っていなければ代替が使われますが、代替は字形も字幅も違うので、文字が折り返したりはみ出したりします。ウェブアドレスからフォントを取ってくるファイルは、もっと分が悪くなります。`<img>`を通してピクセル化されるSVGは、そもそも何も取りに行くことを許されていないので、何も届きません。

直し方は、どのデザイナーもすでに知っているものです。SVGを書き出す前に、**文字をアウトラインに変換する**ことです（Illustratorでは「アウトラインを作成」、Figmaでは「Flatten」、Inkscapeでは「オブジェクトをパスへ」）。文字が図形になり、フォントは関係なくなり、どの端末でも同じに見えます。複製に対して行ってください。アウトライン化した文字は、もう文字として編集できません。

**髪の毛のような線が灰色になるか、消えます。**選んだ大きさで1ピクセル未満になる線幅は、実線として描けないので、薄い線として描かれます。繊細なロゴを64ピクセルで書き出すと色あせて見えるのに、同じファイルを512で出すと完璧に見えるのは、このためです。小さいサイズが要件なら、答えは書き出し設定を変えることではなく、線を太くして単純化した図を用意することです。ファビコンがワードマークではなくシンボルである理由と、同じです。

**アニメーションは止まります。**アニメーションするSVGは、1枚の静止画になります。最初のフレームが何であれ、それになります。これを変える書き出し設定はありません。動きが必要なら、別のやり方で作ったGIFか動画が必要です。

## 透過と、どの形式を選ぶか

理由がなければ**PNG**です。可逆で、透過を保ち、平坦な色と硬い輪郭がよく圧縮されます。図のほとんどは、それでできています。ピクセル化されたロゴは、JPEGにした場合より*小さな*PNGになるのがふつうですし、しかもきれいです。

**JPEG**には、透過がまったくありません。透過だったピクセルはすべて何かの色にならなければならず、誰も色を選ばなければ黒になります。人が不具合だと思う「黒い四角の上のロゴ」は、ここから来ています。しかも、まさにこの種の画像でいちばん目立つ形で非可逆です。硬い輪郭のすべてを、斑点の輪が取り囲みます。何かがそれを要求してくる場合に使ってください。

**WebP**はPNGにできることをすべて、より小さなファイルでこなしますし、現行のどのブラウザも読めます。使わない理由は、ブラウザのあとに起きることです。古いソフト、いくつかの印刷所、そしてかなりの数のアップロードフォームが、いまだにこれを開けません。

PNGで背景色を選ぶのも、まったくふつうの要望です。透過が役に立つのは、その画像が着地する先が予測できない色である場合だけです。白いページだと最初からわかっているなら、白に合成しておけば、まるごとひとつの驚きの種類を避けられます。

## 書き出しが真っ白、あるいはおかしいとき

**空白しかありません。**たいていはルート要素の`xmlns`属性が抜けています。それがないファイルは、画像タグにとってSVGではなく、何も描かれません。ブラウザでファイルを開くのが、手早い試験です。ブラウザでも何も出ないなら、問題は変換器ではなくファイルのほうです。

**図が小さく、左上の隅にあります。**ファイルに`width`と`height`はあるのに`viewBox`がないので、拡大縮小すべき座標系がなく、図版は大きなキャンバスの上で元の単位を保ったままになります。まともな変換器はviewBoxを入れてくれますが、そうでなければ、ルート要素に`viewBox="0 0 *width* *height*"`を手で足せば直ります。ファイルは素のテキストなので、それができます。

**図の一部が欠けています。**ファイルの中の何かが、図版そのものを含むのではなく、アドレスを指していました。リンクとして保存された埋め込み写真、スタイルシート、フォントです。それらを取りに行くことを拒む描画器は、正しいことをしています。どこかからダウンロードしたSVGが、作った相手に報告することを止めているのと、同じ拒否だからです。画像を埋め込んだ状態で、作図ソフトから書き出し直してください。

**非常に大きなサイズを拒まれます。**ブラウザはキャンバスの大きさに上限を設けており、しかもその位置について意見が一致していません。一辺およそ16,000ピクセルを超えると何も返ってきませんし、iPhoneやiPadのSafariはもっと早く、およそ4096 × 4096で音を上げます。警告する道具は、真っ白なファイルから使う人を救っています。ブラウザは行き詰まったとき、エラーメッセージではなくそれを返すからです。

## これにアップロードは要りません

SVGのピクセル化は、どのブラウザも1日に何千回も行っていることです。ウェブページにアイコンを描くのと、同じ仕組みです。図版がPNGになって出てくるために、サーバーまで往復しなければならない技術的な理由はありません。そしてここの道具は、どこへも送りません。ページの`Content-Security-Policy`には接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。

SVGでは、これがふつう以上に効いてきます。SVGは画像ではなく、文書だからです。スクリプトも外部アドレスも含められますし、代理店から送られてきたロゴは、自分で書いたのではないファイルです。画像タグを通して描かれると、仕様が*secure static mode*と呼ぶ状態に入ります。スクリプトは走れず、アドレスに接続されることもありません。それを強制しているのは、ウェブサイトではなくブラウザです。

言われるより確かめたい方は、ページを読み込んでから回線を抜き、それでも変換してみてください。[オンライン変換サイトにファイルをアップロードしても安全ですか？](https://abox.tools/ja/guides/is-it-safe-to-upload-files/)には、どの道具にも試せる確認方法がさらに3つ載っています。