はじめに

SVGでホームアイコンを作ります。
また、このホームアイコンの色をマウスホバーしたら色を変更します。

今回実施する内容

インターネットでよく見かけるホームアイコン、家のマークを作ります。
マウスホバー時に家の色を変更します。

ソースコード(Git Hub)

環境

OS: Windows 11 JP (64bit)
Edge:バージョン 136.0.3240.50 (公式ビルド) (64 ビット)

参考

第2回 SVG ハンバーガーアイコン＋hover

第3回 SVG ローカル環境のCORS対処

用語

ホームアイコン作成

ホームアイコンの設計

ホームアイコンのパスは、以下のように設計します。

図の黒字部分がホームアイコンの外枠です。
アイコンのサイズ（ViewBox）は、32×32の正方形です。
hoverした時に円の表示することを想定し、円内に収まるように実際のアイコンサイズは少し小さめにしています。オレンジ色のところにアイコンが収まれば、hover時に円を表示してもきれいに円内にホームアイコンが収まります。

ホームアイコンのソースコード

homeIcon.svg

<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <symbol id="homeSymbol" viewBox="0 0 32 32" >
    <path d="M16 7 L17 7 L26 16 L26 17 L23 17 L23 26 L18 26 L18 20 L15 20 L15 26 L10 26 L10 17 L7 17 L7 16 z"/>
  </symbol>
</svg>

ホームアイコンのパスは、path d=・・・に記載した通りで、これが上図の設計に従ったパスです。

ホームアイコン呼び出し元のソース

menu.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="homeIcon.css" type="text/css">
    <title>menu</title>
</head>
<body>
<svg width="48px" height="48px" class="fill">
  <use xlink:href="homeIcon.svg#homeSymbol"></use>
</svg>
</body>
</html>

svgタグを使用して、homeIcon.svgのhomeSymbolの呼び出しを行います。
svgタグではアイコンサイズを48px✕48pxとし、アイコンのものとのviewBox 32x32よりは少しスケールアップしました。
また、hover時にホームアイコンの入りを変えるために、classで「fill」を適用しました。

homeIcon.cssの作成

homeIcon.css

.fill {
    fill:red;
    stroke: black;
}

.fill:hover {
    fill: blue;
}

ホームアイコンの塗りつぶし色は、fill属性を使用して通常時を赤、hover時に青にしました。
ホームアイコンの枠自体は、stroke属性を使用して、黒にしました。

おわりに

ホームアイコンを作成してみました。