Define the Shape

Defined user icon in defs tag. Definition in defs is only definition but it occupy some space. So I wrote width="0" height="0" style="position:absolute;" and prevent conflict with main contents.

Then specified transparent part with mask tag. Write white on opaque part, black on transparent part. gray means translucent. The point is to draw white rect first, because HTML is processed from top line to bottom line.

At last, defined user icon. Drew circle with mask tag. In this way, make icon partly transparent. And drew circle periphery over. At that time, took attention to stroke-width. 円の外側と内側に stroke-width の半分の領域が塗りつぶされるため、 円の直径 と stroke-width を足した値が viewBox の幅、高さに収まるようにする必要があります。