SVGの周囲の余白をクロップ・削除
SVGファイルをドラッグ＆ドロップ、点線枠内をクリックしてファイル選択、またはCmd+Vでコードを直接貼り付け。
なぜSVGの余白をクロップする必要があるのか？
デザインツールから書き出したSVGには不要な透明キャンバスが含まれていることが多く、レイアウト崩れや容量増大の原因になります。
Web・アプリでのレイアウトずれを解消
FigmaやIllustratorから書き出したアイコンの不要な余白をカットし、FlexboxやGridでの中央揃えを正確にします。
ViewBoxとCSSスケーリングの最適化
CSSでwidthやheightを指定した際、無駄な余白ボックスを生成せず正しく拡大縮小されるよう調整します。
アイコンライブラリの標準化
チーム全体のベクター素材を余白ゼロまたは統一パディング（例：2px）に正規化し、デザインシステムの品質を高めます。
ベクター処理に特化した高度な機能
ブラウザのSVG DOMアルゴリズムを活用し、精確にViewBoxを再構築します。
スマートバウンディングボックス計算
ブラウザ原生API (getBBox) により、線幅やテキストの端点まで正確に検出します。
パディング（余白）の調整
0pxから50pxまでスライダーで調整可能。太いストロークやシャドウがカットされるのを防ぎます。
100% ローカル処理で安全
全ての処理はブラウザ内で完了するため、大切なSVG素材が外部サーバーに送信されることはありません。
2画面リアルタイム比較
透明チェッカーボード背景上で元画像とクロップ後画像を並べて比較できます。
SVGクロップの3ステップ
1. SVGを読み込む
ファイルをドラッグ＆ドロップするか、SVGコードを直接貼り付けます。
2. パディングを調整
必要に応じてパディングスライダーを動かし、リアルタイムで効果を確認します。
3. コピーまたは保存
「コードをコピー」で即座に貼り付けるか、SVG / PNGファイルとしてダウンロードします。
よくある質問 (FAQ)
いいえ。本ツールは非破壊的に根元の viewBox 属性のみを再設定するため、内部の <path> やグループ構造は100%保持されます。
いいえ。計算処理時に stroke の太さも考慮されます。さらに余裕を持たせたい場合はスライダーで 2px〜4px のパディングを追加してください。
はい。標準的なW3C規格に準拠したSVGとして出力されるため、Figmaや各種Webフレームワークで問題なく使用できます。
最新記事
すべて表示 →SVGをPNGに一括変換するときのサイズ、余白、透過背景の決め方
一括変換でPNGのサイズや位置がバラバラにならないように、SVGのviewBox、余白、透過背景、命名ルールを整える方法を解説します。
PNG、JPG、WebP、AVIFの違いと選び方
ロゴ、写真、スクリーンショット、透過画像、Web用画像で、PNG、JPG、WebP、AVIFのどれを選ぶべきかを実用的に解説します。
SVGのフォント、外部画像、filterが書き出しで失敗する理由
SVG書き出しで起きるフォント置き換え、外部画像の欠落、filterの違い、maskやclipPathの失敗を実用的に確認します。