【インラインSVG】HTMLにSVGを埋め込み、ホバー時に色を変える方法

こんにちは。今日はHTMLにSVG画像を埋め込み、かつホバー時に色を変える方法を書こうと思います。
ちなみにHTMLにSVGを埋め込むのはインラインSVGと呼ばれています＾＾

インラインSVGについて

通常、画像を配置したいときimgタグの中にパスを記述しますが、HTMLにSVGを埋め込むとこのような感じになります↓

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path class="st0" d="M48.5,21.5l-20-20c-2-2-5.1-2-7.1,0s-2,5.1,0,7.1L33,20H5c-2.7,0-5,2.2-5,5s2.2,5,5,5h28L21.4,41.5
	c-2,2-2,5.1,0,7.1c1,1,2.3,1.5,3.5,1.5s2.6-0.5,3.5-1.5l20-20C50.5,26.6,50.5,23.4,48.5,21.5z"/>
</svg>

削除できる属性

上のコードはsvgファイルをエディターで開いたもので、長々としていますよね。あれを全て記述する必要はなくて削除できるものがあるみたいです！

• 冒頭の <?xml version=”1.0″ encoding=”utf-8″?>（バージョンが1.0、UTF-8の場合省略可）
• コメントアウト部分の　<!– Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
• x=”0px” y=”0px”（両方とも0の場合）
• enable-background=””
• xml:space=”preserve”

必須の属性

これらは逆に表示崩れの原因になるので必ず指定します。

• xmlns=”http://www.w3.org/2000/svg”（SVG名前空間宣言）
• xmlns:xlink=”http://www.w3.org/1999/xlink”（XLink名前空間宣言）
• version属性
• width属性とheight属性（pxは省略可）
• viewBox属性

ホバー時に色を変える方法

<span class="arrow">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" width="88" height="16">
	<path d="M48.5,21.5l-20-20c-2-2-5.1-2-7.1,0s-2,5.1,0,7.1L33,20H5c-2.7,0-5,2.2-5,5s2.2,5,5,5h28L21.4,41.5
		c-2,2-2,5.1,0,7.1c1,1,2.3,1.5,3.5,1.5s2.6-0.5,3.5-1.5l20-20C50.5,26.6,50.5,23.4,48.5,21.5z"/>
	</svg>
</span>

扱いやすいように＜span＞で囲い、クラスを付けました。
あとはCSSで指定するだけです。

.arrow svg
{
  transition:.2s ease fill;
}

.arrow:hover svg
{
  fill: red;
}

ちなみに、fillとは塗りを表す値です。

CSSで使いそうなSVGの属性は以下のようなものがあります↓

と、簡単にですが今まで書いてきました。しかしSVGはまだまだ奥深そうなので引き続き調べようと思いますm(_ _)m

では今日はここまで〜〜