illustratorでSVGを保存するとid名が文字化けしてしまう

概要

illustratorで作成した画像をsvgで保存する際、
レイヤー 名で設定した文字中のアンダーバーが　”X5F”　と文字化けしてしまい困りました。
対応策は、先に結論を言うと、illustratorで単純にsvg として保存するのではなく、ファイルタブから書き出しを選択しオプションを設定して書き出す、という手法をとることで解消されました。

経緯

illustratorは、デザイナーさんからいただいたデザインを確認する為に開くぐらいの程度しか触ったことありませんでしたが、
仕事でデザイナーさんにこういったsvgを作ってくださいというような指示用サンプルが必要となり、作成する際にid名の文字化け問題に直面した次第です。
なので、本職のデザイナーさんにとったら「そんなの常識だよ」と思われるかもしれませんが、備忘録として残します。

手順

①　svg ファイルをjavascript でグリグリいじりたいので、いじりたいレイヤーごとにレイヤー名を振り分けます。
illustratorではsvgとして書き出す時に、レイヤー名で設定した名前が、svgのid名としてセットされます。

illustratorのレイヤー画面

②　《NGパターン》
illustratorでのsvg保存時、ファイルタブ→別名で保存→ファイル形式でsvgを選択、で保存し、svgファイルをエディタで開くと、id名が下の画像のように文字化けしてしまいます。

svgのid名文字化け

③　《OKパターン》
なので、ファイルタブ→書き出し→書き出し形式を選択し、下の画像のようにオプションを選択してsvgファイルを書き出しすると、問題なくid名が設定されます。

illustratorファイル保存時オプション

最後に

なかなか "X5F アンダーバー 文字化け" などで調べても原因が出てこなかったので、ブログに残しました。
誰かの役に立ちますように。