SVGを画像に書き出してピクセルが要る場所に使う

SNSのプレビュー、スライド、古いアプリはSVGを拒否することがあります。選んだ倍率でPNGに変換し、ラスタ化で失うものも把握します。

このガイドで使う道具

やりたいこと

ベクターのSVGはWebでは理想的ですが、SNSのプレビュー画像・PowerPointへの貼り付け・一部のCMS・チャットのサムネイルなど、受け付けない場所が多くあります。適切な解像度のPNGにするのが定番の対処です。

倍率の選び方

ちょうど1倍ではなく2〜4倍で書き出すのが安全です。200×80と定義されたロゴを3倍で出すと600×240になり、高精細画面でもにじみません。出力サイズを決めるにはSVGにwidth/heightまたはviewBoxが必要です。

  • 透過を保つにはPNGかWebPで背景を透過にします。
  • ファイルを小さくしたい・写真を含む場合はJPGで、透過部分は白になります。

失われるもの

ブラウザはSVGを静止画像として描きます：中のスクリプトは動かず、外部画像やWebフォントへの参照は読み込まれず、解像度非依存でもなくなります。原本はSVGのまま保管し、変更したら書き直してください。