どうもおはようポテト(@ohayoupoteto22)です。
イラレで作ったSVGの文字部分が文字化けするんだけど…
「illustratorで作ったSVG画像が文字化けしてしまう」
「スマホだったり他のPCから見ると文字化けする」
という方に向けて「illustratorで作ったSVG画像が文字化けする時の対処法」をまとめました。
ブログ主
illustratorで作ったSVG画像が文字化けする時の対処法
illustratorでこのようにベクター画像を作成したとします。
これをSVG画像として貼り付けると…
あらら…文字化けしてフォントが明朝体になっちゃってますね。ブログ主側でもスマホから見ると文字化けが生じてしまいます。
解決法：アウトライン化する
いきなり結論から。
この文字化けはアウトライン化していないことが原因です。
なのでSVG画像に書き出す際のSVGオプションにて、フォントの項目で「アウトラインに変換」を選択してあげます。
すると…
無事、文字化けを解消できました。めでたし。
アウトライン化とは?
アウトライン化とは文字をパスデータ(オブジェクト)にすることです。
例えばAさんのPCにしか入ってないフォントを使ってイラストを作成したとしても、BさんのPCがそのフォントに対応してない場合表示されませんよね。これが文字化けが生じる理由です。
くるみ
SVG画像が表示されない場合
余談ですが、先ほどいじったSVGオプションにてスタイルの項目が「内部CSS」に設定されているとSVG画像本体が表示されない場合があります。
「インラインスタイル」に設定しておくのが無難かなと。
まとめ
以上、「illustratorで作ったSVG画像が文字化けする時の対処法」でした。参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
プログラミング、楽しく学んでみない?
TechAcademy（テックアカデミー）
- 受講生に1人ずつ現役のプロのパーソナルメンターがつくので未経験でも安心
- オリジナルサービスやオリジナルアプリなどの開発までサポート
評価 おすすめポイント 自宅にいながらオンライン完結で勉強できる 最短4週間で未経験からプロを育てるオンライン完結のスクール。受講生に1人ずつ現役のプロのパーソナルメンターがつき、チャットで質問すればすぐに回答が返ってくるのでサポート体制も万全です。
DMM WEBCAMP COMMIT
- プログラミング未経験者でも安心のサポート体制
- 転職、就職の保証付き
評価 おすすめポイント プログラミング未経験者でも安心のサポート体制 磨き上げられた「実践的なスキルが身につく」学習カリキュラムにより、どこよりも高い「継続率」「修了率」「転職率」で受講者満足度も90%以上。プログラミング未経験の方でも安心なスクールです。
CodeCamp（コードキャンプ）
- レッスン満足度94.6%、現役エンジニアから実践的なスキルを学べる
- 就職/転職やキャリアについての相談も無料でできる
評価 おすすめポイント 実績No.1のオンライン・プログラミングスクール（受講者20,000名以上） オンラインで365日/7時〜24時まで、時間と場所を選ばずに自分のペースで学習でき、PCとネット環境があればすぐに学習が始められます。更に無料体験レッスンを受講すると受講料が1万円引に。
