SVG を透過 PNG に変換する方法

デザインと実装の受け渡しで崩れにくい、実務向けの変換フローです。

透過 PNG の失敗は viewBox、背景レイヤー、エッジのアンチエイリアスが原因になることが多いです。この手順で安定化できます。

1) 変換前に SVG を整える

  • viewBox を確認し、不要にキャンバスを広げる要素を削除する。
  • 不要な白背景レイヤーを取り除く。
  • 可能な範囲で図形とストロークをピクセルに合わせる。

2) 書き出し設定を揃える

  • 背景は transparent を選び、プレビューで確認する。
  • 用途に応じて 1x/2x/3x を使い分ける。
  • ファイル名規則を統一して受け渡しを安定化する。

3) 最終 QA を行う

  • 明暗両方の背景で白フチを確認する。
  • 必要なら余白を追加してクリッピングを回避する。
  • 出力サイズが仕様通りか確認してから公開する。

透過 PNG FAQ

白い背景が残るのはなぜ?
SVG 内に背景レイヤーが残っているか、書き出し背景が透明でない可能性があります。
エッジのにじみを減らすには?
ピクセル整列と適切な倍率設定(例: 2x)が有効です。
最適化は変換前と後、どちら?
通常は変換前がおすすめです。構造を整えてから書き出す方が安定します。
透過 PNG は常に JPG より良い?
透過が必要な UI 素材では有利です。透過不要なら JPG の方が軽い場合があります。