SVGアイコンを実用するために知っておきたい、リンク周りの記述方法

アイコンフォントから SVG へ！より手軽にベクター画像を表示しよう

SVG にリンクを貼る

SVG にリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性で URL を指定する必要があります。

<svg ... >
  <a xlink:href="http://google.com">
    <path fill="#1E899D" ... >
  </a>
</svg>

同じ SVG 内で複数のリンク

各オブジェクトごとに複数のリンクを貼ることも可能。クリッカブル・マップというやつですね。

<svg ... >
  <a xlink:href="http://ja.wikipedia.org/wiki/%E5%8C%97%E6%B5%B7%E9%81%93">
    <path fill="#FFCC33" ... >
  </a>

  <a xlink:href="http://ja.wikipedia.org/wiki/%E6%9C%AC%E5%B7%9E">
    <path fill="#00BBAA" ... >
  </a>
</svg>

なんだこの地図…

ただし、上記の書き方はすべてインライン（埋め込み）要素の場合のみであり、img タグを使って SVG を画像として扱う場合は、従来通り

<a href="http://google.com">
  <img src="button.svg" />
</a>

という書き方で OK。

ホバーで色を変更する

上記で SVG にリンクを貼ることができたので、続いてマウスカーソルを合わせると色を変更できるようにしましょう。まず覚えておくことは、色の変更は background や color ではなく fill を使うことです。次に、変更を指定する要素は a タグではなく、その中のオブジェクトです。

例えば

a:hover {
  fill: pink;
}

としてもなにも変わりません。

a:hover path {
  fill: pink;
}

とすることで色を変更できます。もちろん複数のオブジェクトを持つ SVG の場合、それぞれにクラスを付与して別の色に変更したり、一部のみに適応させたりできます。以下の例では a タグに .btn 、水色の部分に .base というクラスを与え、ホバーで水色の部分のみ色を変更しています。

.btn:hover .base {
  fill: #0ba;
}

SVG にテキストをのせる

画像の上にテキストを表示させたい場合、今までは CSS で背景画像を指定してきました。SVG をインラインで表示させる場合は背景として利用することはできないので、text タグを使って文字を表示します。表示させる位置を x と y で指定しないとうまく表示されません。フォントのスタイルは CSS で指定。ただし文字色は他のオブジェクトと同様、color ではなく fill で指定します。

HTML

<svg ... >
  <a class="btn" xlink:href="http://google.com">
    <path ... >
    <text class="btn-text" x="75" y="38">ゲームしてもいい？</text>
  </a>
</svg>

CSS

.btn-text {
  font: 26px "Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4", "HG丸ｺﾞｼｯｸM-PRO",
    "HGMaruGothicMPRO", sans-serif;
  fill: #fff;
}

アクセシビリティ関連

目の不自由な方が Web サイトを閲覧する際、スクリーンリーダーや音声ブラウザ―というサイト内の文章や画像の説明文を読み上げるツールを利用します。img タグを使った画像の場合は alt 属性を指定して説明文を記述できますが、インライン SVG では alt 属性を利用できません。その代わり title タグでタイトルを記述します。

<svg ... >
  <title>救急箱</title>
  <path fill="#324D5B" ... >
</svg>

タイトルだけでなく、desc タグでより詳しい説明文（description）も記述可能。

<svg ... >
  <title>救急箱</title>
  <desc>
    おれが万能薬になるんだ！何でも治せる医者になるんだ！だって！この世に！治せない病気はないんだから！！
  </desc>
  <path fill="#324D5B" ... >
</svg>

これら title, desc, 上記の text タグは音声で読みあげられます。ただし、スクリーンリーダーや音声ブラウザーにも多くの種類があり、中には残念ながらこれらのタグを読み上げないものも存在するのでご注意を。

ページ内に長いコードを並べるのは気を引ける…という方は、SVG コードをスッキリと表示させるSVG スプライトを利用してくださいね！素敵な SVG ライフを！