SVG PNG 変換
ベクター画像から必要なサイズの鮮明なPNGを。
ブラウザ内で動作します。ファイルが端末から出ることはありません。
- 幅を自由に指定
- 透明度を保持
- 一括変換
SVGをPNGに変換する方法
- ここにSVGファイルをドロップします。
- 幅をピクセルで入力するか、空欄のままでSVG本来のサイズを使います。
- PNGをダウンロードします。
SVGをPNGに変換する必要がある理由
SVGはピクセルではなくXMLテキストで記述された図形とパスとして画像を保存するため、多くのアップロードフォーム、古いアプリ、一部の印刷ソフトはまったく読み込めません。
PNGに描画すると、その図形が選んだサイズの実際のピクセルに変換されるため、ファイルはどこでも普通の写真やグラフィックと同じように扱えます。
適切な幅の選び方
- Web用途では、実際に表示するピクセルサイズを選び、高解像度の画面向けにはその2倍にします。
- 印刷用途では、仕上がりサイズの1インチあたり約300ピクセルを目安にします。幅4インチのロゴならおよそ1200ピクセル必要です。
- 幅を空欄にすると、SVGファイル自体に書き込まれたサイズが使われます。
- SVGはベクター画像なので鮮明さに上限はありません。小さなアイコンから作った4000ピクセルのPNGでも鮮明なままです。
SVGとPNGの違い
| SVG | PNG | |
|---|---|---|
| 保存形式 | 図形とパス（ベクター） | ピクセル（ラスター） |
| 拡大したとき | どんなサイズでも鮮明 | 拡大するとぼやける |
| シンプルなアイコンのファイルサイズ | 非常に小さい | 大きい |
| コードとして編集できるか | できる | できない |
| アップロードフォームでの対応 | 拒否されることが多い | どこでも受け付けられる |
SVG→PNGのFAQ
SVGから高解像度のPNGを作るには？
2000や4000ピクセルのように大きめの幅を入力してください。SVGはベクター画像なので、どんなサイズでも鮮明さを保ちます。
背景は透明になりますか？
はい。塗りのない部分はPNGでも透明のままです。
なぜPNGがSVGと違って見えるのですか？
外部フォントや画像を読み込むSVGは、それらが読み込まれずに描画されることがあります。デザインアプリで文字をパスに変換しておくと正確に一致します。
ファイルはアップロードされますか？
いいえ。SVGはお使いのブラウザ自身が描画します。
サイズが固定されていないSVGはどうなりますか？
幅を入力しない限り、PNGはSVG自体のviewBoxの寸法を使います。幅を入力すると高さは自動的に比率を保って調整されます。
多数のSVGファイルを一括で変換できますか？
はい。複数のファイルをドロップすればすべて同じ幅と設定で変換され、まとめてZIPでダウンロードできます。
PNGに背景色は付きますか？
SVGが背景色を定義している場合のみ付きます。塗りのない部分は透明のままです。
独自フォントを使ったSVGも変換できますか？
お使いのブラウザにそのフォントがインストールされているか、SVG自体にフォントが埋め込まれていれば表示されます。そうでない場合は既定のフォントに置き換わります。