While I was searching some tips about web design, I found this japanese designer.
He shows how you can let your browser draw Doraemon using SVG and HTML5
Here it is:
And this is the code behind:
<div>
<svg height="300px" width="400px">
<circle cx="200" cy="150" r="100" fill="#000000"></circle>
<circle cx="200" cy="150" r="98" fill="#5ccff0"></circle>
<circle cx="200" cy="168" r="80" fill="#ffffff"></circle>
<circle cx="180" cy="90" r="20" fill="#000000"></circle>
<circle cx="220" cy="90" r="20" fill="#000000"></circle>
<circle cx="180" cy="90" r="19" fill="#FFFFFF"></circle>
<circle cx="220" cy="90" r="19" fill="#FFFFFF"></circle>
<circle cx="190" cy="92" r="5" fill="#000000"></circle>
<circle cx="210" cy="92" r="5" fill="#000000"></circle>
<circle cx="200" cy="110" r="14" fill="#000000"></circle>
<circle cx="200" cy="110" r="13" fill="#ff0000"></circle>
<circle cx="200" cy="182" r="58" fill="#ff0000"></circle>
<rect x="140" y="124" width="120" height="58" fill="#ffffff"></rect>
<rect x="199" y="124" width="1" height="58" fill="#000000"></rect>
<rect x="210" y="130" width="40" height="1" fill="#000000"></rect>
<rect x="152" y="130" width="40" height="1" fill="#000000"></rect>
<rect x="210" y="150" width="50" height="1" fill="#000000"></rect>
<rect x="142" y="150" width="50" height="1" fill="#000000"></rect>
<rect x="210" y="170" width="60" height="1" fill="#000000"></rect>
<rect x="132" y="170" width="60" height="1" fill="#000000"></rect>
</svg>
</div>
The explanation: first he creates a new layer (<div> ...</ div>), then puts in a tag that tells the browser to interprete the following instructions as an svg design (<svg> ...</ svg> ). Inside the svg tag he has specified the height and width of the drawing, and then there are the instructions for drawing circles and rectangles to make the face, eyes, whiskers, etc., and here it seems pretty obvious: rect is for rectangles, circle is for cirles, xy the relative position, width, height, is width and height (want to draw a linge? Set the height to 1 pixel) and fill designates a color to fill, in 8bit RGB hexadecimal.
The main advantages of using this technique instead of placing an image are two:
- takes up much less space and so is faster to load
- you can enlarge the image indefinitely without losing quality or making it look pixelated