Advertisement
SVGをPNGに変換するとぼやける原因と直し方
SVGからPNGへの書き出しがぼやけるときの確認ポイント。サイズ、表示倍率、viewBox、1px線、フォント、透過背景を順番に見直します。
SVGファイルやコードを、必要なサイズのPNGに変換。透過背景に対応し、元ファイルをアップロードせずに書き出せます。
Advertisement
SVGを受け付けないサービスで画像を使いたいときや、決まったピクセル寸法が必要なときにPNGへ書き出せます。
SVGを直接アップロードできないサービスでも、PNGなら利用できる場合があります。投稿先が指定する画像形式・寸法・容量を確認してください。
背景を「透明」に設定すると、SVGの透明部分をPNGに残せます。SVG内に描かれた白い矩形や不透明な背景は自動では消えないため、必要なら元のSVGを編集してください。
SVGは解像度に依存しませんが、PNGのピクセル数は固定です。実際の表示サイズ、または高密度画面向けの2倍サイズで出力すると、後からビットマップを拡大せずに済みます。細い線、フォント、フィルター、埋め込み画像は仕上がりに影響する場合があります。
サイズと背景を指定し、書き出す前に表示や互換性を確認できます。
変換はブラウザー内で行います。外部画像やフォントを参照するSVGでは、互換処理中に参照先へ通信する場合があります。
元のサイズ、512px、1024pxのプリセット、幅・高さの指定を選べます。PNG出力は各辺最大4096pxです。縦横比を固定すると、幅や高さを変える際の変形を防げます。
CSS変数、外部リソース、フィルター、foreignObjectを変換前に検出します。取得できる素材は可能な範囲で埋め込み、端末にないフォント、読み込めない画像、未対応のHTMLがある場合は警告します。内容が省略されたり、元の表示と異なる場合があります。
変換回数の制限はありません。登録も日次クォータも不要で、出力に透かしを入れることもありません。
.svgファイルをドロップするか、クリックして端末から選択します。「SVGコードを貼り付け」からコードを入力することもできます。パソコンではCmd/Ctrl+Vにも対応しています。
出力サイズを選びます。透明部分を残す場合は背景を「透明」にし、色を付ける場合は単色を選びます。縦横比の固定状態も確認してください。
プレビューを確認してPNGのダウンロードボタンを押します。画像はブラウザー内で生成されます。保存したPNGも、実際に使用するサイズで確認してください。
背景を「透明」に設定すると、元のSVGの透明部分を保持できます。初期設定は透明です。SVG内に描かれた背景の矩形は残るため、白い背景を取り除きたい場合は元のSVGを編集してください。
512px・1024pxのプリセットや、各辺最大4096pxのカスタム寸法を指定できます。「元のサイズ」でも、この上限を超える寸法は縮小されます。ベクター図形は出力サイズで描画しますが、埋め込み画像の細部は増えません。細い線や文字は実際の使用サイズで確認してください。
元のSVGを当サイトの変換サーバーへアップロードすることはありません。外部画像やフォントを取得するために通信する場合はあります。通信を避けるには、画像を埋め込み、文字をアウトライン化したSVGを用意してください。
表示範囲を指定するviewBox、白い図形と背景の組み合わせ、外部画像やフォントへの依存を確認してください。互換性の警告が出た場合は内容を確認し、必要に応じて文字をアウトライン化したり、画像を埋め込んだりします。
SVGは図形やパスを記述するベクター形式です。PNGはピクセル数が固定された画像形式で、透明度と可逆圧縮に対応しています。SVGを扱えないアプリで使う場合はPNGに変換し、編集や再出力に備えて元のSVGも残してください。
一括変換ツールで、最大10個のSVGを同じ設定で変換し、ZIPで保存できます。このページでは1ファイルずつ処理します。
このツールが出力するのは1枚の静止画像です。SVGのアニメーションや操作時の動作は引き継ぎません。特定の場面を保存したい場合は、事前に静的なSVGとして用意してください。
SVGからPNGへの書き出しがぼやけるときの確認ポイント。サイズ、表示倍率、viewBox、1px線、フォント、透過背景を順番に見直します。
ロゴ、写真、スクリーンショット、透過画像、Web用画像で、PNG、JPG、WebP、AVIFのどれを選ぶべきかを実用的に解説します。
一括変換でPNGのサイズや位置がバラバラにならないように、SVGのviewBox、余白、透過背景、命名ルールを整える方法を解説します。