SVG の余白を切り取るということ

SVG は「枠のついた絵」ではありません。絵と viewBox の組み合わせです。viewBox とは、座標空間のどの部分を表示するかを示す 4 つの数字のことです。

余白はこの 4 つの数字から生まれます。512 × 512 で書き出され、図形が真ん中にあるアイコンには四方に空きがあり、どれだけ縮小してもそれは消えません。ファイルを小さくすれば、余白も一緒に小さくなるだけです。ロゴは相変わらず自分の箱の真ん中に浮いていて、隣の文字とそろってはくれません。

このツールは viewBox だけを変えます。 絵が実際にどこから始まってどこで終わるのかを割り出し、それに合わせて箱を締め、SVG のまま返します。パスも、グラデーションも、グループも同じまま。ただ、それに合った箱に入って出てきます。

コードではなく、絵を見ています

SVG の輪郭を知る素直な方法は、すべての図形の境界ボックスをブラウザに尋ねることです。しかしこの方法は、ごくありふれた 2 つの場面で間違えます。そして、人がこの種のツールを探しに来るのは、まさにその 2 つの場面なのです。

そこでこのツールは、まず SVG を描いてから、その結果を見ます。あなたの目と同じやり方です。白い長方形は「空」と読み、ドロップシャドウは「中身」と読んで残します。見えているものが、そのまま測られます。

透明または白（通常はこちら）—— あなたが「空白」と呼ぶものはすべて消えます。完全に透明なピクセルも、白いピクセルも同じ扱いです。白いアートボードで書き出したアイコンや、白い下地の付いたロゴには、これが向いています。
透明のみ —— 白は絵の一部として扱います。白が本当にデザインである場合に使ってください。白いワードマーク、残さなければならない白い背景、暗いページに載せる前提の絵などです。

許容値は、どのくらい空白に近ければ空白とみなすかを決めます。書き出したファイルは純粋とは限りません。背景が #fefefe だったり、縁がごくわずかに透けていたりします。何も切り取られなければ許容値を上げ、絵の淡い部分が切られてしまったら下げてください。

残す余白は、選んだ量の空間を四方に戻します。単位は SVG 自身の単位、つまり viewBox が使っているのと同じ数字です。

0 にすると可能なかぎり狭い箱になります。ボタンの中のアイコンや、グリッドに並べるロゴのように、間隔はレイアウト側で決めたい場合にはこれが正解です。少し余白を足す価値があるのは、絵に線幅があってぎりぎりの切り取りだと欠けてしまう場合や、この先さらに切り取られる場所へ送る場合です。

SVG に width と height の属性があった場合、箱と同じ比率で、書かれていた単位のまま拡大縮小されます。100 mm のキャンバスの中で 40 mm 幅だった絵は、40 mm 幅のまま出てきます。

これは大事な点です。つまり、切り取っても絵の大きさは変わりません。消えるのはまわりの余白だけです。width も height も無い SVG はそのまま無い状態で返され、置かれた場所に合わせて伸縮し続けます。

ファイルはあなたのブラウザの中で読み込まれ、描かれ、書き直されます。サーバーに届くことはありません。未発表のロゴ、クライアントのブランドマーク、秘密保持契約下の素材なら、これこそが肝心な点です。

アップロード待ちもサイズ制限もなく、ページさえ読み込めばオフラインでも動きます。