SVGベクター画像をピクセル単位で美しいPNGに書き出し
お好みの解像度でSVGをラスタライズできます。ファビコンから大型看板サイズまで対応。シャープなエッジ、自由なサイズ指定、透明背景もそのまま。すべてブラウザ上で完結します。
ここに画像をドロップ
SVG
最大ファイルサイズ:100 MB · 複数ファイルに対応
SVGをPNGに変換する方法
ドロップゾーンをクリックするか、ファイルマネージャーからドラッグして、SVGファイルをアップロードします。
複数のSVGファイルを一度にドロップすれば、アイコンライブラリやブランド素材のコレクション全体をまとめてPNGに書き出せます。ラスタライズ処理はすべてブラウザ内で行われ、ファイルがサーバーにアップロードされることはありません。
出力するPNGの幅と高さを指定します。
SVGのもとのサイズのままでも構いません。SVGは解像度に依存しないため、同じファイルをファビコン用の32px、アプリアイコン用の512px、印刷用の4000pxなど、どのサイズでも画質を落とさずにくっきり書き出せます。
選んだ解像度で、くっきりとした透明背景のPNGをダウンロードします。
SVGの背景はデフォルトで透明で、変換後もPNGのアルファチャンネルとして保持されます。複数のSVGファイルをまとめて変換した場合は、すべてのPNGがZIPアーカイブにまとめられ、ワンクリックでダウンロードできます。
SVG と PNG の比較:何が変わるか
SVG と PNG の違いを理解すると、用途に合った形式を選びやすくなります。
| 仕様 | SVG | PNG |
|---|---|---|
| 圧縮 | なし(テキストベース) | 可逆 |
| 品質 | 完全(ベクター) | 優良 |
| 透過 | はい | はい |
| アニメーション | はい | いいえ |
| ファイルサイズ | グラフィックなら非常に小さい | 中〜大 |
なぜ SVG から変換するのか?
- 写真には向いていません
- 複雑な画像ではファイルが非常に大きくなります
- 埋め込まれたスクリプトによるセキュリティリスクがあります
なぜ PNG を選ぶのか?
- 可逆圧縮で画質を維持できます
- 完全な透過に対応
- グラフィックや文字に最適
SVG を使うのが適している場面
ロゴ、アイコン、イラストなど、どんな解像度でもくっきり表示したい拡大縮小可能なグラフィックに向いています。
PNG を使うのが適している場面
透過や可逆圧縮の画質が必要なときや、グラフィックやロゴを扱うときに向いています。
SVG PNG変換ツールが選ばれる理由
グラデーションやフィルター、透過を保ったまま、SVGグラフィックを鮮明なPNG画像に変換します
どんな拡大率でもくっきり
ファビコン用の16×16から印刷用の4000×4000まで、出力サイズを正確に指定できます。SVGのベクターは無限に拡大できるため、PNGは常にシャープです。
複雑なSVGにも対応
埋め込みフォント、CSSスタイル、クリップパス、フィルター、グラデーション、マスクに対応しています。単純な図形だけでなく、実際のデザインツールで書き出したSVGも正しく変換できます。
高DPI・Retinaにも対応
Retinaディスプレイや高解像度の用途に向けて、2倍や3倍のスケールで書き出せます。最新のどの画面でも、PNG素材が鮮明に表示されます。
SVG PNG変換のよくある質問
SVGベクター画像をPNGに変換する際の技術的・実用的な疑問にお答えします。
SVGをPNGに書き出すとき、どの解像度を選べばよいですか?
用途によって異なります。Webアイコンなら32〜512pxが目安です。SNSのプロフィール画像には800×800px以上をおすすめします。300 DPIで印刷する場合は、希望するインチ数に300を掛けてください(A4の印刷には約2480×3508pxが必要です)。Retina/HiDPIの画面向けには、表示したいサイズの2倍で書き出してください。
SVG内のテキストやフォントは、PNGでも正しく表示されますか?
SVG内のテキストは2種類に分かれます。システムフォントを使ったテキスト(レンダリングする端末にフォントがインストールされている必要があります)と、パスに変換されたテキスト(常に正しく表示されます)です。SVGが埋め込みフォントやWebフォントなど、システムフォント以外を使っている場合は、書き出す前にデザインツールでテキストをアウトライン化しておくと、確実に正確な表示になります。
書き出したPNGが、ブラウザで見るSVGと違って見えるのはなぜですか?
SVGの描画はエンジンによって異なる場合があります。CSSフィルター、ブレンドモード、複雑なクリップパスなどは、ブラウザと当ツールのラスタライザーとの間でわずかに差が出ることがあります。重要なブランド素材は、必ずPNGの出力結果を確認し、必要に応じて元のSVGを調整してください。
透明背景のSVGをPNGに変換できますか?
はい、できます。SVGはデフォルトで背景が透明で、当ツールはPNG出力でも完全なアルファチャンネルを使ってその透明度を保持します。SVGに白や色付きの背景の長方形が明示的に含まれている場合は、それもPNGに反映されます。透過が必要な場合は、SVGエディターで削除してください。
SVGのアップロードにファイルサイズの上限はありますか?
10 MBまでのSVGファイルに対応しています。ほとんどのSVGファイルははるかに小さく、数千のパスを含む複雑なイラストでも、通常は1 MBを大きく下回ります。非常に大きなSVGを高解像度で出力すると、ラスタライズに時間がかかる場合がありますが、ほとんどのファイルは2秒以内に変換されます。
変換したPNGを商用利用できますか?
当社の変換ツールは、出力したPNGの利用方法を一切制限しません。商用利用も全面的に認められています。ただし、元のSVGアートワークの著作権は制作者に帰属します。当ツールの出力ライセンスが対象とするのは変換処理そのものだけで、元のデザインは含まれません。
SVGからPNGへの主な書き出しシーン
ロゴ・ブランド素材
- Wordドキュメントやプレゼンテーションで使うために、会社ロゴのSVGをPNGに書き出す
- 素材ライブラリ用に、ブランドロゴのPNGを複数のサイズで生成する
- ブラウザのタブやブックマークに表示するため、SVGアイコンからPNGのファビコンを作成する
Web・アプリ開発
- インラインSVGに対応していない環境向けに、SVGアイコンをPNGに変換する
- React NativeやFlutterのアプリで使うために、SVGイラストをPNGに書き出す
- SVGテンプレートから、1200×630 pxぴったりのOpen Graphプレビュー画像を生成する
デザイン・印刷
- ベクター形式のアップロードに対応していないプラットフォーム向けに、SVGアートワークをPNGにラスタライズする
- クライアントへの納品用に、FigmaやIllustratorで書き出したSVGをPNGに変換する
- メールマガジンに埋め込むため、SVGベースのインフォグラフィックをPNGに変換する