アイコンとかに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。

意外と簡単に弄れますね!