はじめに
過去にもでてきてはいますが、作成したアイコンをリストします。
今回実施する内容
ソースコード(Git Hub)
環境
OS: Windows 11 JP (64bit)
Edge：バージョン 153.0.4234.48 (公式ビルド) (64 ビット)
参考
用語
サイトマップアイコン
sitmapIcon.svg
<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="sitemapSymbol" viewBox="0 0 32 32">
<rect x="7" y="7" width="20" height="20" stroke-width="1" stroke="black" fill="none" />
<path d="M7 8 L27 8z" stroke-width="3" stroke="black" fill="none" />
<rect x="9" y="11" width="14" height="3" rx="1" ry="1" stroke-width="1" stroke="black" fill="none" />
<rect x="11" y="16" width="13" height="3" rx="1" ry="1" stroke-width="1" stroke="black" fill="none" />
<rect x="11" y="21" width="13" height="3" rx="1" ry="1" stroke-width="1" stroke="black" fill="none" />
<path d="M10 14 L10 18 L11 18" stroke-width="1" stroke="black" fill="none" />
<path d="M10 14 L10 23 L11 23" stroke-width="1" stroke="black" fill="none" />
</symbol>
</svg>
- 最初の
rect要素で、ブラウザをイメージした四角を作成。 - 2段目の`pathP要素で、ブラウザのタイトルバーをイメージした線を作成。
- 3段目の
rect要素で、サイトのトップをイメージしたカッコを作成。 - 4、5段目の
rect要素で、リンク先のサイトをイメージしたカッコを作成。 - 6、7段目の
path要素で、リンク間の線を作成。
プレイリストアイコン
playlistIcon.svg
<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="playlistSymbol" viewBox="0 0 32 32">
<path d="M10 8 L10 18 L18 13z" stroke-width="1" stroke="black" fill="black" />
<path d="M8 20 L8 21 L9 21 L9 20z" stroke-width="1" stroke="black" fill="black" />
<path d="M11 20 L26 20 L26 21 L11 21z" stroke-width="1" stroke="black" fill="black" />
<path d="M8 24 L8 25 L9 25 L9 24z" stroke-width="1" stroke="black" fill="black" />
<path d="M11 24 L26 24 L26 25 L11 25z" stroke-width="1" stroke="black" fill="black" />
</symbol>
</svg>
- 最初の
path要素で、再生マークの三角を作成。 - 2段目の
path要素で、再生リストの１つ目の左側の「・」を作成。 - 3段目の
path要素で、再生リストの１つ目の「・」の右の線を作成。 - 4段目の
path要素で、再生リストの２つ目の左側の「・」を作成。 - 5段目の
path要素で、再生リストの２つ目の「・」の右の線を作成。
ヒストリーアイコン
historyIcon.svg
<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="historySymbol" viewBox="0 0 32 32">
<path d="M8 16 A9 9 0 1 0 11 10" stroke-width="2" stroke="black" fill="none" />
<path d="M11 11 L11 7" stroke-width="2" stroke="black" fill="none" />
<path d="M10 11 L15 11" stroke-width="2" stroke="black" fill="none" />
<path d="M17 18 L17 9" stroke-width="2" stroke="black" fill="none" />
<path d="M17 17 L23 17" stroke-width="2" stroke="black" fill="none" />
</symbol>
</svg>
- 最初の
path要素で、円弧を生成。 - ２、3段目の
path要素で、円弧の左上に矢印を生成。 - 4段目の
path要素で、時計の長針を生成。 - 5段目の
path要素で、時計の短針を生成。
サーチアイコン
searchIcon.svg
<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="searchSymbol" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="8" stroke="black" stroke-width="3" fill="none" />
<path d="M7 26 L10 23" stroke="black" stroke-width="3" stroke-linecap="round" />
</symbol>
</svg>
- 最初の
circle要素で、虫眼鏡のレンズ部分を生成。 - 2段目の
path要素で、虫眼鏡の取っ手部分を生成。
シーケンスアイコン
sequenceIcon.svg
<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="sequenceSymbol" viewBox="0 0 32 32">
<rect x="9" y="7" width="8" height="3" rx="1" ry="1" stroke-width="1" stroke="black" fill="none" />
<path d="M13 10 L13 12" stroke-width="1" stroke="black" fill="none" />
<path d="M13 16 L13 18" stroke-width="1" stroke="black" fill="none" />
<path d="M13 21 L13 23" stroke-width="1" stroke="black" fill="none" />
<path d="M13 12 L17 14 L13 16 L9 14z" stroke-width="1" stroke="black" fill="none" />
<path d="M17 14 L23 14 L23 17" stroke-width="1" stroke="black" fill="none" />
<rect x="9" y="18" width="8" height="3" stroke-width="1" stroke="black" fill="none" />
<rect x="10" y="23" width="6" height="3" stroke-width="1" stroke="black" fill="none" />
<rect x="19" y="17" width="8" height="3" stroke-width="1" stroke="black" fill="none" />
</symbol>
</svg>
- 最初の
rect要素で、角を丸めた資格を生成。 - 2、3、4段目の
path要素で、縦線を3つ生成。 - 5段目の
path要素で、分岐を示すひし形を生成。 - 6段目の
path要素で、右の四角への線を生成。 - 7段目の
rect要素で、ひし形の下の四角を生成。 - 8段目の
rect要素で、さらにその下の四角を生成。 - 9段目の
rect要素で、右側の四角を生成。
おわりに
単色のアイコンであれば、簡単な線と四角と円で生成できるようになりました。