SVG画像を編集して余白を付ける
はじめに
Flutterではデフォルトでたくさんの種類のアイコンを使用することができますが、時には自分が使いたいアイコンが無い場合があります。
そんなとき、以下の素晴らしい記事を参考にウェブ上のフリー素材でカスタムアイコンを作成して利用することができます。
しかし、フリー素材とGoogle Icons（デフォルトで使用できるアイコン）の余白部分の大きさが異なり、一緒に並べると見栄えが悪い問題が起きていました。
これをなるべく簡単に解決することが本記事のモチベーションです。
Flutter関係なくSVG画像の編集にお困りの方の役に立てれば幸いです。
やり方
1. フリー素材(SVGファイル)を用意する
今回はicooon-monoの素材を使用させていただきました。
好きなアイコンを選んで、好きなサイズのSVGファイルをダウンロードします。
2. Figmaでデザインファイルを開く
SVGファイルの加工にはFigmaを利用します。
FigmaはGoogleアカウントもしくはメールアドレスを登録することで無料で利用できるブラウザベースのデザインツールです。
登録／ログインが完了したら、なんでも良いのでデザインファイルを開きます。トップページからだと、右上ボタン「Design file」->「Drafts」クリックで下書きファイルを作成すればよいです。
3. FigmaでSVG画像を加工する
先ほどダウンロードしたSVGファイルをドラッグアンドドロップでデザインファイル上に配置し、任意のサイズの四角形とをグループ化してSVG画像に余白を持たせます（後述）。
さて、Google Iconsのアイコン（24px x 24px）をFigmaにドラッグアンドドロップしてみると、アイコン部分が18px x 18px＝余白が上下左右3pxずつになっていることがわかります。
今回はこのサイズになるように加工します。
手順は以下の通りです。
- 先ほどダウンロードしたSVGファイルをドラッグアンドドロップでファイル上に配置し、サイズを18x18に設定します。
- 画面左上の四角マーク（マウスオーバーで「Rectangle」表示）をクリックし、四角形を描画して 24x24 にサイズ変更します。
- 作成した四角形の色を完全に透過させ、その中央に SVG ファイルを配置します。
- 四角形と SVG ファイルを両方選択した状態で右クリックし、グループとして選択します。
- 画面右の Export で SVG としてエクスポートします。
これでGoogle Iconsと同サイズのSVGファイルに加工できました。
このあとFlutterでアイコンとして使用するには冒頭で引用した記事の手順に従います。
まとめ
今回はSVGファイルを視覚的・直観的かつ無料で編集する方法をご紹介しました。
余白付けるだけだからすぐできるだろ・・・と思っていたのに情報がなかなか見つからず、本記事で紹介した内容が自分的にはサクッとできて気に入っています。
Figmaをもっと使いこなせると楽しそうですね・・・！
Discussion