知識の枝

"All is well"

簡単なアイコンをSVGで作ろう

約388日前 2020年11月3日20:30
デジタル
CSS

改訂履歴


2020/11/3 投稿

1. 背景


Webページを作成しているとき、小さなアイコン画像を使う機会が多々ありますよね。
1つ1つアイコンを用意するのは正直面倒ですし、種類が増えてくるとアイコン画像の管理も大変です。

そんなときに便利なのがSVG形式の画像です。
ちょっと使い方を理解してしまえば、簡単なアイコンならすぐに自分で用意することが可能になります!



2. はじめに


今回はCSS上でクラス名を指定し、「background-img」としてSVG形式画像を作成します。

3. SVG形式画像


3.1 - クラスの指定


クラスとはhtmlのタグの中で指定する下記のような記述の部分です。
<span class="○○○">

タグ要素に対し「class="○○○"」と続けて記述することで、そのタグにクラス属性を付与できます。

○○○の部分は見て分かり易い文字列が良いと思います。
例えば「svg-icon」など、好きな名前を付けて良いです。
<span class="svg-icon">


では、クラス名を決めましたので、早速このクラスが「どういういうものなのか」を定義していきます。

CSSを「▲▲▲.css」というファイル名で作成し、先ほど作成した「svg-icon」クラスを装飾していきます。
(▲▲▲は好きな名前でいいです)
.svg-icon {
背景色:黄色
文字色:赤色
}

こんな感じで特定のクラスに装飾の情報を記述します。
CSS上でクラスを指定する際は上記のようにクラス名の前に「.」ドットを入れましょう。

このクラス属性(svg-icon)が付与されたタグ(先ほどの例でいう<span>タグ)は、そのタグで囲まれた部分だけ
背景色が黄色、文字色が赤色になります。

<span>こんな感じになります</span>
※<span>部分は実際は表示されません

部分的に装飾したいときにクラス属性を付与するわけです。

さて本題です。今回はSVG形式の画像を表示することが目的でしたね。
早速、クラス属性に背景画像としてSVG形式の画像を指定しましょう。

具体的には下記のようになります。
.svg-icon {
background-img: □□□;
}

□□□の部分にSVG形式画像の情報を記述します。
このクラス属性が付与されたタグ要素には、背景にSVG形式画像が表示されるようになります。

3.2 - SVG形式の記述


先ほどの□□□の部分の書き方をここで解説します。
まず例としてハンバーガーメニューアイコンの記述方法を示します。
.svg-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' d='M4 8 h24 M4 16 h24 M4 24 h24'/%3E%3C/svg%3E");
}

呪文のような長文が出てきてクラクラしますが頑張りましょう。

この長い呪文、下記のことを把握していると理解し易いです。
「%3C」=「<」
「%3E」=「>」
詳細はこのサイトに書いてあります。

上記を踏まえて整理するとこのようになります。
url("data:image/svg+xml;charset=utf8,
<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
<path stroke='black' stroke-width='2' stroke-linecap='round' d='M4 8 h24 M4 16 h24 M4 24 h24'/>
</svg>");

だいぶ見易くなったと思います。

上記の3行目の部分を書き換えるだけで、画像の形や線の幅、色を変更することが可能です。
今回の場合3行目は4つの要素で構成されています。

【線の色を指定】
stroke='black'

【線太さを指定】
stroke-width='2'

【線の先端の形状を指定】
stroke-linecap='round'

【形を指定】
d='M4 8 h24 M4 16 h24 M4 24 h24'

上3つは何となく分かると思います。
問題は4つ目です。

何のこっちゃとなっていると思うので、次項で詳しく説明します。

3.3 - d='■■■'


このページを見て理解することができました。

下記は最初に提示した例です。
d='M4 8 h24 M4 16 h24 M4 24 h24'

アルファベット+数字の組み合わせで書かれていますね?

Mやhはコマンド、
数字は座標を表しています。

2次元のグラフを思い浮かべて下さい。
横軸をx軸、縦軸をy軸としたとき、右下方向を正、左上方向を負とみます。



例えば「M4 6」と指示した場合、「絶対座標(4, 6)に移動」という指示になります。
Mは「Move to」の略で「~に移動」というコマンドです。

大文字か小文字かで意味が変わり、
大文字だと絶対座標、小文字だと相対座標指示になります。


続けて「l4 -2」を指示した場合、「現在の点から相対座標で(4, -2)まで線をひく」という指示になります。
lは「Line to」の略で「~まで線をひく」というコマンドです。

hは「Horizonal」の略で「水平にx座標まで線をひく」というコマンドです。
垂直にひく場合は「V」or「v」です。

これだけ分かれば最初に書いたコードの意味が分かります。
d='M4 8 h24 M4 16 h24 M4 24 h24'

順を追って説明すると、
①絶対座標(4, 8)に移動
②そこから水平に相対座標でx=24まで線をひく
③絶対座標(4, 16)に移動
④そこから水平に相対座標でx=24まで線をひく
⑤絶対座標(4, 24)に移動
⑥そこから水平に相対座標でx=24まで線をひく

つまり横線3本が書かれているようなイメージです。



他にも様々なコマンドがあり、曲線を描くことも可能です。

4. さいごに


簡単な画像ならこのSVG形式で書いてしまったほうが早くて楽かもしれません。
参考にして頂けたら幸いです。

お疲れ様でした。