SVG Default User Icon

I created SVG default user icon. これを使えばいちいち画像を用意する必要はありません。


First, I created basic icon shape with SVG defs tag.

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 の幅、高さに収まるようにする必要があります。

When it comes to show icon, I call the defined icon and change color and size use tag.

You can define square icon with square mask and square stroke.

I confirmed the code works on Google Chrome Version 46.0.2490.71 (64-bit).