SVGをPNGに一括変換するときのサイズ、余白、透過背景の決め方
一括変換でPNGのサイズや位置がバラバラにならないように、SVGのviewBox、余白、透過背景、命名ルールを整える方法を解説します。
Jack2026/6/30
SVGの周囲にある余白を削除
SVGファイルをドラッグ＆ドロップするか、クリックして選択します。SVGコードはCmd+Vで貼り付けられます。
SVGの余白を削除する理由
デザインツールから書き出したSVGには透明な余白が含まれることがあり、配置や見かけのサイズに影響します。
Web・アプリでのレイアウトずれを解消
FigmaやIllustratorから書き出したアイコンの不要な余白を削除し、FlexboxやGridで中央に配置しやすくします。
CSSで指定したサイズに合わせやすくする
CSSでwidthやheightを指定したときに、余白の影響を受けずに拡大縮小できるようviewBoxを調整します。
アイコンライブラリの標準化
チーム全体のベクター素材を余白ゼロまたは統一パディング（例：2px）に正規化し、デザインシステムの品質を高めます。
SVGの余白調整に必要な機能
ブラウザのSVG DOM APIを使い、図形の範囲に合わせてviewBoxを正確に調整します。
図形の範囲を自動検出
ブラウザ標準のgetBBox APIを使い、図形やテキストが占める範囲を検出します。
パディング（余白）の調整
0pxから50pxまでスライダーで調整できます。太い線や影が途中で切れないように余白を追加できます。
ブラウザ内でローカル処理
すべての処理はブラウザ内で完了するため、SVGファイルが外部サーバーへ送信されることはありません。
変更前後を並べて比較
透明チェッカーボード背景上で元画像とクロップ後画像を並べて比較できます。
SVGクロップの3ステップ
1
1. SVGを読み込む
ファイルをドラッグ＆ドロップするか、SVGコードを直接貼り付けます。
2
2. パディングを調整
必要に応じてパディングスライダーを動かし、プレビューで余白を確認します。
3
3. コピーまたは保存
「コードをコピー」から別の編集画面へ貼り付けるか、SVG / PNGファイルとしてダウンロードします。
よくある質問
図形自体は変更せず、ルート要素のviewBox属性を再設定します。内部のpathやグループ構造はそのまま残ります。
いいえ。計算処理時に stroke の太さも考慮されます。さらに余裕を持たせたい場合はスライダーで 2px〜4px のパディングを追加してください。
はい。出力したSVGはFigmaなどのデザインツールやWebプロジェクトへ読み込めます。利用先によって対応するSVG機能が異なるため、読み込み後の表示も確認してください。
最新記事
すべて表示 →PNG、JPG、WebP、AVIFの違いと選び方
ロゴ、写真、スクリーンショット、透過画像、Web用画像で、PNG、JPG、WebP、AVIFのどれを選ぶべきかを実用的に解説します。
Jack2026/6/30
SVGのフォント、外部画像、filterが書き出しで失敗する理由
SVG書き出しで起きるフォント置き換え、外部画像の欠落、filterの違い、maskやclipPathの失敗を実用的に確認します。
Jack2026/6/30