画像ファイルと言えば、JPEGやPNG(ビットマップデータ)を扱う機会が多いと思いますが、高解像度ディスプレイで見るとぼやけてしまう欠点があります。
そのため、スマートフォンの普及もあり、今ではSVGなどベクターデータを使う方が都合いいことが多くなりました。SVGは軽くて画質の劣化がないため非常に便利ですが、実装する時はクセがあるので注意しなければなりません。
今回は基本ですがつまずきやすい、SVGのリンク設定とカラーの変更方法について解説します。
SVGファイルとは
SVG(Scalable Vector Graphics)とは、W3C(World Wide Web Consortium)によって開発、メンテナンスされているフォーマット。
表示する都度、計算を行って画像を再現するベクター形式の為、拡大縮小しても画質が劣化しません。
もちろん、高解像度ディスプレイにも対応します。
そして、なんとpngファイルよりも軽量になります。
SVGはテキストエディタで作成できますが、IllustlatorやPhotoshop(CC以降)で書き出すのが一般的かと思います。また、フリーで配布されているSVGもたくさんあるので、ソフトがない方はネットで探してみるのも手です。
SVGファイルのリンク設定
SVGはIMGタグで記述する方法、CSSのバックグラウンドとして指定する方法等、いくつかありますが、今回はHTML内にインラインで指定する方法で説明します。
リンク設定する際、注意するポイントは2つあります。
ポイントの1つ目は属性。通常HTMLではhref属性を使いますが、SVGではhrefの前に「xlink:」というものをつけないといけません。
2つ目は囲む位置。svgタグの外をaタグで囲みたくなりますが、svgタグの中のオブジェクト(path)をaタグで囲むようにしましょう。
HTML
<svg id="rss" width="45" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
<a xlink:href="https://www.webernote.net/?feed=rss2" target="blank">
<path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194 11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.99 2.194-2.2 2.194C.98 16 0 15.017 0 13.806c0-1.21.983-2.195 2.194-2.195zM10.606 16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z"/>
</a>
</svg>
SVGファイルのカラー設定
色の変更も特殊です。色を変えるとなると、CSSでbackgroundやcolorを使いたくなると思いますが、SVGの場合はfillを使います。また、マウスカーソルを合わせると色が変更するようにする場合(ホバー)、指定する要素はaタグではなく、中のオブジェクト(path)になります。
上のサンプルHTMLの色を変更する場合、CSSは次のようになります。
CSS
#rss {
fill:#FFA500
}
#rss a:hover path {
fill:#fdb532;
}
ちょっととっつきにくいSVGですが、リンクとカラーの設定が出来れば、使える幅がかなり広がると思います。SVGを使うとワンランク上のサイトが出来上がりますので、使ったことがない方はぜひチャレンジしてみてください!