Adobe XD フォントをアウトライン化する方法

XDでフォントをアウトライン化する方法

XDでフォントをSVGで書き出す時にテキストをそのままSVGに書き出してしまうと以下のような、CSSでフォントファミリーを指定する状態になってしまいます。
このままでは、ユーザーの環境によってフォントがインストールされていなければ綺麗に表示できません。

<svg xmlns="http://www.w3.org/2000/svg" width="440" height="110" viewBox="0 0 440 110">
  <defs>
    <style>
      .cls-1 {
        fill: #272323;
        font-size: 110px;
        font-family: HiraKakuProN-W6, Hiragino Kaku Gothic ProN;
      }
    </style>
  </defs>
  <text id="アジサイ" class="cls-1" transform="translate(0 97)"><tspan x="0" y="0">アジサイ</tspan></text>
</svg>

実はできない方法

AdobeXDで書き出す際には、スタイルやパスのオプションを選ぶことができます。
フォントに何もしないまま「パスのアウトライン」を選ぶことができるのですが…..

Adobe XDの書き出し時の設定画面

これを選んでも何も変わりません。。。
パスがあったらアウトラインにするよってオプションなので、フォントのままでは意味がないみたい。

アウトラインの仕方

SVGとして使うために、メニューバーより「オブジェクト → パス → パスに変換」の操作をするとフォントをパスに変換できます。

簡単にできるフォントのアウトライン化

パスに変換をすると、以下のようなコードのSVGデータになります。よかった。

<svg xmlns="http://www.w3.org/2000/svg" width="416.79" height="100.87" viewBox="0 0 416.79 100.87">
  <defs>
    <style>
      .cls-1 {
        fill: #272323;
      }
    </style>
  </defs>
  <path id="パス_1" data-name="パス 1" class="cls-1" d="M95.59-84.15c-3.08.88-4.07.99-10.67.99H27.5c-7.59,0-11-.22-15.18-.88v13.75a105.736,105.736,0,0,1,14.96-.66H85.03A45.617,45.617,0,0,1,74.58-56.98c-4.51,4.29-8.69,6.82-16.06,10.12,4.95,3.74,6.6,5.39,9.9,10.01a68.8,68.8,0,0,0,13.2-9.13A69.808,69.808,0,0,0,98.56-68.09c2.86-5.72,2.86-5.83,4.4-7.7ZM43.34-61.93a27.854,27.854,0,0,1,.55,6.6c0,20.79-3.52,30.25-14.74,39.16C23.76-11.88,18.81-9.46,9.9-6.82A38.83,38.83,0,0,1,18.59,5.72C32.34,0,40.37-5.61,46.97-14.08c7.48-9.57,10.45-20.13,10.89-38.94.11-6.71.11-6.82.44-8.91Zm85.69-13.31c8.03,2.53,20.46,9.02,29.37,15.07l7.04-12.1a181.143,181.143,0,0,0-29.26-14.19Zm-8.69,26.73c10.12,3.74,22.55,10.45,29.81,16.06l6.82-12.43a173.616,173.616,0,0,0-29.26-14.96Zm65.34-36.3a74.241,74.241,0,0,1,11.55,16.39l7.7-4.07a71.286,71.286,0,0,0-11.55-16.17ZM126.61,4.51a64.951,64.951,0,0,1,7.7-1.87c39.38-7.7,62.59-25.74,76.23-59.07a53.482,53.482,0,0,1-11.44-9.79c-7.92,23.43-24.42,41.47-44.55,48.51-11.66,4.51-23.21,7.04-31.79,7.15Zm91.41-84.15a63.613,63.613,0,0,0-11.44-15.51l-7.37,3.85a81.045,81.045,0,0,1,11.22,15.95Zm42.57,11.88V-79.09a55,55,0,0,1,.44-9.46H246.62a58.625,58.625,0,0,1,.55,9.79v11h-6.49c-7.81,0-10.01-.11-14.3-.77v13.42a111.9,111.9,0,0,1,14.08-.55h6.71v16.28a72.426,72.426,0,0,1-.44,9.46h14.3a67.713,67.713,0,0,1-.44-9.24v-16.5h28.49c-.22,7.59-.22,10.23-.44,12.76-.99,12.65-4.18,19.91-11.66,26.4-5.28,4.62-10.56,7.26-21.01,10.45,4.73,4.84,6.16,6.93,8.25,11.66,10.12-3.63,15.51-6.49,21.45-11.55,9.57-8.14,14.3-17.49,15.84-31.57.55-4.18.55-4.95.77-18.15h7.37a111.9,111.9,0,0,1,14.08.55V-68.53c-4.29.66-6.49.77-14.3.77h-7.04c.11-6.6.11-6.6.11-13.31a40.62,40.62,0,0,1,.44-7.37H288.75c.44,2.53.55,4.95.55,12.21v3.52l-.11,4.95ZM414.04-89.32c-3.19,5.39-10.67,12.98-20.46,20.57a160.647,160.647,0,0,1-57.75,28.6c3.85,4.95,5.06,6.82,7.37,12.54,20.24-7.26,26.4-10.12,39.27-17.82V-6.71c0,6.49-.11,8.69-.66,11.88h15.4a83.214,83.214,0,0,1-.55-12.21V-54.01a194.518,194.518,0,0,0,25.96-22.66,45.311,45.311,0,0,1,4.07-3.85Z" transform="translate(-9.9 95.15)"/>
</svg>

パスにすることで、先ほどのパスのアウトラインを押しても特に変わらない状態になりました。