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