最近、Illustratorで書き出した文字を含むSVGデータをサイトに貼り付けると、

文字として認識されてライブサイトでテキストとして選択できるようになる現象を確認しました。

お客様のサイトで“文字化けしている”との報告を受け、確認してみるとSVGのパーツとして追加したにも関わらず、勝手に（しかも文字列ではなくバラバラに）文字に変換されていたのです。

この現象を再現したテストサイトを作りましたのでご確認いただければと思います。

1番上のパーツは文字ごとに分解され、

2番目のパーツはsvgとして認識されており、

3番目のパーツは"Instagra"、"m"、"やってます"のセットに分解されて文字として変換されています。

1番目のパーツは勝手に文字変換されたことによって、スマートフォンによっては意図しないフォントになってしまい、JPEGまたはPNGに書き出し直してサイトに貼り付けなければなりませんでした。

3番目のパーツの場合、自分の環境では正常に表示されたのですが、お客様の環境では文字化けしてしまう現象が発生しました。

2番目のパーツが正常に表示されることから、水平な文字が含まれるSVGデータが餌食になるのではと考えています。

他にこの現象に遭っているパートナーさんはいらっしゃいますでしょうか？

私の動作環境は以下のとおりです。

macOS 12.4 Intel

Google Chrome 103.0.5060.53

********************************************

7月13日更新

SVGデータが文字に変換される挙動ですが、W3CのドキュメントにSVG textという、SVGにテキストを含んだ記述出来る仕様がある旨の回答を頂きました。これがIllustratorでSVGを書き出した際に含まれていたために発生していたようです。

llustratorで書き出す際にフォント: アウトラインに変換を選択してあげれば解決しました。