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が進化していくことはとてもありがたいです。
参考になれば幸いです。
