はじめに
第５回で円弧の基本についてまとめてみましたが、円弧を試したのは、今回のマイページアイコンを作成するためでした。
ということで、今回は円弧を使用しつつ、マイページのアイコンを作成します。
今回実施する内容
マイページアイコンを作成します。
ソースコード(Git Hub)
環境
OS: Windows 11 JP (64bit)
Edge: バージョン 136.0.3240.50 (公式ビルド) (64 ビット)
参考
用語
マイページアイコンの作成
マイページアイコンの設計
アイコンは、これまでに作成したハンバーガーアイコンやホームアイコンと同じサイズ感で作成します。
hoverしたときに〇をつけるようにします。
- 図のように32x32の枠を作ります。単位はviewport想定しているためありません。
- hover時に〇で囲うことを想定し、その内側にアイコンがきれいに収まるように設計します。図では、真ん中の茶色っぽい枠の中にアイコンを収まるようにします。
マイページアイコンのソースコード
mypageIcon.svg
<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="myPageSymbol" viewBox="0 0 32 32">
<circle cx="16" cy="12" r="6" fill="none" stroke-width="2" stroke="#000" />
<path d="M 8 25 a 8 7 0 1 1 16 0" stroke-width="2" fill="none" stroke="#000" />
</symbol>
</svg>
呼び出し元のmenu.htmlのソースコード
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="mypageIcon.css" type="text/css">
<title>menu</title>
</head>
<body>
<svg class="menuIcon" width="48px" height="48px">
<use xlink:href="myPageIcon.svg#myPageSymbol"></use>
</svg>
</body>
</html>
おわりに
シンプルなホームアイコンを作成しました。