制作会社さんから支給いただくデザインデータ。
普段はIllustratorだけでなく、Photoshopデータからコーディングすることも多いのですが、
今回は「SVG書き出し」について、実務で少しハマったことを書いてみます。
Illustratorでは普通にできるので、つい同じ感覚で進めたくなるのですが、Photoshopは少し注意が必要です。
特に、文字を含んだSVGでつまずくことが多い印象です。
PhotoshopからSVGを書き出す方法
Photoshopでは、以下の流れでSVGを書き出せます。
① テキストレイヤーをシェイプ化（パス化）
レイヤーを右クリックし、「シェイプに変換」を選択します。
※この時点で文字編集はできなくなるので注意です。
② 書き出したいレイヤーを選択
③ 「書き出し形式」からSVGを選択
ファイル → 書き出し → 書き出し形式
もしくは、レイヤーを書き出しからSVG形式を選択します。
これでSVGデータを書き出すことができます。
ただしPhotoshop以外でも注意が必要な場合があります。
■ 「SVGで書き出せた＝成功」ではない
初期の頃、自分もここでかなりつまずきました。
「SVGで書き出せた！」と思ったのに、実際ブラウザで見るとなぜか文字が変。
それもGoogleで見るとなんともないのにサファリ、スマホだとゴシック体が明朝体になってる…
なんてこともありました。
最初は「バグかな？」と思ったのですが、実は原因は「フォント」でした。
■ 原因は「自分の環境にフォントがない」
Illustrator、XDからSVGを書き出す場合、自分のPC環境や相手の環境に
対象フォントが入っていないと、文字が正しく扱えないことがあります。
その結果、
・別フォントに置き換わる
・明朝体っぽく崩れる
・見た目がデザインと変わる
ということが起きます。
さらに、「SVGファイルだから大丈夫」と思って中身を見ると、
実際にはPNG画像が埋め込まれているだけ、というケースもあります。
例えば、
<image xlink:href=”data:image/png;base64,…”>
という形です。
つまり、SVGファイルの中にPNG画像が入っている状態。
見た目はSVGでも、実体はラスター画像（PNG）なので、
拡大すると荒れたり、中には黒塗りになって全然表示できないなんてこともありました…。
もちろん見た目はSVGでも中身はPNGなので色変更などは無理です。
■ 対応方法は3つ
① デザイナーさんにパス化済みのSVGをお願いする
これが一番確実です。
フォント環境がある側でシェイプ化（パス化）してもらえば、崩れず綺麗に表示できます。
現在は懇意にしているデザイナー様は最初からSVGの画像を添付してくれます。（いつもとても助かってます！🙏）
② PNGで共有いただく
もし対応が難しそうなら、無理にSVGにこだわらず、大きめサイズのPNGでいただくのも現実的です。
特に装飾用途なら、こちらの方がスムーズなことも多いです。
③ 自分でフォントを用意する
方法としてはあります。ただ、モリサワフォントなどは
数万円単位することもありデザイナーが本業でない当方としては、あまり現実的ではない印象です。
デザイナーの方は③の方法が一番の解決策ですね！
■ 最後に
SVG書き出しは、「書き出せた＝OK」ではないことが多いです。
特に文字まわりは、見た目だけで判断せず、パス化されているかまで確認すると安心です。
自分も初期の頃は、
「なんで明朝体になるんだろう…」
「なんで黒塗り画像になるんだろう…」
「Safariのせい？スマホの環境のせい？？」
と結構ハマっていました…。
同じようにつまずいてる方の参考になれば嬉しいです。
