SVG以前書いた「アイコンフォントからSVGへ!より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。囲んでもうまくリンクを貼ることはできません。属性でURLを指定する必要があります。CodePen.同じSVG内で複数のリンク各オブジェクトごとに複数のリンクを貼ることも可能。クリッカブル・マップというやつですね。src="button.svg"></a>という書き方でOK。ホバーで色を変更する上記でSVGにリンクを貼ることができたので、続いてマウスカーソルを合わせると色を変更できるようにしましょう。タグではなく、その中のオブジェクトです。pink;}としてもなにも変わりません。pink;}とすることで色を変更できます。複数のオブジェクトを持つSVGの場合、それぞれにクラスを付与して別の色に変更したり、一部のみに適応させたりできます。いうクラスを与え、ホバーで水色の部分のみ色を変更しています。CodePen.SVGにテキストをのせる画像の上にテキストを表示させたい場合、今まではCSSで背景画像を指定してきました。タグを使って文字を表示します。指定しないとうまく表示されません。フォントのスタイルはCSSで指定。目の不自由な方がWebサイトを閲覧する際、スクリーンリーダーや音声ブラウザ―というサイト内の文章や画像の説明文を読み上げるツールを利用します。属性を利用できません。タグでタイトルを記述します。タグでより詳しい説明文(description)も記述可能。タグは音声で読みあげられます。スクリーンリーダーや音声ブラウザーにも多くの種類があり、中には残念ながらこれらのタグを読み上げないものも存在するのでご注意を。ページ内に長いコードを並べるのは気を引ける...という方は、SVGコードをスッキリと表示させるSVGスプライトを利用してくださいね!素敵なSVGライフを!シェアするTwitterFacebookはてブPocketニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。Webクリエイターボックス。