Photoshopの画像アセットや書き出し形式で画像を書き出したけれど、テキストの文字間が変わってしまった!
PhotoshopでSVGがうまくかき出せなかったのだか、原因がわからない。
という方むけの記事です。
photoshopでのSVG書き出しについて
svgはwebサイトに配置できるベクターデータを書き出せる形式で、ピンチインなどで表示拡大しても画像が荒れず、大変便利です。
phoshopCC2018では、「画像アセット」、「書き出し形式」でSVG(Scalable Vector Graphics)形式での素材書き出しができます。(「web用に保存(従来)」は非対応)
photoshopでwebデザインのデータを制作しているので、Illustratorなど他のソフトではなく、photoshopでsvg書き出しできるのはありがたい。
ただ、きちんと設定しないとおかしな書き出しになることもあります。
テキストレイヤーでの表示対応もその一つです。
設定を変えないと行間が詰まってしまいます。
例えば、pngで書き出すとこうなのに、

svgで書き出すとこうなってしまいます。

この場合は、テキストレイヤーをシェイプレイヤーに変換すると書き出すことができます。
Photoshopで文字のSVGを書き出すポイント
テキストレイヤーはシェイプレイヤーに変換しないと正しく書き出されません。
テキストレイヤーをシェイプレイヤーに変換する方法
1.テキストレイヤーを選択し、「右クリック」、または、「controlキー+クリック」を押す。
2.選択メニューより、「シェイプを変換」を選択する。

SVGはもともとパスを書き出すための形式であるため、Illustratorでいうアウトライン済みデータのようにパスになっている方が適切なのでしょうね。
また、マスクレイヤーも綺麗に書き出されなかったです。
(マスク前の形で書き出されてしまった)
シェイプレイヤーの色設定でのグラデーションは問題なく表示されました。
photoshopでのSVG書き出しの注意点

シェイプレイヤーに変換すると、テキストレイヤーの場合、再編集できなくなります。
別ファイルに複製してから画像書き出しするか、ファイル保存に気をつける必要があるかなと感じました。
まとめ
その他にもphotoshopでのweb素材作成ではたまに「はう!」となることがあります。
例えばこんな感じです。

しかし、画像アセットは便利ですし、要素の移動時に単位が出たり、どんどん追加機能が出てphotoshopが進化していくことはとてもありがたいです。

参考になれば幸いです。