盲点だった！PhotoshopでSVGに書き出しする際の注意点
最近アイコンやキービジュアルのタイトルやロゴなど、色んな所でSVGを使用する機会が多くなりましたね。レスポンシブには特に効果的で、JPG、PNG形式のアイコンなどは最近ほぼ使用しなくなりました。
しかしながらとある部分でコーダーから指摘を受けたのです。
「ロゴに変な黒場が出来てしまうんですが…」
ん？どゆこと？ちゃんとシェイプレイヤー化してたんだが…。
スクリーンショット画像を見るとそこには…
そこでどんな現象が起きているのかスクリーンショットした画像を送ってもらうと…。
※現象を再現した記事用の画像を用意しています。
確かに変な黒場がロゴに出てます。しかも薄っすら赤い縁みたいなものも。ちなみに画像のロゴはフォントを使用しており、ちゃんとPhotoshopでシェイプレイヤー化しています。選択ツールで選択してみるとちゃんとパス化されているのも確認済みです。
ではなぜこのような現象が起こっているのでしょう。
原因はパスの重なり
今回のロゴは単語の間が筆記体で連なってる部分があります。そこでPhotoshopのデザインデータの連なっている部分を見てみると…
なんと「パスが重なっている」ではありませんか！（cv加藤みどり）
今回の黒場の原因はこのパスの重なりが原因のようです。マスクされて抜かれてるみたいですね。
そこでシェイプレイヤーを選択し、「シェイプコンポーネントを結合」をしてみると…
パスが結合され重なっていたパスが無くなりました！これで問題なくキレイに出力されました。
が、まだ変な縁の件が残っています。
縁取りの原因は地のカラー設定だった
こちらも調べてみると、今回白色は「カラーオーバーレイ」で設定しています。カラーオーバーレイは元の色（地色）の上から上塗りしている状態です。
そこで地色を調べてみると…やはり赤が設定されていました。これが原因のようです。そこでシェイプレイヤーの塗りを0%にして地色を消してみると…
赤の縁取りが消えてキレイにブラウザで出力されました！
最後に
今まで筆記体（パスの重なり）を使用したロゴをSVG化させたことが無かったのでこれは盲点でした。地色の件も、たまたま今まで上手く言ってただけで、今回この問題に気づけて良かったです。
皆さまの中で同じような経験された方のご参考になれば幸いです。