以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！

SVGにリンクを貼る

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

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

See the Pen SVG Icon with link by Mana (@manabox) on CodePen.

同じ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>

See the Pen SVG Clickable Map by Mana (@manabox) on CodePen.

なんだこの地図…

ただし、上記の書き方はすべてインライン（埋め込み）要素の場合のみであり、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;
}

See the Pen SVG icon hover colour by Mana (@manabox) on CodePen.

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;
}

See the Pen SVG with text by Mana (@manabox) on CodePen.

アクセシビリティ関連

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

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

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

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

See the Pen SVG with title, desc by Mana (@manabox) on CodePen.

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

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