SVG を指定ピクセルサイズで PNG に変換する
スライド、レガシー CMS、ベクターを嫌うメールクライアント向けにアイコンやイラストをラスタライズ。機密パスデータもブラウザ内で処理できます。
このガイドと一緒に使うと便利なツール：
なぜ重要か
多くのメールクライアントはインライン SVG をブロックします。レガシー CMS は PNG サムネのみです。プレゼンに巨大 SVG を貼ると重くなります。2×・3× の PNG は依然として互換の逃げ道です。ブラウザ内ラスタライズならロゴのパス情報を外面に流しません。
実際の3つのシーン
透明背景の 512 / 1024 px 正方形などを書き出します。
色が安定
モダン形式と同じ SVG マスターから寸法を揃えた PNG を用意します。
旧ブラウザをフォールバック
Figma からの SVG を一度ラスタライズしてドキュメントへ。
Office 互換
手順
SVG→PNGを開きます。
.svg をアップロードまたは貼り付け
巨大な埋め込み
<image>には注意します。出力の幅・高さを指定
Retina では CSS ピクセル ×
devicePixelRatioを目安にします。背景の透過またはベタ塗り
細線アイコンは透過、白紙前提ビューアには敷き詰めも検討します。
ギザギザを確認
細い斜線でモアレが出たら解像度アップやパス簡略化を。
PNG をダウンロード
logo@2x.pngのような命名でキャッシュ戦略と整合させます。
実践のヒント
- モダン Web は依然 SVG 優先、PNG は互換レイヤーです。
- フィルタが強い SVG はエンジン差があるので複数ブラウザで確認。
- ファビコン多解像度は SVG→ICO と組み合わせます。
よくある落とし穴
よくある誤り
リモートフォント欠落
オンラインフォント前提のテキストはアウトライン化してからラスタライズします。
よくある誤り
巨大パスのパフォーマンス
複雑なイラストはタブが固まることがあります。レイヤー分割や単純化を先に。
よくある誤り
印刷 CMYK
ブラウザ出力はディスプレイ向け RGB。印刷は別ラインです。
向いていない用途
- CI のヘッドレス書き出し：Linux コンテナでは resvg / sharp が再現性高いです。
- スプライトシートのパッキング：余白とビンパッキングが別問題です。
- SMIL/CSS アニメ SVG：フレーム抽出や動画経路を検討します。
FAQ
アップロードはありますか？
ローカル処理です。パスが機微でもオフライン確認がしやすいです。
@1x と @2x をすばやく
二度書き出してすぐリネーム。キャッシュ衝突に注意します。
PNG が SVG より大きい
写真級グラデーションはラスタが膨らみます。幾何ロゴこそベクター向きです。