Dec 122011
 

Fra le maggiorni novità di html5 c’è un diverso approcio alla grafica, da adesso in avanti flash avrà vita durissima, per esempio perché sarà possibile inserire della grafica vettoriale via svg, cioè xml, con totale controllo del codice, senza ricorrere a plug-in. Un primissimo esempio è dato da un abbozzo di grafico a barre realizzato con svg appunto.

Il rislutato finale sarà decisamente “acerbo” ma l’idea è vedere quanto sia banale inserire svg e utilizzare gli elementi più semplici.

E infatti per avere svg nelle pagine non c’è niente da fare asta inserirlo:


<body>
<h2>HTML5 SVG Un’idea di grafico</h2>
<svg id=”svgelem” height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<rect id=”greenrect” width=”250″ height=”20″ fill=”green” x=”0″ y=”0″ />
<rect id=”blurect” width=”200″ height=”20″ fill=”blue” x=”0″ y=”30″ />
<rect id=”redrect” width=”300″ height=”20″ fill=”red” x=”0″ y=”60″ />
</svg>
</body>

si visualizzeranno 3 semplici rettangoli uno a finaco a l’altro, la posizione è determinata dalle coordinate x e y, width ed height sono le dimensioni fill lo colora.

Il supporto dei browser? Assicurato da tutti i borwser moderni, internet explorer nelle versioni precedenti alla 9 dovrebbe aver bisogno del plug-in svg viewer.

L’esempio

 Posted by at 12:52 pm  Tagged with:

Sorry, the comment form is closed at this time.