Cercando informazioni sulla programmazione di pagine web, mi sono imbattuto in un sito di un designer giapponese.

In poche righe mostra come far disegnare doraemon usando il supporto SVG in HTML5

Eccolo qua:

Ed ecco il codice:

<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>

La spiegazione: prima apre un nuovo layer (<div>...</div>) poi dentro ci mette un tag che indica al browser di intepretare le istruzioni successive come un disegno svg (<svg>...</svg>). Dentro svg ha specificato l'altezza e la larghezza del disegno, e poi ci sono le istruzioni per disegnare cerchi e rettangoli per fare la faccia, gli occhi, i baffi, ecc, e qua mi pare abbastanza ovvio, circle è il cerchio rect è il rettangolo, x y la posizione relativa, width la larghezza height la lunghezza (mettendola a 1 disegna delle linee) e il colore di riempimento fill in rgb 8bit esadecimale.

I vantaggi principali di usare questa tecnica invece di un'immagine sono due: occupa molto meno spazio e quindi è più veloce a caricare; inoltre si può ingrandire all'infinito senza che l'immagine si sgrani o perda di qualità