SVGの図をPNGに変換して、ベクターが使えない場所で使いましょう。SNS、メール、文書、アプリ、写真編集ソフトなどです。幅をピクセルで選べば、そのサイズのくっきりした画像を、透明な背景のまま受け取れます。無料で、登録不要、透かしも入りません。
SVGをPNGに変換する方法
- SVGファイルを1つ以上選びます（一度に最大20個）。
- 幅をピクセルで入力するか、空欄のままにしてSVG本来のサイズにします。
- 「PNGに変換」を押します。
- PNGをダウンロードします。複数のファイルを変換した場合は、すべてをまとめたZIPになります。
ベクターとピクセル
SVGはピクセルではなく、線、曲線、図形、色といった描画の命令を保存しています。そのため、どれだけ拡大しても常にくっきり見えます。ただ、SVGを受け付けない場所はたくさんあります。SNS、多くのメールソフト、写真編集ソフト、アプリストア、「普通の」画像しか受け付けないサービスなどです。
PNGに変換すると、SVGは決まったサイズで一度だけ描かれます。それ以降はピクセルの画像なので、あとで拡大するとぼやけます。そのため、変換するときにサイズをよく選ぶことが大切です。
幅の選び方
- 空欄（初期値）：SVG自体が
widthとheightの属性、またはviewBoxで指定しているサイズです。 - ウェブサイトのロゴ：高精細な画面でもくっきり見えるよう、表示するサイズの2倍にします（200ピクセルで表示するロゴなら400ピクセル）。
- SNSやプレゼン：たいてい1000〜2000ピクセルで十分です。
幅は16〜8192ピクセルの範囲で自由に選べます。高さは縦横比を保つよう自動で計算します。
残るものと残らないもの
- 残るもの：透過、グラデーション、マスク、SVGファイル自体に埋め込まれた画像。
- 外部のリソースは読み込みません：セキュリティのため、ファイルの外にある画像、フォント、スタイルシートへのリンクと、スクリプトはすべて取り除きます。PNGに何か欠けている場合は、SVGを書き出すときにそのリソースを埋め込んでください。
- 文字は、当サイトのサーバーにあるフォントで描きます。特別な書体を使っている場合は、SVGを書き出す前に文字をアウトライン（パス）にしておくと、まったく同じに見えます。
- アニメーションと操作：PNGは静止画なので、SVGの最初の状態を描きます。
制限事項
- 圧縮されたSVG（
.svgz）には対応しておらず、XMLエンティティを含むファイルはセキュリティ上の理由で受け付けません。 - 結果は100メガピクセルまでです。
- 一度に最大20個、1ファイルあたり20 MB、合計100 MBまで。
よくある質問
PNGはどのくらいの大きさになりますか？
幅を空欄にすれば、SVG本来のサイズです。幅を入力すれば、PNGはちょうどその幅のピクセル数になり、高さは図の縦横比を保つよう計算されます。
SVGの透明な背景は残りますか？
はい。SVGの何も描かれていない部分はPNGでも透明のままなので、どんな背景の上にも置けます。
PNGの文字の書体が違うのはなぜですか？
SVGが、ファイルに埋め込まれていないフォントを使っているため、似たフォントで代用されたからです。避けるには、SVGを書き出す前にデザインソフトで文字をアウトラインにしてください。
SVGの画像や要素がPNGに出てこないのはなぜですか？
おそらく、埋め込まれずに外部のファイルにリンクされていたためです。セキュリティのため外部のリソースは読み込まないので、画像を埋め込んだ状態でSVGを書き出せば描かれます。
SVGを高解像度のPNGに変換できますか？
はい。最大8192ピクセルまで、大きな幅を入力してください。SVGはベクターなので、そのサイズで直接描かれ、小さな画像を拡大したときのようにぼやけることなく、くっきりしたPNGになります。