{"id":87,"date":"2010-08-02T22:29:44","date_gmt":"2010-08-02T20:29:44","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/svg-con-aiuto-raphael\/"},"modified":"2010-08-02T22:29:44","modified_gmt":"2010-08-02T20:29:44","slug":"svg-con-aiuto-raphael","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/svg-con-aiuto-raphael\/","title":{"rendered":"SVG con un piccolo aiuto da Rapha\u00ebl"},"content":{"rendered":"<p><script src=\"http:\/\/www.alistapart.com\/d\/svg-with-a-little-help-from-raphael\/raphael.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/www.alistapart.com\/d\/svg-with-a-little-help-from-raphael\/pie.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/www.alistapart.com\/d\/svg-with-a-little-help-from-raphael\/jquery.js\" type=\"text\/javascript\"><\/script><\/p>\n<p><a href=\"http:\/\/raphaeljs.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/08\/n11a2.jpg\" border=\"0\" width=\"257\" height=\"159\" align=\"left\" \/>Rapha\u00ebl<\/a> \u00e8 una libreria JavaScript leggera che permette il rendering delle immagini <abbr title=\"Scalable Vector Graphics\">SVG<\/abbr>, inclusi i diagrammi, i grafici, le animazioni basate su vettoriale e i componenti delle <abbr title=\"Graphical User Interface\">GUI<\/abbr> proprio all&#8217;interno delle vostre pagine web. Ora starete probabilmente pensando: &#8220;Posso gi\u00e0 fare questo con jQuery, con Google Charts o addirittura con Flash!&#8221;. Sebbene questo sia vero, Rapha\u00ebl offre nuove possibilit\u00e0 che al momento non sono disponibili con le altre tecnologie appena citate. Cerchiamo di capire come creare delle immagini vettoriali scalabili all&#8217;interno del codice che funzionino sui vari browser e che &#8220;degradino dolcemente&#8221; [&#8220;gracefully degrade&#8221;, <em>ndr<\/em>].<\/p>\n<div class=\"paragrafo\">\n<h2>Un linguaggio open per un open web<\/h2>\n<p>Il web \u00e8 soprattutto open standard e tecnologie libere. Rapha\u00ebl, che si avvale dello standard SVG del <abbr title=\"World Wide Web Consortium\">W3C<\/abbr> e di una MIT License per l&#8217;open source, calza a pennello all&#8217;open web.<\/p>\n<p>Ma come la mettiamo con Internet Explorer 6? Non supporta SVG! Questo \u00e8 vero, ma IE6 supporta il suo VML (Vector Markup Language) proprietario. (IE9 ha messo in programma il supporto per SVG 1.1. Si noti che Rapha\u00ebl si basa sulla feature detection invece che sullo user agent <abbr title=\"User Agent\">(UA)<\/abbr> sniffing. IE7 e IE8 non sanno cosa farsene di un file SVG, cos\u00ec Rapha\u00ebl cambia automaticamente modalit\u00e0 al  posto vostro). Rapha\u00ebl rimuove tutto il non-sense dai browser cos\u00ec che voi non dobbiate averci a che fare. Lo stesso codice JavaScript creer\u00e0 una bellissima immagine SVG o VML basandosi sulle capacit\u00e0 del browser. Scrivetelo una volta e usatelo per sempre! Evitando Flash per la grafica vettoriale, potrete rendere il vostro output disponibile su pi\u00f9 device, inclusi i browser mobile WebKit e i device iOS. La vostra grafica creativa, interattiva e scalabile sar\u00e0 bellissima a qualunque risoluzione su qualsiasi device supportato.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>jQuery<\/h2>\n<p>E <a href=\"http:\/\/jquery.com\/\">jQuery<\/a>? Ha moltissimi plugin per la grafica, perch\u00e9 dovrei passare a Rapha\u00ebl?<\/p>\n<p>Ci sono moltissimi interessanti plugin di jQuery per la grafica, quali <a href=\"http:\/\/www.jqplot.com\/\">jqPlot<\/a>, <a href=\"http:\/\/code.google.com\/p\/flot\/\">Flot<\/a>, <a href=\"http:\/\/plugins.jquery.com\/project\/svg\">jQuery SVG<\/a> e altri. Con jQuery dovete destinare pi\u00f9 di 50 <abbr title=\"kilobyte\">KB<\/abbr> alla versione ridotta della libreria. Poi, dovete aggiungere il core UI, alcuni plugin e delle librerie extra per farlo funzionare con IE. Byte per byte, jQuery ci va pesante, ma avete dei bit extra che non sono sempre necessari.<\/p>\n<p>Rapha\u00ebl \u00e8 nel complesso pi\u00f9 piccolo per creare delle grafiche vettoriali di base. Tenere d&#8217;occhio il peso in KB del vostro lavoro \u00e8 qualcosa da tenere in considerazione mentre si stanno sviluppando applicazioni su larga scala, ma lo stesso vale anche per la scelta del miglior tool per eseguire un lavoro.<\/p>\n<p>Non deve essere uno scenario &#8220;aut aut&#8221;, o l&#8217;uno o l&#8217;altro: se state gi\u00e0 usando jQuery, potete benissimo usare anche Rapha\u00ebl senza alcun conflitto e mixare ed usare contemporaneamente i due. Molte di queste librerie JavaScript convivono armoniosamente, il che rende la vita pi\u00f9 semplice a noi sviluppatori.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Immagini dinamiche<\/h2>\n<p>Prima di avere tutte queste librerie, tool e web services a nostra disposizione, la grafica generata dinamicamente era creata sul server dagli script Common Gateway Interface <abbr title=\"Common Gateway Interface\">(CGI)<\/abbr>. Come sono cambiate le cose! Adesso abbiamo accesso a servizi come Google Charts e altri che utilizzano la <a href=\"http:\/\/it.wikipedia.org\/wiki\/Representational_State_Transfer\">Representational State Transfer<\/a> <abbr title=\"Representational State Transfer\">(REST)<\/abbr>. Specificate semplicemente i parametri ed otterrete una graziosa immagine!<\/p>\n<p>Integrare Google Charts in un elemento<code>&lt;img&gt;<\/code> \u00e8 un modo facile e flessibile per creare al volo un gradevole grafico a barre, ma ha i suoi risvolti negativi. In quanto elemento immagine, vi rimane solo l&#8217;attributo <code>alt<\/code>: dovete usare <code>longdesc<\/code> o un qualche tipo di mappa immagine per assegnare una label alle regioni. Tutti i dati risiedono nei pixel, non nel HTML. Le immagini statiche vengono rese ad una data dimensione: ci\u00f2 implica che quando ingrandite l&#8217;immagine, questa risulta &#8220;spixellata&#8221;. Man mano che comincerete a creare dei workflow professionali, vi imbatterete in problemi con le immagini raster come GIF, JPEG e PNG, che non si scalano molto bene n\u00e9 per quel che riguarda l&#8217;ingrandimento n\u00e9 per la riduzione. Al contrario, SVG \u00e8 fatto di vettori, cos\u00ec da essere indipendente dalla risoluzione. Dal momento che il web \u00e8 disponibile in qualunque forma e dimensione, e dal momento che i dati vengono spesso passati da online a offline, le immagini devono mantenere la loro risoluzione, dalla qualit\u00e0 di stampa fino alla bassa definizione di 72dpi delle risoluzioni dei monitor, passando per tutti i valori tra questi due estremi.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Esempi<\/h2>\n<h3>Progressive Enhancement<\/h3>\n<p>Rapha\u00ebl usa JavaScript per inserire SVG o VML nelle vostre pagine HTML. Questo significa che il vostro browser deve supportare JavaScript per poter visualizzare la grafica risultante. Mentre vi aspettereste che la maggior parte delle persone che visitano il vostro sito con un qualunque browser moderno abbia JavaScript attivato, cos\u00ec come il supporto per SVG, la maggior parte ed i pi\u00f9 importanti tra i vostri clienti non l&#8217;avranno: i robot dei motori di ricerca, come Google Bot, non interpretano JavaScript. Non vedono la vostra magnifica grafica, ma solo un <code>div<\/code> vuoto, senza contenuto!<\/p>\n<div id=\"myHolderPie\" style=\"background-color: #000000;\">Created with Rapha\u00eblCaloriesSaturated FatsProteinVitamin BVitamin C<\/div>\n<p><\/p>\n<p>E&#8217; qui che entra in gioco il progressive enhancement. I puri dati HTML fungono da base. Potrebbe non sembrare carino come una tabella o una lista, ma \u00e8 semanticamente corretto ed aggiunge degli aggangi per i motori di ricerca affinch\u00e9 indicizzino il vostro contenuto. E&#8217; ora possibile usare HTML come vostra sorgente dati quando costruite la grafica con Rapha\u00ebl.<\/p>\n<table id=\"nutritionFacts\" border=\"0\">\n<caption>Informazioni nutrizionali per il prodotto X<\/caption>\n<tbody>\n<tr>\n<th scope=\"row\">Calorie<\/th>\n<td>45%<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Grassi Saturi<\/th>\n<td>25%<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Proteine<\/th>\n<td>15%<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Vitamina B<\/th>\n<td>10%<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Vitamina C<\/th>\n<td>5%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><script type=\"text\/javascript\">\/\/ &lt;![CDATA[<\/p>\n<p>\/* [CDATA[ *\/\nfunction pieMe() {\n  var values = [],\n    labels = [],\n    nfTable = document.getElementById(\"nutritionFacts\"),\n    i = 0,\n    rows = nfTable.rows.length;<\/p>\n<p>  for(;i < rows;i++) {\n    trRow = nfTable.getElementsByTagName(\"tr\")[i];\n    labels.push(trRow.getElementsByTagName(\"th\")[0].firstChild.nodeValue);\n    values.push(parseInt(trRow.getElementsByTagName(\"td\")[0].firstChild.nodeValue, 10));\n  }\n  nfTable.style.position = 'absolute';\n  nfTable.style.left = '-999em';\n  Raphael(\"myHolderPie\", 540, 400).pieChart(270, 200, 100, values, labels, \"#fff\");\n}\npieMe();\n\/* ]] *\/\n\/\/ --&gt;\n\/\/ ]]&gt;<\/script><\/p>\n<p>Per prima cosa, creiamo una tabella di valori che sommati danno il 100%. Questi saranno i valori per ciascuno spicchio nel diagramma a torta. Possiamo potenziare la tabella regolare se il browser lo supporta.<\/p>\n<pre><code>&lt;table id=\"nutritionFacts\"&gt;<br \/>  &lt;caption&gt;Informazioni nutrizionali di un prodotto X&lt;\/caption&gt;<br \/><br \/>  &lt;tr&gt;<br \/>    &lt;th scope=\"row\"&gt;Calorie&lt;\/th&gt;<br \/>    &lt;td&gt;45%&lt;\/td&gt;<br \/>  &lt;\/tr&gt;<br \/>  &lt;tr&gt;<br \/><br \/>    &lt;th scope=\"row\"&gt;Grassi Saturi&lt;\/th&gt;<br \/>    &lt;td&gt;25%&lt;\/td&gt;<br \/>  &lt;\/tr&gt;<br \/>  &lt;tr&gt;<br \/>    &lt;th scope=\"row\"&gt;Proteine&lt;\/th&gt;<br \/><br \/>    &lt;td&gt;15%&lt;\/td&gt;<br \/>  &lt;\/tr&gt;<br \/>  &lt;tr&gt;<br \/>    &lt;th scope=\"row\"&gt;Vitamina B&lt;\/th&gt;<br \/>    &lt;td&gt;10%&lt;\/td&gt;<br \/><br \/>  &lt;\/tr&gt;<br \/>  &lt;tr&gt;<br \/>    &lt;th scope=\"row\"&gt;Vitamina C&lt;\/th&gt;<br \/>    &lt;td&gt;5%&lt;\/td&gt;<br \/>  &lt;\/tr&gt;<br \/><br \/>&lt;\/table&gt;<\/code><\/pre>\n<p>Ora che abbiamo i nostri dati di base, possiamo aggiungere qualche libreria esterna. Per prima cosa dobbiamo includere Rapha\u00ebl.<\/p>\n<pre><code>&lt;script src=\"raphael.js\" type=\"text\/javascript\" charset=\"utf-8\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Poi useremo il sistema di plugin di Rapha\u00ebl per includere il plugin Pie Charts. [\"grafici a torta\", <em>ndr<\/em>]<\/p>\n<pre><code>&lt;script src=\"pie.js\" type=\"text\/javascript\" charset=\"utf-8\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Questo ci d\u00e0 accesso a tutti i tool di cui abbiamo bisogno per convertire in maniera semplice la tabella in un'immagine SVG. Per generare un grafico a torta, dobbiamo prima creare due array, uno per le label ed uno per i valori.<\/p>\n<p>(Gli a-capo sono segnati con \u00bb <em>\u2014Ed.<\/em>)<\/p>\n<pre><code>var values = [],<br \/>  labels = [],<br \/>  nfTable = document.getElementById(\"nutritionFacts\"),<br \/>  i = 0, <br \/>  rows = nfTable.rows.length;<br \/><br \/>for( ;i &lt; rows; i++) {<br \/>  trRow = nfTable.getElementsByTagName(\"tr\")[i];<br \/>  labels.push(trRow.getElementsByTagName(\"th\")[0].firstChild.nodeValue);<br \/>  values.push(parseInt(trRow.getElementsByTagName(\"td\")[0]<br \/>  .firstChild.nodeValue, 10));<br \/>}<br \/><br \/>nfTable.style.position = 'absolute';<br \/>nfTable.style.left = '-999em';<br \/><\/code><\/pre>\n<p>Ora, per ogni elemento <code>&lt;tr&gt;<\/code> facciamo un loop, mettendo ciascun <code>&lt;th&gt;<\/code> nell'array del label e ciascun <code>&lt;td&gt;<\/code> nell'array dei valori. Alla fine, nascondiamo la tabella, dal momento che la rimpiazzeremo con il grafico a torta tra poco.<\/p>\n<pre><code>raphael(\"myHolderPie\", 540, 400).pieChart(270, 200, 100,<br \/>  values, labels, \"#fff\");<\/code><\/pre>\n<p>Per visualizzare il grafico a torta, usiamo l'oggetto Rapha\u00ebl, specifichiamo un <code>id<\/code> per l'elemento ed alcune dimensioni. In questo caso, stiamo usando il <code>div<\/code> <var>myHolderPie<\/var>. Gli assegniamo una larghezza di 540 pixel ed un'altezza di 400 pixel. Poi aggiungiamo la funzione pieChart a quell'area. La funzione pieChart ha diverse variabili, tra cui il punto centrale da sinistra e da destra. In questo caso partiamo a 270px dal lato sinistro dell'elemento contenitore. L'argomento successivo \u00e8 200, che \u00e8 il numero di pixel dal top dell'elemento contenitore. Il 100 dice al codice di creare un grafico a torta con un diametro di 100 pixel. (Provate voi stessi ad aumentare il numero a 200 o a diminuirlo fino a 50 per vedere cosa succede). I prossimi due argomenti sono i valori del grafico a torta e delle label che abbiamo costruito usando jQuery. L'ultimo argomento \u00e8 il valore HEX per il profilo dello spicchio. Se cancellate questo argomento, allora non ci saranno bordi.<\/p>\n<p><a href=\"http:\/\/g.raphaeljs.com\/\">gRapha\u00ebl<\/a> ha pi\u00f9 informazioni riguardanti i tipi di grafici che potete usare per creare le immagini.<\/p>\n<p>Ricordatevi che ogni volta che sostituite una tabella o un'altra informazione con un'immagine creativa o con un'interfaccia interattiva, dovete considerare quel che guadagnate e quel che perdete. L'accessibilit\u00e0 \u00e8 importante: se i vostri lettori hanno solo una tastiera, possono ancora usare il tasto tab per accedere ai dati? Gli utenti non vedenti possono accedere all'informazione nel nuovo contenuto come potevano con l'originale? Nel nostro caso, una tabella accessibile \u00e8 stata sostituita con una risorsa meno accessibile, ma la vecchia tabella \u00e8 stata nascosta ed \u00e8 ancora disponibile per gli utenti che utilizzano uno screen reader. Tuttavia, il nuovo contenuto limita l'utilizzo da parte degli utenti che hanno solo la tastiera. Il supporto per i roles di Accessible Rich Internet Applications (ARIA) del W3C e per <code>tabIndex=\"0\"<\/code> in SVG potrebbero essere d'aiuto in futuro per affrontare i limiti imposti dall'accessibilit\u00e0, ma al momento non fanno parte del plugin Rapha\u00ebl.<\/p>\n<h3>Animazioni<\/h3>\n<p>Al suo interno, Rapha\u00ebl ha implementate diverse funzionalit\u00e0 di animazione interessanti. Una veramente interessate \u00e8 la capacit\u00e0 di tracciare un percorso. Immaginate di lavorare per l'Edinburgh Tourist Council. Il Castello di Edinburgo \u00e8 una destinazione popolare e volete mostrare il percorso pi\u00f9 rapido e semplice per raggiungerlo partendo dalla stazione dei treni. Non sarebbe bellissimo se poteste tracciare un percorso da fare a piedi?<\/p>\n<div id=\"myMapHolder\"><img decoding=\"async\" src=\"https:\/\/alistapart.com\/wp-content\/uploads\/2012\/07\/map.png\" border=\"0\" alt=\"Map of Edinburgh\" \/><\/div>\n<p><script type=\"text\/javascript\">\/\/ &lt;![CDATA[<\/p>\n<p>function tracePath(){\n  document.getElementById(\"myMapHolder\").removeChild(document.getElementById(\"myMapHolder\").childNodes[0]);\n  var r = Raphael(\"myMapHolder\", 540, 403), c = r.image(\"https:\/\/alistapart.com\/wp-content\/uploads\/2012\/07\/map.png\", 0, 0, 540, 403), p = r.path(\"M513.859,35.222l-95.332,24.667l18.666,76.667l-131.334,46c0,0-10.667,3.333-11.333,13.333c-0.891,13.371-42.748,23.018-42.748,23.018s-13.252,3.648-9.252,18.315s14.667,43.333,14.667,43.333l-104.667,22.667\").attr({stroke: \"#f00\", opacity: .7, \"stroke-width\": 5}),e = r.ellipse(513.859,35.333, 7, 7).attr({stroke: \"none\", opacity: .7, fill: \"#f00\"});<\/p>\n<p>  function run() {\n    e.animateAlong(p, 20000, false, function () {\n      e.attr({cx: 513.859 , cy: 35.333, rotation: 0});\n      run();\n    });\n  }\n  run();\n}\ntracePath();\n\/\/ ]]&gt;<\/script><\/p>\n<p>Creare questa animazione con Rapha\u00ebl \u00e8 come schioccare le dita! Per prima cosa, avete bisogno di una mappa che funga da base sullo sfondo. Seconda cosa, dovete creare un percorso da seguire e alla fine qualche riga di JavaScript metter\u00e0 tutto insieme.<\/p>\n<p>Innanzitutto, dobbiamo creare un'area di Rapha\u00ebl in cui mettere tutta la nostra SVG. In questo esempio, useremo il <code>div<\/code> <var>myMapHolder<\/var> e creeremo un'area che sar\u00e0 larga 540 pixel e alta 403 pixel.<\/p>\n<pre><code>var myMap = raphael(\"myMapHolder\", 540, 403);<\/code><\/pre>\n<p>Poi inseriamo un'immagine di sfondo di una mappa. Io ho usato uno screenshot da <a href=\"http:\/\/www.openstreetmap.org\/\">Open Street Map<\/a>, ma potete usare una qualsiasi immagine. Per essere sicuri che gli utenti senza JavaScript siano in grado di visualizzare la mappa, aggiungiamo un elemento <code>&lt;img&gt;<\/code> con un link all'immagine della mappa all'interno del <code>div<\/code> <var>myMapHolder<\/var>. La prima cosa da fare con JavaScript \u00e8 rimuovere questa immagine di base cos\u00ec che la mappa pi\u00f9 dinamica possa essere caricata al suo posto.<\/p>\n<pre><code>var myMapHolder = document.getElementById(\"myMapHolder\");<br \/>myMapHolder.removeChild(myMapHolder.childNodes[0]);<br \/>var myImage = myMap.image(\"map.png\", 0, 0, 540, 403);<\/code><\/pre>\n<p>L'ho posizionata a zero pixel dal top e a zero pixel da sinistra nel contenitore, poi ho specificato le dimensioni dell'immagine stessa: 540 per 403 pixel.<\/p>\n<pre><code>var myPath = myMap.path(\"M513.859,35.222l-95.332,24.667l\" +<br \/>    \"18.666,76.667l-131.334,46c0,0-10.667,\" +<br \/>    \"3.333-11.333,13.333c-0.891,13.371-42.748,\" +<br \/>    \"23.018-42.748,23.018s-13.252,3.648-9.252,\" +<br \/>    \"18.315s14.667,43.333,14.667,43.333l-104.667,22.667\")<br \/>                  .attr({<br \/>                    stroke: \"#f00\",<br \/>                    opacity: .7,<br \/>                    \"stroke-width\": 5<br \/>                  });<br \/><\/code><\/pre>\n<p>Adesso arriva la parte un po' pi\u00f9 critica: il codice per il percorso SVG. Ho tracciato la mappa in Illustratore e ho salvato il percorso come SVG e l'ho copiato qui: il modo pi\u00f9 facile per creare velocemente un percorso complesso. Come potete vedere, inoltre, abbiamo attaccato la funzione <code>attr()<\/code> per specificare il colore, l'opacit\u00e0 e la larghezza del percorso. Questo creer\u00e0 una linea rossa, con opacit\u00e0 al 70%, larga cinque pixel.<\/p>\n<pre><code>var myMarker = myMap.ellipse(513.859,35.333, 7, 7).attr({<br \/>  \t\tstroke: \"none\", <br \/>  \t\topacity: .7, <br \/>  \t\tfill: \"#f00\"<br \/>\t});<br \/>\t<\/code><\/pre>\n<p>Una volta creata la mappa ed il percorso, dobbiamo creare un piccolo punto \u201cda far girare nel labirinto\u201d. Questo \u00e8 il codice che crea un cerchio con un raggio di sette pixel che parte dal punto 513.859,35.333. Abbiamo anche attaccato alcuni attributi aggiuntivi per rimuovere il bordo, cambiare l'opacit\u00e0 ed il colore del punto.<\/p>\n<pre><code>function run() {<br \/>  myMarker.animateAlong(p, 20000, false, function () {<br \/>    myMarker.attr({ cx: 513.859, cy: 35.333, rotation: 0 });<br \/>    run();<br \/>  });<br \/>}<br \/><br \/>run();<\/code><\/pre>\n<p>Alla fine, mettiamo tutto insieme e facciamo partire l'animazione. Creiamo una funzione chiamata <code>run()<\/code>, che sposta il punto lungo il percorso. Quando termina la sua esecuzione, si resetta e va in loop pi\u00f9 e pi\u00f9 volte.<\/p>\n<p>Ora, per animare il punto, lo piazziamo nella variabile <var>myMarker<\/var> e scriviamo <code>myMarker.animationAlong()<\/code>. Questa funzione ha diversi argomenti: per primo specifichiamo il percorso che vogliamo che segua, nel nostro caso \u201cmyPath,\u201d; poi, specifichiamo la durata per la lunghezza di tempo che vogliamo che il punto impieghi per percorrere il percorso. L'argomento successivo ruota l'oggetto lungo il percorso. Noi non vogliamo questo effetto, pertanto impostiamo questo argomento a \"false\". Infine, abbiamo una funzione callback, che in questo caso riporta il puntino alla posizione di partenza, per creare il loop.<\/p>\n<p>Potete guardare l'intero script insieme all'esempio, cos\u00ec potete vedere il sorgente per adattarlo alle vostre esigenze.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Benefici di SVG sul web<\/h2>\n<p>Con l'aumentare della popolarit\u00e0 di HTML5, SVG ha come rivale l'elemento<code>&lt;canvas&gt;<\/code>. Entrambe possono disegnare immagini sullo schermo, il che rende un po' difficile decidere quale usare. La differenza pi\u00f9 grande \u00e8 che gli elementi SVG fanno parte dell'alberatura DOM. Con <code>canvas<\/code> potete solo accedere all'elemento root <code>&lt;canvas&gt;<\/code>.<\/p>\n<p>Dal momento che SVG fa parte del DOM, potete aggiungere degli eventi a tutte le porzioni individuali di un'immagine SVG. Le azioni come <code>onClick<\/code>, <code>onTap<\/code> o <code>onHover<\/code> rendono tutte le immagini SVG flessibili al punto da diventare un sostituto completo di Flash. Dal momento che questi eventi possono essere creati a run time, a seconda del browser\/device e delle sue capacit\u00e0, si pu\u00f2 creare un'esperienza \"progressively enhanced\". Con <code>&lt;canvas&gt;<\/code> il disegno non fa parte del DOM e sacrificate l'interattivit\u00e0 per un'alberatura DOM che richiede meno memoria. Inserire un'immagine SVG complessa potrebbe far bloccare le macchine pi\u00f9 lente mentre stanno renderizzando migliaia di nodi DOM.<\/p>\n<p>SVG \u00e8 scalabile, cos\u00ec, mentre sempre pi\u00f9 browser si muovono verso il meccanismo \u201czoom\u201d piuttosto che \u201cscale\u201d per aumentare la dimensione dei font e delle immagini, SVG mantiene i suoi bordi ben definiti. L'elemento <code>&lt;canvas&gt;<\/code> \u00e8 rasterizzato e quindi diventa \"spixellato\".<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>SVG: uno standard W3C<\/h2>\n<p>SVG \u00e8 uno standard W3C, il che significa che nessuno prender\u00e0 le sue cose e se ne andr\u00e0 via, lasciandovi bloccati con tonnellate di codice inutile. Dal momento che non solo \u00e8 open, ma anche royalty-free, sempre pi\u00f9 applicazioni, device e servizi saranno sia fruitori sia distributori di SVG. Un ecosistema valido \u00e8 emerso, al punto che SVG non sparir\u00e0. Significa anche che non dovete preoccuparvi dell'implementazione dei dettagli. Le applicazioni fanno tutto il duro lavoro, creando i nodi SVG ed i path per voi. Il puro XML c'\u00e8 ancora, se volete dare un'occhiata al codice e cambiarlo a seconda delle vostre esigenze.<\/p>\n<p>Illustrazioni dell'articolo: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Volete creare delle immagini vettoriali scalabili (SVG) che siano creative, interattive, appaiano bellissime ad ogni risoluzione eme\/em degradino con grazia? Brian Suda vi spinge ad usare Rapha\u00ebl per il lavoro duro con SVG.<\/p>\n","protected":false},"author":818,"featured_media":7000585,"comment_status":"open","ping_status":"open","template":"","categories":[242,271,24],"tags":[],"coauthors":[305],"class_list":["post-87","article","type-article","status-publish","has-post-thumbnail","hentry","category-browser","category-javascript","category-numero-11-3-agostoo-2010"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=87"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000585"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=87"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}