SVGをPNGに変換
SVG ベクターファイルを高品質な PNG 画像に変換。透過も保持され、出力サイズを選んで Web サイトやアプリ、印刷向けの鮮明な画像が得られます。
ここにSVGファイルをドロップ
またはクリックしてファイルを選択
SVGを必要なサイズちょうどでPNGに変換し、透過も保持します。出力の幅または高さを指定するとその解像度でレンダリングされるため、アプリアイコン、SNS用画像、ラスター形式が必要なあらゆる場面に適しています。
透過や鋭い輪郭を持つグラフィック、つまりロゴ、アイコン、図、文字にはPNGが適した出力先です。SVGは小さなビットマップから拡大されるのではなく、選んだサイズでブラウザがレンダリングするため、どの寸法でも鮮明さが保たれます。
SVGをPNGに変換する方法
.svgファイルを選択します
出力サイズを設定します
PNGをダウンロードします
よくある質問
透過は保持されますか？
はい。PNGはアルファチャンネルに対応しているため、SVGの透明な部分は白くならず透明のまま残ります。
どのサイズで書き出せばよいですか？
表示する最大のサイズ、または高解像度ディスプレイ用にその2倍で書き出してください。512×512でアプリアイコンをカバーでき、横長のバナーなら1920pxが良い基準です。
SVGが正しく表示されないのはなぜですか？
外部フォントや外部画像を参照しているSVGは単体のレンダリングでは読み込めないことがあり、フィルターやブレンドモードも異なって描画される場合があります。元のファイルでフォントをアウトラインとして埋め込むと、ほとんどの場合は解決します。
複数のファイルを一度に変換できますか？
変換は1回に1ファイルです。まとめて処理する場合は繰り返すか、1回変換したあとで複製をリサイズしてください。
WebにはSVGとPNGのどちらが適していますか？
アイコンやロゴにはSVGをそのまま使ってください。ファイルが小さく、拡大しても完璧です。PNGに変換するのは、サービスがSVGを受け付けない場合や、固定のラスターサイズが必要な場合だけです。
ファイルはアップロードされますか？
いいえ。レンダリングはブラウザ内で行われます。
概要
| 入力 | SVG |
|---|---|
| 複数ファイル | いいえ |
| 実行場所 | ブラウザ内で実行 - ファイルはアップロードされません |
| オフラインでも動作 | はい — ページを読み込んだ後 |
| 料金 | 無料・登録不要・透かしなし |
どの出力形式を選ぶか
SVGから始めてビットマップが必要な場合、ほぼ常に正解はPNGです。透過を保て、輪郭や文字の周りに圧縮による劣化が出ず、表示サイズの2倍か3倍でレンダリングすれば鮮明なままです。JPGを選ぶのは、できるだけファイルを小さくしたい、しかも守るべき透過も細かな細部もない場合だけにしてください。JPGは透過をまったく表現できず、透明な部分は白か黒になることを忘れないでください。画像をWebサイトに載せ、透過とより小さなファイルの両方が欲しい場合はWebPを選びます。どれを選んでも、必要だと思うより高い解像度で書き出してください。大きなきれいな画像を縮小するほうが、小さな画像を拡大するより常によく見えます。
SVG出力の実務的な注意点
SVGはテキストなので、書き出し時に選んだ解像度で拡大縮小します。表示したいサイズの2倍や3倍でレンダリングすれば、高密度ディスプレイでも鮮明なままです。テキストであるため圧縮やキャッシュにも向き、CSSで装飾したりアニメーションを付けたりできます。注意すべき点が2つあります。SVG内のテキストはフォントを利用できるかに依存するため、テキストをアウトライン化すると、どこでも同じ見た目になる代わりに選択も検索もできなくなります。また、SVGはスクリプトや外部参照を含められるため、アップロードフォームやメールソフトが受け付けないことがよくあります。