HTML SVGアイコンをCSSで色変更する方法（fillとstroke）初心者向け完全ガイド

1. HTMLで使うSVGアイコンとは

1. HTMLで使うSVGアイコンとは

HTMLで使うSVGアイコンとは、拡大してもぼやけないベクター形式の画像です。通常のPNGやJPEG画像とは違い、点と線の計算で描かれているため、画面サイズが変わってもきれいに表示されます。Webデザインやレスポンシブ対応のWebサイト制作では、SVGアイコンはとても重要な存在です。

さらに、SVGはHTMLの中に直接書くことができるため、CSSで色変更やサイズ変更が簡単にできます。これがPNG画像との大きな違いです。SEO対策の観点からも、HTML構造の中にSVGを書くことで検索エンジンに正しく内容を伝えやすくなります。

2. fillとstrokeの意味をやさしく理解する

2. fillとstrokeの意味をやさしく理解する

SVGアイコンの色変更で重要になるのがfillとstrokeです。fillとは塗りつぶしの色のことです。たとえば、折り紙を赤く塗るようなイメージです。一方strokeとは線の色です。輪郭線の色を変えるイメージになります。

つまり、図形の中身を塗るのがfill、ふちどりを描くのがstrokeです。HTMLとCSSでSVGアイコンの色を変更する場合、この二つを理解しておくことが基本になります。

3. HTMLに直接SVGを書いて色を変える方法

3. HTMLに直接SVGを書いて色を変える方法

まずは、HTMLの中にSVGコードを直接書く方法です。この方法なら、CSSで自由に色変更ができます。初心者にもおすすめの方法です。

<svg width="100" height="100" class="icon-red">
    <circle cx="50" cy="50" r="40"></circle>
</svg>

<style>
.icon-red {
    fill: red;
}
</style>

この例では、circleという丸い図形を作り、CSSでfillをredに指定しています。これでSVGアイコンの色変更ができます。HTMLとCSSの基本だけで操作できるのが魅力です。

4. strokeで線の色を変更する方法

4. strokeで線の色を変更する方法

次に、strokeを使って線の色を変更する方法を見てみましょう。輪郭だけを表示したいときに便利です。

<svg width="100" height="100" class="icon-line">
    <rect x="10" y="10" width="80" height="80"></rect>
</svg>

<style>
.icon-line {
    fill: none;
    stroke: blue;
    stroke-width: 5;
}
</style>

fillをnoneにすることで中身を透明にし、strokeで線の色を青にしています。stroke-widthは線の太さです。SVGアイコンのデザイン調整ではよく使われます。

5. クラスを使って複数アイコンの色を一括変更する

5. クラスを使って複数アイコンの色を一括変更する

Webサイト制作では、複数のSVGアイコンを同じ色にしたいことがあります。その場合はCSSクラスを活用します。これにより保守性が高まり、SEO対策としても整理されたHTMLになります。

<style>
.icon-green {
    fill: green;
}
</style>

<svg width="80" height="80" class="icon-green">
    <circle cx="40" cy="40" r="30"></circle>
</svg>

<svg width="80" height="80" class="icon-green">
    <rect x="10" y="10" width="60" height="60"></rect>
</svg>

このようにクラスを使えば、SVGアイコンの色変更を一括管理できます。Webデザインやコーポレートサイト制作でもよく使われる方法です。

6. マウスをのせたときに色を変える方法

6. マウスをのせたときに色を変える方法

CSSのhoverを使うと、マウスをのせたときにSVGアイコンの色を変更できます。ボタンやナビゲーションメニューでよく使われるテクニックです。

<style>
.icon-hover {
    fill: gray;
}
.icon-hover:hover {
    fill: orange;
}
</style>

<svg width="100" height="100" class="icon-hover">
    <circle cx="50" cy="50" r="40"></circle>
</svg>

通常時は灰色、マウスをのせるとオレンジ色に変わります。これにより、ユーザーに分かりやすい操作感を与えることができます。HTMLとCSSだけで実装できるため、初心者でも挑戦しやすい方法です。

7. imgタグで読み込んだSVGは色変更できるのか

7. imgタグで読み込んだSVGは色変更できるのか

HTMLでimgタグを使ってSVGファイルを読み込んだ場合、基本的にCSSでfillやstrokeを変更することはできません。なぜなら、外部画像として扱われるためです。SVGアイコンの色変更をしたい場合は、HTMLに直接SVGを書く方法を選ぶことが重要です。

<img src="icon.svg" width="100" height="100">

この方法は表示はできますが、CSSで自由に色変更するには向いていません。SVGアイコンをカスタマイズしたい場合は、インラインSVGを使うのが基本です。

まとめ

まとめ

今回は、HTMLでSVGアイコンを表示し、CSSで色変更する方法について、fillとstrokeの基本から実践的な使い方まで丁寧に確認しました。SVGアイコンはベクター形式の画像であり、拡大縮小しても画質が劣化しないという大きな特徴があります。Webデザインやレスポンシブ対応のホームページ制作、スマートフォン表示対応のサイト作成では欠かせない存在です。

SVGアイコンの色変更で重要になるのがfillとstrokeです。fillは図形の塗りつぶしの色を指定するプロパティであり、strokeは線の色や輪郭の色を指定するプロパティです。さらにstroke widthを使えば線の太さも調整できます。これらを理解することで、HTMLとCSSだけで自由にデザインをコントロールできるようになります。

特に大切なのは、SVGをHTMLに直接書くインラインSVGの方法です。imgタグで外部SVGファイルを読み込む方法では、基本的にCSSからfillやstrokeを変更することができません。SVGアイコンの色を動的に変更したい場合や、マウスオーバーで色を変えたい場合、ボタンやナビゲーションメニューで視覚的な変化をつけたい場合は、インラインSVGを使うことが基本になります。

また、class属性を活用することで、複数のSVGアイコンを一括で色変更することが可能になります。Web制作の現場では、ヘッダーやフッター、サイドバー、アイコン一覧などで同じデザインルールを適用することが多いため、CSSクラスによる管理は非常に重要です。保守性が高まり、デザイン変更にも柔軟に対応できます。

hoverを使った色変更も実務ではよく使われます。ボタンにマウスをのせたときに色を変えることで、ユーザーに操作できる要素だと伝えることができます。ユーザビリティ向上やクリック率改善にもつながります。HTML初心者の方でも、CSSの疑似クラスを理解すれば簡単に実装できます。

SVGアイコンの活用は、Webサイトの表示速度改善や軽量化にも貢献します。PNG画像やJPEG画像を大量に使うよりも、SVGを適切に使うことでファイルサイズを抑えることができます。結果としてページ表示速度の向上につながり、快適な閲覧環境を提供できます。

これからHTMLとCSSを学習する方は、まずは単純な円や四角形から始めて、fillやstrokeを変更する練習を繰り返してみてください。SVGアイコンの色変更は、Web制作の基礎力を高める重要な練習になります。繰り返し触れることで自然と理解が深まります。

サンプルプログラムで最終確認

<style>
.icon-summary {
    fill: gray;
    transition: 0.3s;
}
.icon-summary:hover {
    fill: red;
}
</style>

<h1>SVGアイコン色変更の最終確認</h1>

<svg width="120" height="120" class="icon-summary">
    <circle cx="60" cy="60" r="50"></circle>
</svg>

上記のサンプルでは、通常時は灰色で表示され、マウスをのせると赤色に変化します。fillによる塗りつぶし指定とhover指定の組み合わせを理解することで、実践的なSVGアイコンデザインが可能になります。