アイコンとかにSVGを使おう！と思ったとき、ダークモードだと縁取りが同化しちゃったり、余白が大きくってキッチリとハマらないとき、あったりしません？今回はサクッと解決する方法を見つけたのでメモしておきます。
今回お借りしたSVGはこちら。
目次
SVGの編集ツール
みんな大好きFigmaを使えば、余白もレイヤーも色も変えれます。
Figma
Figma: The Collaborative Interface Design Tool
Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platfor…
ログインしたら「New design file」をクリック
真っ新なレイヤーが表示されてるので、SVGをドラッグ＆ドロップする。
SVGの余白を削除する
「Layers」を展開するとSVGのレイヤーが見れます。
必要なレイヤーだけ選択します。
右クリックをして「Frame selection」を選択。
すると、最小値のレイヤーが作れます。
あとは右下の「Export」からSVGを選択してExport Frame 1をクリックすればOK
ただ、これだとサイズが固定されてしまいます。
右：加工前
テキストエディタで調整する
ダウンロードしたSVGをテキストエディタで開きます。
width="686" height="754"を削除するだけで完了
これで余白が消えつつ、可変サイズになったので解決！
色を変える
線が黒いとダークモードだと見えづらいので変えていく。
単純に色を変えるなら右から。
ここでグラデーションに変更出来る。
こんな感じ。
あとは先ほどと同じ方法でダウンロードすればOk。
意外と簡単に弄れますね！
