Images: drawing smileys

The easiest way to use your own SVG-images is to write a separate file for it with the extention .svg and call it with the basic HTML-img tag. That way you can use the image through your websites ánd give it the required attributes for SEO, validation etc.:

<img src="path to image & filename" alt="alternative text" width="image-width" height="image-height">

I started making a basic shape: the circle (easy peasy) and I looked up the color on facebook to get the same fill (I used a color-picker to get the hex-code, which is #fbd771).

I noticed that the smiley was a bit above the line and played around with the image-height, tried transform="translate(0,4)", changed viewbox values and I tried changing the circle cy-value, this all didn't give much result but I think I am okay with that for now

 

 

 

 

 

 

  It's tougher than I thought...

The images are basically okay, but they don't really stand out, so I tried giving them an outline in black, which I feel looks great .

It was a bit of work at first, just adding a stroke to the smiley worked more or less, except for the fact that the outline was invisible at the top, bottom, left and right side. The reason for that was that the circle takes up the whole space of 16px and the 0.2 stroke did not fit in at the outer edges. But setting cx and cy to 8.2 instead of 8 and increasing the svg-width and height from 16 to 16.4 did it.

By the way, important: in the width- and height attribute of the img-tag itself you can only use integer values in pixels, so even if I have 16.4 in my SVG-code, I can not do that with the img-width and height because that doesn't validate, so I gave the img-tag a width and height of 17 instead of 16.

The code of the winking smiley:

<svg version="1.1"
width="16.4" height="16.4"
xmlns="http://www.w3.org/2000/svg">
<!--The head-->
<circle cx="8.2" cy="8.2" r="8" stroke="#000000" stroke-width="0.2" fill="#fbd771" />
<!--The eyes-->
<circle cx="5.2" cy="6" r="1.4" fill="black"/>
<path d="M 9 5 C 9 7, 12 7, 13 6" stroke="black" stroke-width="1.2" fill="transparent"/>
<!--The mouth-->
<path d="M 4 10 C 5 13, 11 13, 12 9" stroke="black" fill="transparent"/>
</svg>