SVGをPNGに変換：高解像度・アップロード不要

SVGをPNGに変換する方法

SVGはベクター形式です。図形や文字を描画の指示として記録するため、どのサイズでもくっきり表示されます。Webのロゴやアイコンによく使われます。

PNGは決まったサイズのピクセルの集まりです。SNS、メールの署名、Officeの文書、多くのチャットアプリはPNGを受け付けますが、SVGはほとんど受け付けません。

「サイズ」は、SVGに設定された幅と高さを何倍にするかを決めます。幅と高さが設定されていない場合はviewBoxを使います。下の表は、200×100で描かれたロゴの場合の結果です。

SVGはブラウザが画像を表示するときと同じ方法で描画されるため、中のスクリプトは実行されません。一部の要素は反映されないことがあります。

外部から読み込むWebフォントは使われず、文字が標準のフォントで表示されることがあります。文字の形を正確に残すには、デザインアプリで文字をアウトライン化してください。
URLでリンクした画像は表示されないことがあります。SVGに埋め込んだ画像は表示されます。
アニメーションやインタラクティブなSVGは、1枚の静止画になります。
SVGが何も描いていない部分は透明のままです。白い四角が出る場合は、SVGの中で絵の後ろに白い長方形が置かれています。

変換はブラウザ内で行われます。ファイルはサーバーにアップロードされません。

SVGから高解像度のPNGを作るには？

「変換」をクリックする前に「サイズ」を4×か8×にします。SVGはベクター形式なので、大きなPNGも小さいものと同じくらいくっきりします。

SVGを4KのPNGにできますか？

SVGの元のサイズによります。幅480ピクセルのSVGなら、8×で幅3840ピクセルになり、4Kの幅になります。

幅と高さを数値で指定できますか？

いいえ。「サイズ」で選べるのは1×、2×、4×、8×の倍率だけです。先にSVGの幅と高さを設定するか、近い倍率で変換してからPNGのサイズを変えてください。

SVGをPNGにしても透過は残りますか？

はい。SVGで何も描かれていない部分は、PNGでも透明のままです。

PNGの文字の見た目が違うのはなぜですか？

SVGが埋め込まれていないWebフォントを使っていて、代わりのフォントで表示されている可能性があります。デザインツールで文字をパスに変換してから、もう一度試してください。

変換中にSVGの中のスクリプトは実行されますか？

いいえ。SVGは画像として描画されるので、中のスクリプトは実行されません。