【illustrator】SVG画像が文字化けしたりフォントが変わる時の対処法

という方に向けて「illustratorで作ったSVG画像が文字化けする時の対処法」をまとめました。

SVG画像が文字化けしたりフォントが変わる時の対処法

illustratorでこのようにベクター画像を作成したとします。

これをSVG画像として貼り付けると…

あらら…文字化けしてフォントが明朝体になっちゃってますね。ブログ主側でもスマホから見ると文字化けが生じてしまいます。

解決法：アウトライン化する

いきなり結論から。
この文字化けはアウトライン化していないことが原因です。

なのでSVG画像に書き出す際のSVGオプションにて、フォントの項目で「アウトラインに変換」を選択してあげます。

すると…

無事、文字化けを解消できました。めでたし。

アウトライン化とは?

例えばAさんのPCにしか入ってないフォントを使ってイラストを作成したとしても、BさんのPCがそのフォントに対応してない場合表示されませんよね。これが文字化けが生じる理由です。

SVG画像が表示されない場合

余談ですが、先ほどいじったSVGオプションにてスタイルの項目が「内部CSS」に設定されているとSVG画像本体が表示されない場合があります。

「インラインスタイル」に設定しておくのが無難かなと。

まとめ

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝