SVGの基本と活用法！リンク設定とカラー変更の方法を解説

サイトにアイコンを置こうとしてPNGを高解像度ディスプレイで確認したら、輪郭がぼやけて残念な仕上がりになった――私も何度か経験しました。JPEGやPNGといったビットマップ画像は拡大に弱く、Retina世代の画面では粗が目立ちやすいんですよね。

そこで頼りになるのがSVGです。軽くて画質が劣化しない一方、いざ実装しようとするとリンクや色の扱いに独特のクセがあって、そこでつまずく人がとても多い。私自身も最初は「なんで普通に色が変わらないの？」と首をかしげました。

今回は、そのつまずきやすいポイント――SVGのリンク設定とカラー変更の方法を、今のブラウザに合わせた書き方で整理していきます。

SVGファイルとは

SVG（Scalable Vector Graphics）は、W3C（World Wide Web Consortium）が策定・管理しているベクター形式の画像フォーマットです。

ビットマップ画像がピクセルの集まりで色を記録するのに対し、SVGは点や線、曲線を数式的なデータとして持っています。表示のたびに輪郭を計算し直して描くため、どれだけ拡大・縮小しても画質が劣化しません。当然、高解像度ディスプレイでもくっきり表示されます。アイコンやロゴのように単純な図形なら、PNGよりファイルサイズが小さくなることも多いです。

もうひとつ大きな特徴が、中身がテキスト（XML）で書かれていること。メモ帳のようなテキストエディタでそのまま開いて編集できますし、HTMLに直接貼り付けることもできます。実際の制作ではAdobe IllustratorなどでSVGとして書き出すのが一般的ですが、無料で配布されているアイコンSVGを使わせてもらうのも手軽な選択肢です。

SVGファイルのリンク設定

SVGをページに組み込む方法はいくつかあります。imgタグで読み込む、CSSの背景画像として指定する、といった方法が代表的ですが、ここではもっとも自由度の高い「インラインSVG」を前提に話を進めます。

インラインSVGとは、SVGのコードをHTMLの中へそのまま書き込むやり方です。図形ひとつひとつにIDやクラスを付けてCSSで制御できるので、リンクや色の設定がぐっとやりやすくなります。ただし、通常のHTMLとは少し勝手が違う部分があるので、そこだけ押さえておきましょう。

リンク設定時の注意点

SVGにリンクを張るときのポイントは、次の2つです。

リンクにはhref属性を使う：以前はSVG内のリンクにxlink:hrefを使うのが定番でしたが、現在は通常のHTMLと同じhref属性が推奨されています。xlink:hrefは古いブラウザ向けの互換用という位置づけで、これから書くコードではhrefで問題ありません。
aタグをどこに置くか：SVGの中に<a>要素を書き、リンクさせたい図形（pathやcircleなど）を直接囲みます。こうすると、その図形の部分だけをクリック領域にできます。もちろん、SVG全体をまるごとリンクにしたいなら、外側のHTMLでsvgタグごと<a>で囲む方法もあります。

HTMLでの実装例

以下は、SVGの内側にリンクを設定する例です。path要素を<a>で囲み、hrefでリンク先を指定しています。

<svg id="rss" width="45" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  <a href="https://www.webernote.net/?feed=rss2" target="_blank" rel="noopener">
    <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>

この例では、RSSアイコンの図形をクリックすると指定したURLへ移動します。別タブで開きたいのでtarget="_blank"を付け、あわせてセキュリティ上の理由からrel="noopener"も添えています。

SVGファイルのカラー設定

SVGの色は、CSSでおなじみのcolorやbackground-colorでは変わりません。塗りつぶしの色はfill、輪郭線の色はstrokeという専用のプロパティで指定します。

このfillとstrokeは、SVGの属性として要素に直接書けるだけでなく、CSSのプロパティとしても書けます。属性とCSSの両方で指定した場合はCSS側が優先されるので、見た目の管理はCSSにまとめておくと扱いやすいです。

カラー変更の実装方法

インラインSVGなら、通常の要素と同じようにCSSで色を指定できます。IDやクラスをセレクタにしてfillを書くだけです。

#rss {
  fill: #FFA500;
}
#rss a:hover path {
  fill: #fdb532;
}

この例では、通常時をオレンジに、ホバー時に少し明るいオレンジへ変わるようにしています。pathに効くfillで、アイコンの塗り色をコントロールできるわけです。

currentColorで文字色に追従させる

アイコンを文字と同じ色で並べたいときに便利なのがcurrentColorという値です。fillにcurrentColorを指定しておくと、その要素に効いている文字色（color）と同じ色でSVGが塗られます。

.icon {
  fill: currentColor;
}
.btn {
  color: #2b6cb0;
}
.btn:hover {
  color: #1a4e84;
}

こう書いておけば、ボタンのテキスト色を変えるだけで、中のアイコンも自動で同じ色に追従します。テーマカラーを一括で切り替えたいときや、アイコンフォントの代わりにSVGを使いたいときに重宝します。

strokeで線の色や太さも調整する

塗りだけでなく、strokeで輪郭線の色、stroke-widthで線の太さも指定できます。fillと組み合わせれば、表現の幅がさらに広がります。

#rss {
  fill: #FFA500;
  stroke: #000000;
  stroke-width: 2px;
}
#rss a:hover path {
  fill: #fdb532;
  stroke: #ff0000;
}

この例では、塗り色に加えて輪郭線の色と太さも変えています。CSSと同じ感覚でこうした調整ができるのが、インラインSVGの強みです。

まとめ：SVGの活用で高品質なウェブデザインを実現

SVGは軽くて解像度に左右されないので、高解像度ディスプレイやスマホが当たり前になった今のWeb制作ととても相性がいいフォーマットです。最後に、この記事の要点を振り返っておきます。

リンクはSVG内の<a>要素で図形を囲み、href属性で指定する（xlink:hrefは互換用）。
色はcolorではなくfill（塗り）とstroke（線）で指定し、CSSからも制御できる。
文字色に合わせたいときはfill: currentColorが便利。アイコンフォント代わりの使い方に向く。

この3つを押さえておけば、SVGでつまずくことはぐっと減るはずです。まずは手元のアイコンひとつをインラインSVGにして、色とリンクを触ってみてください。