IllustratorでSVG書き出し時に余白を追加する方法

Adobe IllustratorでオブジェクトをSVG形式で書き出した際、デフォルトではオブジェクトの範囲にのみ切り取られ、余白がなくなります。SVGに透過背景を反映し、余白を持たせるにはいくつかの方法があります。本記事では、その方法を詳しく解説します。

SVGに余白を追加する方法

IllustratorでSVG書き出し時に余白を持たせるには、以下の方法を試してください。

① アートボードサイズを調整する

IllustratorでSVGを書き出す際、アートボードサイズがオブジェクトのサイズと一致していると、余白がない状態で書き出されます。そのため、余白を確保するためにアートボードを拡張しましょう。

1. アートボードツール（Shift + O）を選択します。
2. アートボードのサイズを大きくして、オブジェクトの周囲に余白を確保します。
3. 書き出し時に[アートボードを使用]オプションを有効にする。

この方法により、オブジェクトの周囲に均等な余白を持たせることができます。

② 透明な長方形を追加する

アートボードのサイズを変えずに、余白を確保したい場合は、透過の長方形を追加することで解決できます。

1. 長方形ツール（M）を選択し、オブジェクトの周囲に適切なサイズの長方形を作成します。
2. 塗りと線を「なし」に設定し、見た目は透過にします。
3. この長方形をオブジェクトと一緒に選択し、[オブジェクト] → [グループ]でまとめます。
4. SVGとして書き出すと、余白が反映されます。

③ SVGコードを直接編集する

Illustratorで書き出した後、SVGファイルをテキストエディタで開き、viewBox属性を調整することで、余白を追加することもできます。

1. SVGファイルをエディタで開く。
2. viewBox="0 0 width height" の値を変更し、余白を追加する。
3. 例えば、viewBox="-20 -20 width+40 height+40"とすると、四方に20pxの余白が追加されます。

この方法は、細かく余白の調整をしたい場合に有効です。

IllustratorのSVG書き出し設定

適切な設定を行うことで、余白を含めたSVGを書き出すことができます。

• [ファイル] → [書き出し] → [書き出し形式]を選択。
• [SVG]を選択し、[アートボードを使用]を有効にする。
• 詳細設定で[レスポンシブ]のチェックを外し、固定サイズで書き出す。

まとめ

IllustratorでSVGに余白を追加する方法は以下の3つがあります。

• アートボードのサイズを大きくする。
• 透過の長方形を追加する。
• SVGのコードを直接編集する。

用途に応じて適切な方法を選び、余白のあるSVGを書き出しましょう。