PNGが必要になるとき
SVGはWebサイトでは便利ですが、文書作成ソフト、メッセージアプリ、SNS、プレゼン資料など、SVGを入れられない、または正しく表示されない場所がたくさんあります。PNGにすればほとんどのアプリで使え、透過背景もそのまま保たれます。
解像度の選び方
SVGには決まったピクセル数がないため、PNGにするときに何倍で描くかを決めます。解像度で1倍を選ぶとSVGに書かれたサイズのまま、2倍を選ぶと幅と高さが2倍の画像になります。
- Webページやメッセージアプリ: 1倍〜2倍で十分です。
- Retinaなどの高解像度ディスプレイ、プレゼン資料: 2倍〜3倍がおすすめです。
- 印刷物に入れる画像: 3倍〜4倍で作り、必要なサイズは印刷用の解像度ガイドを参考にしてください。
正確なピクセルサイズが必要なら、最大幅・高さに数字を入れてください。縦横比を保ったまま、その中に収まるように縮小します。
SVGが崩れて見えるとき
SVGが外部のフォントや画像ファイルを読み込むようになっていると、PNGではその部分が抜けたり、標準のフォントで表示されたりすることがあります。デザインアプリで書き出すときは、文字をアウトライン化し、画像はファイル内に埋め込むよう設定してください。