Photoshop CC 2019でパスを含めたSVGの書き出し

ただ単純にシェイプにすればいいって話なんですけど

スマートオブジェクトを普通にレイヤーを右クリして「書き出し形式」を押してSVG書き出しをすると画面には何も映ってないけど、書き出せば一応SVGになる。（なった）
ただ、それだとdata:img/png;base64〜の形式になってしまい、CSSとかで操作できなくて困るなって思った。

なんとか出来ないかなって気になったのでちょっとテストしてみた。

まずは背景を透過したpng画像をphotoshopに読み込ませる。

1. svgにしたい要素のレイヤーを1つにまとめる（結合)
レイヤーが複数ある場合にはまず1つのレイヤーにまとめる必要がある

2. commandを押しながらレイヤーをクリックして要素を選択範囲にする

3. パスパネルを開いて、Optionを押しながら「選択範囲から作業用パスを作成」を押す
「選択範囲から作業用パスを作成」はCC2019だと左から4番目

4. 許容値を聞かれるのでひとまずOKを押す
許容値が大きいほど、パスが滑らかになるのでsvgにする要素と相談

5. 作業用パスが生成されるので、クリックしてアクティブにする

6. 「レイヤー」から「新規塗りつぶしレイヤー」→「ベタ塗り」を選択する

7. レイヤー名などを入力して「OK」を押す。OKを押した後にベタ塗りの色をRGBで聞かれるので入力する

8. レイヤーに入力した名前のシェイプが出来ているので、シェイプを右クリックして「書き出し形式」を押す

9. ファイル設定の形式の中の「SVG」を選び、書き出したいところに書き出す。おわり！
書き出されたsvgをエディタとかで開くとdata:img/png;base64〜の形式ではなく、パスの形式になっている（はず）