SVG にテキストを埋め込む際に注意すべきこと(iOS・Safari対応)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、SVG にテキストを埋め込む際に注意すべきこと(iOS・Safari対応)について解説していきます。

1 SVG にテキストを埋め込む際に注意すべきこと
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 参考・引用
6 最近の投稿

SVG にテキストを埋め込む際に注意すべきこと

実務で、SVG にテキストを埋め込む際にハマった罠について、今回は紹介します。

iOS・Safariで、SVGのテキストがゴシック体から明朝体になっている・・・

SVGを使用して、実装したボタンを確認していた際に、

パソコンでは問題なく表示出来ていたのに、iPhone・Safariで表示すると、ゴシック体のテキストが明朝体になっていました。

SVG内のテキストは、フォントがブラウザによって影響を受ける

JPGやGIF、PNGなどは、その形式でテキストを保存した際は、テキスト部分も画像として扱われる為、フォントの変更や文字化けなどの現象は起きません。

ただ、SVGは画像ファイルの形式ですが、SVGに埋め込まれたテキストは、画像として扱われずに、そのままテキストとして扱われるため、フォントが変わったり文字化けなどを起こす可能性があります。

SVG にテキストを埋め込む際にフォントの変更や文字化けを避ける方法

SVG にテキストを埋め込む際にフォントの変更や文字化けを避ける方法は、2つあります。

SVG内で使用するテキストをアウトライン化する。
SVG内で使用するテキストのフォントをどのOS・ブラウザでも対応しているフォントに設定する。

それぞれ解説していきます。

SVG内で使用するテキストをアウトライン化する

Adobe XD など、WebデザインツールなどSVGの編集ができるツールを使えば、テキストをアウトライン化することができます。

Adobe XDを使用している人の場合は、 Adobe XDでテキストをアウトライン化する手順をご参照ください。

SVG内で使用するテキストのフォントをどのOS・ブラウザでも対応しているフォントに設定する

SVG内で使用するテキストのフォントをどのOS・ブラウザでも対応しているフォントに設定することで、対応するという方法もあります。

例えば次のボタンのSVGでは、ユニバーサルなフォントであるArialをfont-family="Arial"で、textタグの属性として設定しています。

<!-- 1. SVG に対して、class を付与して、外部から、Styleをあてることもできる -->
<svg
  class="robotama_btn"
  width="199"
  height="31"
  viewBox="0 0 199 31"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <rect width="199" height="31" rx="15.5" fill="rgb(14, 125, 255)" />
  <!-- 2. Textタグで、SVG に文字を挿入する -->
  <text
    class="text_area"
    x="50%"
    y="61%"
    font-size="10"
    font-weight="600"
    fill="white"
    font-family="Arial"
    text-anchor="middle"
    dy=".1em"
  >
    ロボ玉なのだ！
  </text>
</svg>

SVGファイルは、htmlにそのまま埋め込むことができます。

また、svgタグ内部に対して外部から、CSSをあてることもできます。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVG_Test</title>
    <style>
      .image svg {
        width: 100%;
        height: auto;
      }
      .robotama_btn:hover {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
      }
      .text_area {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div>
      <!-- 1. SVG に対して、class を付与して、Styleをあてることもできる -->
      <svg
        class="robotama_btn"
        width="199"
        height="31"
        viewBox="0 0 199 31"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect width="199" height="31" rx="15.5" fill="rgb(14, 125, 255)" />
        <!-- 2. Textタグで、SVG に文字を挿入する -->
        <text
          class="text_area"
          x="50%"
          y="61%"
          font-size="10"
          font-weight="600"
          fill="white"
          font-family="Arial"
          text-anchor="middle"
          dy=".1em"
        >
          ロボ玉なのだ！
        </text>
      </svg>
    </div>
  </body>
</html>