SVG viewBox 自動トリミング・調整ツール｜不要な余白を削除して最適化

SVGコードを貼り付けるだけで、描画内容にぴったり合うようにviewBoxを自動計算し、不要な余白をトリミングするオンラインツールです。Illustratorなどから書き出したSVGに意図しない空白が含まれて表示が崩れる、アイコンのアライメントがずれるといった問題を解決します。

💡 ツール概要

このツールは、SVGのviewBoxを描画コンテンツの境界に正確にフィットさせることで、SVGアセットの取り扱いを容易にします。手動での面倒な座標計算は不要です。

• viewBoxの自動最適化: SVG内の全描画要素を囲む最小矩形（バウンディングボックス）を算出し、最適なviewBox属性値を自動で設定します。
• 不要な余白の削除: グラフィックソフトのアートボードサイズに起因するSVG周辺の不要な余白（空白領域）を完全に除去します。
• レスポンシブ対応: 固定サイズのwidthとheight属性を削除し、CSSでサイズ指定が容易なレスポンシブSVGに変換します。
• リアルタイムプレビュー: 編集結果が即座にプレビューに反映されるため、変更内容を視覚的に確認しながら作業できます。
• セキュアな処理: 入力されたSVGデータはサーバーに送信されず、すべてお使いのブラウザ内でのみ処理されます。

🧐 よくある質問

Q. viewBoxとは何ですか？

A. SVGが表示される領域（ビューポート）のうち、どの部分を切り取って表示するかを指定する属性です。"min-x min-y width height"の形式で定義され、SVGコンテンツのスケーリングやアスペクト比を制御する重要な役割を持ちます。この値をコンテンツのサイズに正確に合わせることで、意図しないズレや余白を防ぐことができます。

Q. なぜwidthやheight属性を削除するのですか？

A. viewBoxが設定されていれば、widthとheight属性を省略することでSVGは親コンテナのサイズに応じて可変（レスポンシブ）になります。これにより、CSS（例: width: 24px; height: 24px;）でのサイズ制御が容易になり、様々な場面でアイコンなどを再利用しやすくなるというメリットがあります。

📚 SVG viewBoxの豆知識

このツールは、SVG要素の幾何学的な境界を取得するgetBBox()メソッドを利用してviewBoxを計算しています。このメソッドは、要素の塗り（fill）の範囲は正確に計算しますが、ストローク（stroke）の太さは計算に含まれないという仕様上の特徴があります。

そのため、太い線を持つアイコンの場合、線の半分が計算されたviewBoxの外側にはみ出してしまう可能性があります。このようなケースでは、本ツールで算出した値をベースに、手動でviewBoxの各値を微調整して少しだけ余白（padding）を追加すると、より正確な表示が得られます。例えば、stroke-width="2"なら、xとyを1減らし、widthとheightを2増やすといった調整です。