くるみ
イラレで作ったSVGの文字部分が文字化けするんだけど…
- illustratorで作ったSVG画像が文字化けしてしまう
- スマホだったり他のPCから見るとなぜかフォントが変わってしまう
という方に向けて「illustratorで作ったSVG画像が文字化けする時の対処法」をまとめました。
SVG画像が文字化けしたりフォントが変わる時の対処法
illustratorでこのようにベクター画像を作成したとします。
これをSVG画像として貼り付けると…
あらら…文字化けしてフォントが明朝体になっちゃってますね。ブログ主側でもスマホから見ると文字化けが生じてしまいます。
解決法：アウトライン化する
いきなり結論から。
この文字化けはアウトライン化していないことが原因です。
なのでSVG画像に書き出す際のSVGオプションにて、フォントの項目で「アウトラインに変換」を選択してあげます。
すると…
無事、文字化けを解消できました。めでたし。
アウトライン化とは?
アウトライン化とは文字をパスデータ(オブジェクト)にすることです。
例えばAさんのPCにしか入ってないフォントを使ってイラストを作成したとしても、BさんのPCがそのフォントに対応してない場合表示されませんよね。これが文字化けが生じる理由です。
だからアウトライン化するんだね
くるみ
SVG画像が表示されない場合
余談ですが、先ほどいじったSVGオプションにてスタイルの項目が「内部CSS」に設定されているとSVG画像本体が表示されない場合があります。
「インラインスタイル」に設定しておくのが無難かなと。
まとめ
以上、「SVG画像が文字化けしたりフォントが変わる時の対処法」でした。参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
