画像ファイルと言えば、JPEGやPNG（ビットマップデータ）を扱う機会が多いと思いますが、高解像度ディスプレイで見るとぼやけてしまう欠点があります。
そのため、スマートフォンの普及もあり、今ではSVGなどベクターデータを使う方が都合いいことが多くなりました。SVGは軽くて画質の劣化がないため非常に便利ですが、実装する時はクセがあるので注意しなければなりません。
今回は基本ですがつまずきやすい、SVGのリンク設定とカラーの変更方法について解説します。
SVGファイルとは
SVG（Scalable Vector Graphics）とは、W3C（World Wide Web Consortium）によって開発、メンテナンスされているフォーマット。
表示する都度、計算を行って画像を再現するベクター形式のため、拡大縮小しても画質が劣化しません。
もちろん、高解像度ディスプレイにも対応します。そして、なんとPNGファイルよりも軽量になります。
LINK：IllustratorでSVGファイルを保存してみました
SVGは、スケーラブルなベクター形式であり、画質の劣化を心配することなく、どんな解像度でも鮮明に表示されるという特長があります。また、テキスト形式で保存されるため、ファイルサイズも比較的小さく、ウェブサイトでの使用に適しています。
SVGファイルはテキストエディタで直接編集することができますが、実際にはAdobe IllustratorやPhotoshop（CC以降）などのデザインソフトを使用して作成するのが一般的です。ネット上にはフリーで使用できるSVGファイルも多数存在しており、これらを活用するのも一つの方法です。
SVGファイルのリンク設定
SVGファイルをウェブページに組み込む際には、いくつかの方法があります。代表的な方法としては、imgタグで読み込む方法や、CSSの背景画像として指定する方法がありますが、今回は最も柔軟性が高い「インラインSVG」の方法について解説します。
インラインSVGを使用することで、HTML内で直接SVGコードを記述できるため、リンクやスタイルの設定が容易になります。しかし、いくつかのポイントに注意が必要です。
リンク設定時の注意点
リンクを設定する際に気を付けるべきポイントは以下の2つです：
- xlink:hrefの使用：通常のHTMLではhref属性を使用してリンクを設定しますが、SVGの場合はxlink:hrefを使用します。これにより、SVG内の特定の要素にリンクを設定することができます。
- タグの配置：リンクを設定する際、通常はsvgタグ全体をaタグで囲みたくなりますが、SVG内の具体的なオブジェクト（例えばpath）をaタグで囲む方が一般的です。これにより、特定の部分にのみリンクを適用できます。
HTMLでの実装例
以下は、SVG内にリンクを設定する際の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内のpath要素にリンクが設定されており、クリックすると指定されたURLに移動します。
SVGファイルのカラー設定
SVGの色を変更するには、通常のHTMLやCSSのようにcolorやbackground-colorではなく、fill属性を使用します。fillは、SVG内の形状やパスに適用される塗りつぶしの色を指定するための属性です。
カラー変更の実装方法
色を変更したい場合、以下のようにCSSを使用してfill属性を設定します：
#rss { fill:#FFA500; }
#rss a:hover path { fill:#fdb532; }このコードでは、通常時の色をオレンジ色に、ホバー時に少し明るいオレンジ色に変更しています。path要素に適用されるfill属性により、SVGの特定部分の色を制御できます。
SVGでのスタイルの応用
SVGのfill属性だけでなく、stroke属性を使って線の色を指定することも可能です。また、stroke-widthで線の太さを調整するなど、CSSと組み合わせることで、より複雑で魅力的なデザインが可能です。以下にその例を示します：
#rss { fill:#FFA500; stroke:#000000; stroke-width:2px; }
#rss a:hover path { fill:#fdb532; stroke:#ff0000; }この例では、通常時の色とホバー時の色に加え、線の色や太さも調整しています。SVGのスタイル設定を活用することで、ウェブサイトのデザインに柔軟性を持たせることができます。
まとめ：SVGの活用で高品質なウェブデザインを実現
SVGは、その軽量さと解像度に依存しない特性から、現代のウェブデザインにおいて非常に有用なフォーマットです。リンク設定やカラー変更の基本を理解することで、より洗練されたデザインを実現できます。特に高解像度ディスプレイやモバイルデバイス向けのデザインにおいて、SVGを活用することで、視覚的に美しいサイトを提供することが可能です。
