SVG完全に理解した（）

年始から会社でフロントエンドエンジニアに復帰しました（直近2年半くらいはUnityでuGUI実装してたのでコード一切書いてなかった）。

久々のフロントエンド（というかマークアップ）実装、ブランクありすぎて何も覚えてなくて実務中調べながら対応したけど、老人は書き留めておかないとまたすぐ忘れるのでとりあえず書きました。
個人的備忘録なので、気が向いたら消すか後で清書します。

HTMLに埋め込む

単純にグラフィックツールからSVGコードコピーしてHTMLに貼り付ければいいだけなんだけど、レイヤー構造やデータの作りを綺麗にしておかないと、やたらpath idが増えたり、コード内に「レイヤー1」「レイヤー1のコピー」みたいなのが入って超ダサいので、あまりよくわかってないデザイナーと組む時はコーダーが構造から直した方が多分早い。
文字列入りの図形とかじゃなく、マテリアルデザインアイコンみたいな単純な図形なら、複合パスにするとコードが無駄に長くならない気がする。
ちなみに色を変える時はCSSから内部プロパティにアクセスして変更可能。

CSSにBase64コードとして読み込む

Background-imageに設定したいならこれしか方法がない…というか、画像として出力したものを普通に指定しても表示できるけど、恩恵がほぼなくなる（fillやopacityにアクセスできない）ので、それだとSVG使う意味があんまりない。
url()に指定するときはSVGコードをエンコードしてBase64化しないといけないんだけど、グラフィックツールではやってくれない（XDのプラグインとかにはありそう（まだ探してない））ので、JSのencodeURIComponentで自力で変換する構造を作るか、Web上にたくさんツールがあるのでひとまずはそれを使っても良いと思う。
色や透明度を変えたい時はエンコードされたコード内から探して直接書き換えるが、エンコードしてあると探すの超大変。
でも書き方を工夫すると読みやすい形にできるっぽい。

SVG Background Imageの色をCSSで変える方法

追記
XDだったらプラグインとかなしでBase64で出力できるっぽい
　=> 2021.01.17 13:55さらに追記
　　  さっき試したらできませんでした！なんなの。

CSSに画像として読み込む

maskとして使うなら画像として出力して使う。
この場合、fillをnoneにして出力するとマスクがかからないので、fillは必ず設定する。色はなんでもいいっぽい（黒でも白でも表示できた）。