SVGをPNGに一括変換するときのサイズ、余白、透過背景の決め方

SVGをPNGに一括変換する作業は、単に複数ファイルをまとめて変換するだけではありません。大事なのは、変換後のPNGが同じセットとして自然に見えることです。

あるアイコンは余白がなく、別のアイコンは大きな透明余白を持ち、さらに別のファイルには白い背景が入っている。こうした状態で一括変換すると、変換自体は成功しても、PNGの見た目は揃いません。

一括変換の前に、サイズ、余白、透過背景、viewBox、ファイル名のルールを決めておく必要があります。

> 出力するPNGのサイズを先に決める

まず、このグループのPNGを何ピクセルで出力するかを決めます。

よく使われるサイズは次の通りです。

• 24 x 24：小さなUIアイコン
• 32 x 32：ツールバーアイコン
• 64 x 64：機能アイコン
• 128 x 128、256 x 256：大きめのアイコン
• 512 x 512：ストア画像、マーケットプレイス、プレビュー用

ここでいうサイズは、PNGファイル全体のキャンバスサイズです。図形そのものがキャンバスいっぱいに広がる必要はありません。64 x 64のアイコンでも、実際の図形は48 x 48程度で、周囲に余白がある方が自然に見えることがあります。

同じバッチ内で異なる用途のファイルを混ぜない方が安全です。サイズが違うものは、別のグループとして変換しましょう。

> viewBoxを揃える

viewBoxはSVGの座標系と表示範囲を決めます。アイコンセットでは、同じviewBoxを使うのが理想です。

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

または、より大きなアイコンなら次のような形です。

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">

一部のSVGだけviewBox="2 3 19 18"のようになっていると、PNGにしたときに切り抜きや位置がずれて見えることがあります。

変換前に確認したいこと：

• すべてのSVGにviewBoxがあるか
• 同じセット内でviewBoxが揃っているか
• 図形が中央に配置されているか
• 余白が意図したものか
• 図形が表示範囲からはみ出していないか
• 見えない長方形が余白を作っていないか

FigmaやIllustratorなどから書き出す場合は、オブジェクト単体ではなく、同じサイズのフレームやアートボードから書き出すと揃いやすくなります。

> 余白はデザインの一部

アイコンをキャンバスいっぱいに広げれば良いとは限りません。余白がないアイコンは、ボタンやカードに置いたときに窮屈に見えることがあります。

目安は次の通りです。

キャンバス	図形の見た目の範囲	余白の目安
24 x 24	20 x 20	各辺2px程度
32 x 32	26-28 x 26-28	各辺2-3px程度
64 x 64	48-56 x 48-56	各辺4-8px程度
512 x 512	384-448 x 384-448	各辺32-64px程度

数学的なサイズだけでなく、見た目の重さも大切です。円は同じ幅でも四角より小さく見えることがあります。三角形は少し大きめにしないと弱く見えることがあります。

すべてを機械的に同じ境界いっぱいに入れるのではなく、並べたときに自然に見えるかで調整します。

> 透過背景か固定背景かを決める

アイコンやロゴ、UI素材では、透過PNGにするのが基本です。白い背景が入ったままだと、ダークモード、色付きボタン、スライド背景の上で白い四角が見えてしまいます。

SVG内に次のような背景がないか確認してください。

<rect width="100%" height="100%" fill="white" />

これが意図しない背景なら、削除または非表示にしてからPNGへ変換します。

固定背景が必要な場面もあります。

• プレビュー画像として使う
• 透過に対応していない環境へ渡す
• カード型やバッジ型のデザインで背景込みになっている
• JPGとして書き出す

再利用する素材なら、基本は透過背景の方が扱いやすいです。

> 複数サイズは目的を決めて作る

SVGからは簡単に複数サイズのPNGを作れますが、使わないサイズを大量に作ると管理が難しくなります。

UIアイコンなら：

• 24px
• 48px
• 96px

アプリアイコンなら：

• 64px
• 128px
• 256px
• 512px

資料用やWeb用の図なら、実際の表示幅に合わせ、必要に応じて2倍サイズを用意します。

「作れるから作る」のではなく、「どこで使うか」が決まっているサイズだけを出力します。

> ファイル名のルールを決める

一括変換ではファイル数が一気に増えます。名前が曖昧だと、後でどれをアップロードすべきか分からなくなります。

分かりやすい例：

search-24.png
search-48.png
search-96.png
logo-dark-512.png
logo-light-512.png

避けたい例：

search-final-new-2.png
icon_export_copy.png
logo_large_latest.png

背景色違いや透過版がある場合は、ファイル名に含めておくとミスを減らせます。

> おすすめの一括変換手順

安定した一括変換の流れは次の通りです。

1. アイコン、ロゴ、イラストなど用途別に分ける。
2. グループごとに出力サイズを決める。
3. viewBoxと中央揃えを確認する。
4. 不要な背景長方形を取り除く。
5. 透過背景か固定背景かを決める。
6. まず3-5個だけ変換して確認する。
7. 実際のページや資料に置いて見た目を確認する。
8. 問題なければ全体を変換する。

svg2img.ccの一括変換ツールを使う場合も、同じバッチ内では同じ幅、高さ、出力形式にするのがおすすめです。サイズが違う素材は、別バッチに分けた方が結果が安定します。

> 変換後のチェックリスト

PNGを書き出した後は、次を確認してください。

• すべて期待したサイズになっているか
• アイコンが中央に見えるか
• 透過背景が保たれているか
• 意図しない白い四角がないか
• 小さいサイズで線が細すぎないか
• テキストが欠けたり置き換わったりしていないか
• ファイル名から用途とサイズが分かるか

一括変換は便利ですが、元のSVGが揃っていなければ、出力PNGも揃いません。変換前にルールを決めることが、一番の時短になります。