SVGをPNGに一括変換するときのサイズ、余白、透過背景の決め方
一括変換でPNGのサイズや位置がバラバラにならないように、SVGのviewBox、余白、透過背景、命名ルールを整える方法を解説します。
あらゆるSVGファイルを高解像度の鮮明なPNGに変換。透過背景デフォルト対応、処理はすべてブラウザ内で完結します。
Advertisement
PNGは最も互換性の高いラスタ形式です。SVGがそのまま使えない次のような場面では、変換が最適な解決策になります:
SNS、アプリストア、チャットツール、多くのCMSのメディアライブラリはPNGのみ対応でSVGは投稿できません。ベクター画像をPNGに変換すればどこでも使えます。
PNGは完全なアルファ透明をサポートしています。ロゴやアイコンはどの背景の上でも、白い箱やにじみのないクリーンなエッジで表示されます。
SVGは無限に拡大縮小できますが、PNGは固定解像度です。必要なサイズ(Retina向けの2倍・4倍)で再レンダリングするため、書き出したPNGもくっきりしたままです。
品質と速度を両立する、完全クライアントサイドの変換エンジン:
SVGのレンダリングとラスタライズはブラウザ内で完結。サーバーへのアップロードは一切ないため、機密性の高いデザインでも安全に変換できます。
元サイズ・512px・1024pxのほか、幅・高さを最大4096pxまで自由に指定可能。アスペクト比はロックされるので歪みません。
CSS変数・外部フォント・フィルター・draw.ioのforeignObjectも正しく処理。単純なアイコンだけでなく複雑なSVGも変換できます。
変換回数の制限はありません。登録も日次クォータも不要で、出力に透かしを入れることもありません。
.svgファイルを変換ボックスにドラッグ&ドロップ、クリックしてアップロード、または Cmd/Ctrl+V でSVGコードを直接貼り付けます。
元サイズ・512px・1024px・カスタムから選択します。透過背景がデフォルトで、必要に応じて単色へ変更も可能です。
「PNGをダウンロード」をクリック。ファイルはブラウザ内で生成され、すぐにデバイスへ保存されます。
はい。PNGはデフォルトで透過背景で出力されます。SVG内に背景の矩形がある場合はそちらは保持され、透過になるのはベクターグラフィックの背後のキャンバス部分です。
SVGの元サイズのほか、512px・1024px・最大4096pxまでのカスタム幅・高さで書き出せます。SVGはベクター形式のため、拡大時も引き伸ばしではなく再レンダリングされ、鮮明さが保たれます。
いいえ。変換はすべてCanvas APIを使いブラウザ内で完結します。ファイルが端末の外に出ることはないため、機密性の高い素材でも安心です。
主な原因はviewBoxの欠落、外部フォントや画像への依存、埋め込み時のMIMEタイプの設定ミスなどです。対処法の全リストは「SVGが表示されない原因と対処法」ガイドをご覧ください。
SVGはベクター形式で、無限に拡大縮小でき、単純な図形なら軽量で、デザインツールで編集できます。PNGはラスタ形式で、解像度は固定ですが互換性が最も高い形式です。プラットフォームやアプリがSVGを受け付けない場合はPNGに変換しましょう。
はい。「SVGをPNGに一括変換」ツールを使えば、複数ファイルの連続変換、統一サイズ指定、進捗バー表示に対応しています。
一括変換でPNGのサイズや位置がバラバラにならないように、SVGのviewBox、余白、透過背景、命名ルールを整える方法を解説します。
ロゴ、写真、スクリーンショット、透過画像、Web用画像で、PNG、JPG、WebP、AVIFのどれを選ぶべきかを実用的に解説します。
SVG書き出しで起きるフォント置き換え、外部画像の欠落、filterの違い、maskやclipPathの失敗を実用的に確認します。