好きなサイズで使えるSVG PNG変換

SVGファイルは画素ではなく数式で形を表すので、Web上のロゴやアイコンには最適です。それでも、普段使う多くのツールではまだ使えません。ワープロ、スライドアプリ、メールソフト、ショッピングモール、SNSはたいてい普通の画像を求め、SVGのアップロードをきっぱり拒否するものもあります。変換すれば、元のベクターをマスターとして残しつつ、どこでも使える画像が手に入ります。

PNGは動作も予測しやすい形式です。どのソフトでも同じに見えるので、SVG内のフォントや効果に相手のビューアーが対応していないといった想定外のことが起きません。

2つの形式をひと言で

SVGとPNGを比べると、ベクターファイルはシャープさを失わずにどんなサイズにもでき、シンプルな画像ならたいていとても小さいですが、それを理解できるソフトが必要です。PNGは決まった画素の格子を保存し、透過に対応し、ほぼ何でも開けます。自分で管理するWebサイトではSVGを、ほかの人やプラットフォームに作品を送るときはPNGを使いましょう。

ブラウザが各ファイルをテキストとして読み込み、本当にSVGか確認して、安全に整えます。スクリプト、インラインのイベントハンドラー、埋め込まれたWebコンテンツ、外部リソースへのリンクは削除されるので、悪意のあるファイルがコードを実行したり外部に通信したりすることはできません。整えたマークアップは画像として読み込まれ、ページに挿入されることはなく、選んだサイズでキャンバスに描画されてからPNGとして保存されます。

最終的なサイズで描画するので、輪郭や曲線はその解像度に合わせて計算されます。小さなビットマップを引き伸ばすことはないので、8倍で描画したアイコンも1倍と同じくらいくっきり見えます。

たくさんのファイルを変換

SVGをPNGに一括変換するなら、最大50ファイルを一度に選ぶかドロップしてください。同じサイズと背景の設定がすべてに適用され、進行状況バーで作業を確認でき、ボタン1つで結果をZIPにまとめられます。ファイル名は保たれ、logo.svg は logo.png になります。

倍率か正確な幅か

倍率は、SVG自体に書かれたサイズを掛け算します。24ピクセルのアイコンは、2倍で48ピクセル、8倍で192ピクセルになります。印刷や大きなディスプレイ用にSVGを高解像度のPNGにしたいなら、「幅」に切り替えて正確なピクセル数（最大16,384）を入力してください。高さは縦横比から計算されるので、つぶれることはありません。

よく使うサイズ

Webサイト用なら、高密度の画面でもくっきり見えるよう表示サイズの2倍で書き出しましょう。アプリストア用にSVGアイコンをPNGにするなら、512か1024ピクセルの正方形が一般的です。SNSのプロフィール画像は400〜800ピクセルがちょうどよく、印刷物には最終的な印刷の1インチあたり約300ピクセルが必要です。

どのサイズでもくっきり

ベクターは拡大ではなく描き直されるので、どの倍率でも画質を落とさずにSVGをPNGに変換できます。唯一の制限はメモリです。幅16,000ピクセルのようなとても大きな出力は数秒かかり、ファイルも大きくなります。

ほとんどのロゴやアイコンには背景がないので、ツールは初期設定で背景が透過したPNGを作り、どんな色の上にもきれいに置けます。ただし、透過部分を黒やチェック柄で表示するプラットフォームもあります。その場合は「透過を保つ」のチェックを外し、白、ブランドカラー、ほかの好きな色を選んでください。

ファイル一覧のサムネイルはチェック柄の背景で表示されるので、変換前にどこが透過しているか確認できます。一部のプレゼンアプリやメッセージサービスのように透過をうまく表示できないツールでのプレビューには、単色の塗りつぶしも便利です。

デザインソフトをインストールせずにMacでSVGをPNGに変換したいなら、Safari、Chrome、Firefoxでこのページを開き、Finderからファイルをドラッグしてください。WindowsでSVGをPNGに書き出す場合も、EdgeかChromeで同じように使え、インストールは不要です。スマホでは、ドロップ範囲をタップしてストレージからファイルを選び、結果をダウンロードフォルダや写真ライブラリに保存します。

デザインツールから

Figma、Illustrator、Inkscapeなどのアプリは自分でPNGを書き出せますが、元のプロジェクトを開いているときだけです。このページは、書き出したファイルしかないとき、チームメンバーからアイコンパックが届いたとき、SVGを複数のサイズのPNGですばやく保存したいときに便利です。

ベクターかラスターかは、画像の使い方で決まります。ロゴ、アイコン、グラフ、イラストなど、拡大縮小や後での編集が必要なものにはベクターが理想的です。写真や、ベクターを読めない送り先にはラスター画像が適しています。元のSVGをマスターとして残し、PNGのコピーはいつでも好きなサイズで作り直せる書き出しファイルとして扱いましょう。

SVGに写真が埋め込まれている場合、その写真部分は独自の決まった解像度を持っています。ファイルを拡大してもベクターの図形はくっきりしたままですが、埋め込まれた写真はぼやけて見えることがあります。その場合は、ベクターの作品と組み合わせる前に、AI高画質化ツールで写真を拡大すると役立ちます。

フォントと効果

SVGの文字は、パソコンにインストールされていないフォントを使っている場合があり、そのときはブラウザが似たフォントで代用します。文字を正確に再現したいなら、書き出す前にデザインアプリで文字をアウトライン化してください。フィルターや描画モードはブラウザが描画し、たいていそのブラウザでファイルを開いたときの見た目と一致します。結果が意外だったら、同じブラウザで元のSVGを開いて比べてください。そこで見えるものが、変換ツールが描くものです。

ファイルが受け付けられない

ツールは拡張子をうのみにせず、各ファイルの先頭にSVGのマークアップがあるか確認します。中身がPNGやJPGで名前だけ .svg のファイルや、gzipで圧縮したSVGZファイルは受け付けられません。デザインアプリで開いて普通のSVGとして書き出すか、すでにビットマップなら別の変換ツールを使ってください。

絵の一部が表示されない

安全のため、ほかのWebサイトからリンクされた画像は削除されるので、SVGがURLから読み込む画像は表示されません。画像はファイル自体に埋め込むか、書き出す前にデザインアプリで配置してください。ブラウザが対応しなくなったとても古いSVGの機能もスキップされることがありますが、標準的な図形、グラデーション、マスク、クリッピングパスは期待どおりに描画されます。

PNGがとても大きい

PNGは可逆圧縮なので、縦横のサイズが大きいとファイルも大きくなります。Webサイトに載せる画像なら、後でPNG WebP変換ツールでWebPに変換しましょう。透過を保ったまま、たいていサイズが半分以下になります。メール署名や書類なら、幅300〜600ピクセルでたいてい十分で、ファイルも問題なく送れる小ささになります。

ファイルがアップロード、記録、保存されることはなく、タブを閉じれば消えます。1ファイル50 MBまで、1回50ファイルまでで、1日の上限も透かしもありません。このツールは無料で、EnhancerPro のクレジットを一切使いません。