...

illustratorで作ったSVG画像が文字化けする時の対処法

illustratorで作ったSVG画像が文字化けする時の対処法

どうもおはようポテト(@ohayoupoteto22)です。

イラレで作ったSVGの文字部分が文字化けするんだけど…

ということで今回は

「illustratorで作ったSVG画像が文字化けしてしまう」

「スマホだったり他のPCから見ると文字化けする」

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

ブログ主

早速いってみよう!

illustratorで作ったSVG画像が文字化けする時の対処法

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

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

 

友とコーヒーと嘘と胃袋

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

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

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

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

アウトラインに変換

 

すると…

 

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

アウトライン化とは?

アウトライン化とは文字をパスデータ(オブジェクト)にすることです。

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

だからアウトライン化するんだね

くるみ

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

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

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

まとめ

以上、「illustratorで作ったSVG画像が文字化けする時の対処法」でした。

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

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA