形の定義

defs を使って ユーザアイコンを定義します。 defs で定義したものは、 あくまで定義なのですが、 単純に HTML に記述するだけだと その部分の領域が確保されてしまうので、width="0" height="0" style="position:absolute;" と記述して、 メインのコンテンツに干渉しないようにしています。

mask を使って透明にする部分を指定していきます。 white にすると塗りつぶされ、 black にすると透過されます。 黒いところがマスクによって透過される部分です。 gray にすると半透明になります。 HTMLが上から順に処理されるので rect で 最初に白く塗りつぶしています。 rect を最後に書いた場合は また違う結果になります。

ユーザアイコンを定義します。 mask を使って、 円を描きます。 こうすることで 部分的に透過することができます。 そして 円の外周を上から重ねます。 円の外周を重ねるときに stroke-width の値に注意します。 円の外側と内側に stroke-width の半分の領域が塗りつぶされるため、 円の直径 と stroke-width を足した値が viewBox の幅、高さに収まるようにする必要があります。