SVGファイルを初めて設定する時につまずきやすいポイント!リンクの設定とカラーの変更方法

画像ファイルと言えば、JPEGやPNG(ビットマップデータ)を扱う機会が多いと思いますが、高解像度ディスプレイで見るとぼやけてしまう欠点があります。

アイコンのイメージ

そのため、スマートフォンの普及もあり、今ではSVGなどベクターデータを使う方が都合いいことが多くなりました。SVGは軽くて画質の劣化がないため非常に便利ですが、実装する時はクセがあるので注意しなければなりません。

今回は基本ですがつまずきやすい、SVGのリンク設定とカラーの変更方法について解説します。

SVGファイルとは

SVG(Scalable Vector Graphics)とは、W3C(World Wide Web Consortium)によって開発、メンテナンスされているフォーマット。

表示する都度、計算を行って画像を再現するベクター形式の為、拡大縮小しても画質が劣化しません。

もちろん、高解像度ディスプレイにも対応します。
そして、なんとpngファイルよりも軽量になります。

LINK:IllustratorでSVGファイルを保存してみました

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を使うとワンランク上のサイトが出来上がりますので、使ったことがない方はぜひチャレンジしてみてください!

Related Posts