Webデザイナー必見！CSSでSVG画像をアニメーションさせるテクニック
CSS で SVG 画像のスタイルを変更する方法
このページでは、img タグで読み込んだ SVG 画像のスタイルを CSS で変更する方法を、初心者にも分かりやすく解説します。
SVG 画像の基礎知識
SVG 画像は XML 形式で記述されたファイルであり、パスや形状、色などをコードで表しています。そのため、従来の画像形式と比べてファイルサイズが小さく、編集やカスタマイズ性に優れています。
SVG 画像の基本的な構造は以下の通りです。
<svg>
<defs>
</defs>
<g>
<path fill="red" d="M0 0 L100 100" />
<circle cx="50" cy="50" r="20" fill="blue" />
</g>
</svg>
fill 属性は、パスや形状の塗りつぶしの色を指定します。上記例では、赤い線と青い円が表示されます。
img タグで SVG 画像を読み込む
HTML ファイルで img タグを用いて SVG 画像を読み込むには、src 属性に SVG ファイルのパスを指定します。
<img src="sample.svg" alt="サンプル画像">
alt 属性は、画像が表示できない場合に代替テキストとして表示されます。
CSS でスタイルを変更する
SVG 画像のスタイルは、CSS の fill 属性をはじめ、様々なプロパティを用いて変更できます。
塗りつぶしの色を変更する
fill 属性で、パスや形状の塗りつぶしの色を変更できます。
img[src="sample.svg"] {
fill: green;
}
上記コードは、sample.svg 内の全てのパスや形状の塗りつぶし色を緑色に変更します。
線の色を変更する
stroke 属性で、線の色を変更できます。
img[src="sample.svg"] {
stroke: blue;
stroke-width: 2;
}
その他のスタイル
opacity 属性で透明度を、transform 属性で拡大・縮小や回転などの変形を指定できます。
詳細は CSS の各プロパティの説明を参照してください。
応用例
ホバー時のアニメーション
CSS アニメーションを用いて、マウスホバー時に SVG 画像の色や形を変えることができます。
<img src="sample.svg" alt="サンプル画像">
img[src="sample.svg"]:hover {
fill: yellow;
transform: scale(1.2);
}
上記コードは、sample.svg にマウスホバーすると、画像の色が黄色に変わり、1.2 倍に拡大されます。
アイコンの切り替え
複数の SVG 画像を用意し、JavaScript で切り替えることで、アイコンアニメーションを作成できます。
<img src="icon-1.svg" alt="アイコン1">
<img src="icon-2.svg" alt="アイコン2">
const img1 = document.querySelector('img[src="icon-1.svg"]');
const img2 = document.querySelector('img[src="icon-2.svg"]');
img1.addEventListener('click', () => {
img1.classList.add('hidden');
img2.classList.remove('hidden');
});
img2.addEventListener('click', () => {
img2.classList.add('hidden');
img1.classList.remove('hidden');
});
上記コードは、icon-1.svg と icon-2.svg をクリックで切り替える例です。
まとめ
CSS を用いることで、SVG 画像のスタイルを自由自在に変更できます。今回紹介した方法を参考に、様々な表現を試してみてください。
基本的なスタイル変更
<img src="sample.svg" alt="サンプル画像">
img[src="sample.svg"] {
fill: green; /* 塗りつぶしの色 */
stroke: blue; /* 線の色 */
stroke-width: 2; /* 線の太さ */
opacity: 0.5; /* 透明度 */
}
ホバー時のアニメーション
<img src="sample.svg" alt="サンプル画像">
img[src="sample.svg"]:hover {
fill: yellow; /* ホバー時の塗りつぶしの色 */
transform: scale(1.2); /* ホバー時の拡大率 */
}
アイコンの切り替え
<img src="icon-1.svg" alt="アイコン1" class="active">
<img src="icon-2.svg" alt="アイコン2">
.active {
display: block;
}
.hidden {
display: none;
}
const img1 = document.querySelector('img[src="icon-1.svg"]');
const img2 = document.querySelector('img[src="icon-2.svg"]');
img1.addEventListener('click', () => {
img1.classList.add('hidden');
img2.classList.remove('hidden');
img2.classList.add('active');
});
img2.addEventListener('click', () => {
img2.classList.add('hidden');
img1.classList.remove('hidden');
img1.classList.add('active');
});
SVG 画像のスタイル変更方法：その他の方法
style 属性
img タグに style 属性を直接記述することで、スタイルを指定できます。
<img src="sample.svg" alt="サンプル画像" style="fill: green; stroke: blue;">
ただし、この方法はコードの見通しが悪くなる場合があり、あまり推奨されていません。
JavaScript を用いて、動的にスタイルを変更できます。
<img src="sample.svg" alt="サンプル画像" id="my-image">
const img = document.querySelector('#my-image');
img.style.fill = 'green';
img.style.stroke = 'blue';
この方法は、アニメーションなど動的な表現に適しています。
SVG ファイルを直接編集ソフトで開いて、パスや形状の色などを変更できます。
ただし、編集ソフトの操作に慣れないと、時間がかかったり、誤操作をしてしまう可能性があります。
ライブラリの利用
Snap.svg や D3.js などのライブラリを用いて、SVG 画像をプログラムで操作することができます。
これらのライブラリは複雑なアニメーションやインタラクションを作成するのに役立ちますが、学習曲線が steep です。
おすすめの方法
- シンプルなスタイル変更であれば、CSS が最も簡単です。
- 動的な表現や複雑なアニメーションの場合は、JavaScript がおすすめです。
- SVG ファイルを直接編集したい場合は、編集ソフトに慣れている必要があります。
- 高度な機能が必要な場合は、ライブラリの利用を検討しましょう。
まとめ
SVG 画像のスタイル変更には、様々な方法があります。それぞれの方法の特徴を理解し、目的に合った方法を選びましょう。
css image svg
