2022年7月14日
AdobeXDでSVGを出力したらフォントがアウトライン化されていない！？原因と対処法を解説
WebデザインではAdobeXDをメインで利用しています。今まではPhotoshopを使っていましたが、AdobeXDを覚えてからはこちらのほうが便利で使い勝手が良いことも多く非常に重宝しています。しかし、ソフトが変わったことで今までにはなかった問題点に引っかかることもあります。
AdobeXDで出力したSVGファイルがアウトライン化されていない
AdobeXDから画像ファイルの書き出しを行う時に、SVGがアウトライン化されない問題が発生しました。
SVGがアウトライン化されていないと、該当のフォントがインストールされたPCからでは問題なくフォントが表示されますが、他のPCやスマホなどで見た時にはフォントが読み込まれず、違うフォントになってしまいます。そうするとデザインも崩れてしまい大変です！
書き出し設定でアウトライン化にチェックを入れたのにアウトライン化されない！
「ファイル＞書き出し＞選択したオブジェクト」でSVGを出力するときに「パスのアウトライン化」にチェックを入れましたが、これだけではフォントがアウトライン化されていませんでした。
どうすればいいんでしょうか。
原因：出力する前にアウトライン化しておかないとフォントはアウトライン化が出来ない
出力時のチェックだけではフォントはアウトライン化されないようです。
なので、書き出しを行う前にアウトライン化の手順を踏まなければいけませんでした。
解決方法：「パスに変換」コマンドを適用する
以下の手順でアウトライン化を適用しましょう。
「オブジェクト＞パス＞パスに変換」または「ctrl+8」
これを行ってから同じように書き出しを行うと、無事にSVGファイルのフォントもアウトライン化されます。
アウトライン化されているかどうかの確認方法は、SVGをブラウザで表示したときにドラッグしてみるとわかります。
テキストがドラッグできればアウトラインになっていません。ドラッグできなければ成功です！
今回は出力時に似たようなチェックボックスがあったおかげでとても混乱しました。
「ctrl+8」のショートカットキーを覚えていればとても簡単ですので、是非覚えておきたいテクニックです！
2022年7月14日
