![\"illustrazione](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/02\/top2.jpg\")
<\/p>\n<\/p>\n
Nella Parte I<\/a>, ho analizzato il supporto dei browsers, quando potete usare SVG (e quando non dovreste) e l’accessibilit\u00e0. In questo articolo, esaminer\u00f2 la tecnologia che sta dietro l’uso di SVG per il design del vostro sito. Esploreremo come incorporare SVG in maniera “cross-browser friendly”, incluso l’utilizzo di SVGWeb per essere sicuri che SVG verr\u00e0 visualizzato in Internet Explorer. Inoltre, coprir\u00f2 anche l’unica caratteristica che rende SVG l’ideale per gli sfondi delle pagine: la scalabilit\u00e0. Ci sono molti modi per aggiungere SVG ad una pagina web, sebbene solo alcuni offrano compatibilit\u00e0 cross-browser. Settate il type allo SVG MIME type: “image\/svg+xml”. Fornite la larghezza (width) e l’altezza (height) (potete usare uno stylesheet), e settate l’attributo src al percorso del file SVG. In questo esempio, Jeff usa la versione gzipped di SVG, per risparmiare molta pi\u00f9 banda (ulteriori dettagli sulla creazione di file SVG verranno dati pi\u00f9 avanti). Per vedere l’esempio grafico, aprite il file SVG in Firefox, Opera, Safari o Chrome.<\/p>\n L’Esempio 1<\/a> mostra un oggetto SVG aggiunto ad una pagina web tramite l’elemento Attualmente, l’utilizzo dell’elemento Un altro vantaggio di questo approccio \u00e8 che potete usare files SVG esistenti e non dovete toccare lo XML.<\/p>\n Tuttavia, uno svantaggio nell’uso dell’elemento Gli svantaggi dell’usare object ci portano ad un secondo modo per includere SVG nel design di una pagina: i CSS. Con i CSS potete usare un file SVG al posto di un JPEG o di un PNG nei settings della background-image:<\/p>\n L’Esempio 2<\/a> mostra l’approccio con i CSS per aggiungere SVG come elemento di background. Questa sarebbe una buona opzione, senonch\u00e9 Firefox attualmente non supporta SVG nei CSS. Fintanto che sar\u00e0 cos\u00ec, questa non sar\u00e0 una valida opzione.<\/p>\n Potete anche usare SVG in un elemento L’ultimo approccio per aggiungere SVG ad una pagina web \u00e8 quello che io uso maggiormente. Semplicemente, incorporate SVG direttamente nella pagina, usando l’elemento SVG. Potete farlo in due modi: potete inviare le vostre pagine web come application\/xhtml+xml, funzionante in Chrome, Firefox, Safari, Opera e vari altri browser (ma non IE), come mostrato nell’Esempio 3<\/a>; oppure potete incorporare l’elemento SVG nell’HTML, inviando la pagina come HTML, cosa permessa in HTML5, come mostrato nell’Esempio 4<\/a>. Notate tuttavia che SVG incorporato in HTML funziona solo con Firefox 3.6 al momento in cui scrivo questo articolo. Inoltre, notate che il validatore HTML5 genera un errore quando incorporate SVG in HTML5 – non perch\u00e9 lo SVG sia un errore, ma perch\u00e9 soltanto un browser al momento supporta questa nuova funzionalit\u00e0.<\/p>\n Inserire l’SVG nel XHTML \u00e8 tanto semplice quanto copiare ed incollare un elemento SVG da un file. Tipicamente un file potrebbe avere un inizio, come il seguente:<\/p>\n oppure:<\/p>\n La parte che dovrete copiare \u00e8 il contenuto del file tra i tag SVG di apertura e chiusura, inclusi i tag stessi. Assicuratevi di non dimenticare il tag SVG di chiusura.<\/p>\n Potete copiare l’oggetto SVG ovunque nella pagina, ma raccomando di copiarlo in un elemento div verso la fine della pagina, come mostrato nell’Esempio 3<\/a>. Potete anche posizionarlo come immagine di sfondo usando i CSS ed assicurandovi che sia dietro a tutti gli altri elementi della pagina usando la propriet\u00e0 z-index.<\/p>\n Utilizzate la stessa procedura per inserire SVG in un documento HTML. Tuttavia, come citato prima, l’unico browser che supporta SVG in HTML \u00e8 al momento Firefox 3.6. Se avete intenzione di inserire SVG in HTML, raccomando di usare una libreria come SVGWeb. Non solo potete inserire SVG in HTML con SVGWeb, ma il risultato dovrebbe venir visualizzato anche in IE, a condizione che il plug-in per Flash sia installato.<\/p>\n<\/div>\n Usare SVGWeb \u00e8 molto semplice – basta scaricare il file zippato, che include le demo e il sorgente, ed aggiungere la libreria JavaScript alla pagina. Assicuratevi solamente che sia posizionata prima di qualunque altra libreria JavaScript:<\/p>\n SVGWeb consiste di diverse librerie, quindi dovrete o assicurarvi che le altre librerie siano nello stesso percorso della libreria svg.js primaria oppure dovrete fornire l’attributo data customizzabile di HTML5, Una volta caricate le librerie SVGWeb e aggiunti i tag script, incorporate SVG come fareste usando XHTML. E’ importante racchiudere il tag SVG con un elemento script:<\/p>\n Se la pagina \u00e8 inviata come XHTML, inserite un’impostazione CDATA:<\/p>\n L’uso di SVGWeb non solo assicura che SVG venga visualizzata in HTML, ma anche che venga visualizzata in IE. Voi aggiungete la libreria e il tag script che lo contiene e SVGWeb si prende cura del resto. Carica l’oggetto SVG\/XML, lo rende accessibile per lo scripting ed assicura che SVG venga visualizzato indipendentemente dal browser.<\/p>\n Tuttavia, c’\u00e8 un piccolo appunto da fare. La libreria SVGWeb, come la maggior parte delle librerie SVG cross-browser, richiede che JavaScript sia attivato. Inoltre, la libreria SVGWeb aumenta l’uso di banda e quando IE \u00e8 usato per accedere alla pagina, viene usata ulteriore banda per il componente Flash della libreria.<\/p>\n Sto mostrando l’uso di SVGWeb con SVG inline, ma SVGWeb funziona anche con l’elemento A prescindere dal fatto che usiate un elemento Poco fa, abbiamo mostrato come aprire un SVG elencato nell’esempio con l’elemento L’elemento SVG di Jeff ha un attributo viewBox pari alla dimensione del documento dell’oggetto grafico:<\/p>\n L’attributo viewBox assicura che l’oggetto grafico obbligato alle dimensioni del box fissate nei setting della viewBox si allarghi fino ad occupare il contenitore. Viene assegnato un valore all’attributo, le dimensioni del box in cui \u00e8 contenuto, a partire da una coppia x y, e poi la larghezza e l’altezza – x \u00e8 il primo valore, y il secondo, la larghezza \u00e8 il terzo e l’altezza \u00e8 il quarto. Quando Jeff ha aperto l’oggetto SVG in un elemento Un altro attributo SVG definisce come la grafica si ridimensiona: preserveAspectRatio<\/a>. L’oggetto SVG di Jeff non fissa specificamente questo attributo, cos\u00ec il preserveAspectRatio di SVG \u00e8 settato di default e deve ridimensionarsi proporzionalmente.<\/p>\n Potete vedere questa propriet\u00e0 in azione sul sito Emacs in Mac OS X<\/a>. In questo sito, se ridimensionate verticalmente la finestra del browser, l’immagine si ridimensiona sia orizzontalmente sia verticalmente, per assicurare che la grafica rimanga proporzionata. Lo stesso accade se la finestra del browser viene ridimensionata orizzontalmente, oppure in entrambe le direzioni.<\/p>\n Tuttavia se aprite Frugal Algorithm<\/a> e ridimensionate la finestra del browser, vedrete che la grafica pu\u00f2 distorcersi, si stringe orizzontalmente se la finestra \u00e8 ridimensionata orizzontalmente (Figura 3), o verticalmente (Figura 4), o entrambe. Infatti, ho settato il valore di preserveAspectRatio a “none”, perch\u00e9 voglio che la mia immagine riempia lo spazio che le \u00e8 assegnato, indipendentemente dalla dimensione dello spazio. Non sto tentando di preservare l’aspect ratio (rapporto d’aspetto).<\/p>\n Fig 3. Il sito Frugal Algorithm visualizzato in una finestra stretta<\/p>\n<\/div>\n Fig 4. Il sito Frugal Algorithm visualizzato in una finestra larga<\/p>\n<\/div>\n L’ultimo approccio pu\u00f2 essere un modo efficace per un’immagine di sfondo di una pagina web, ma pu\u00f2 essere impegnativo da usare. Ad esempio, ho imparato che una grafica con una larghezza 5 volte la sua altezza \u00e8 una immagine per il bordo inferiore che appare bella indipendentemente dalla dimensione del browser. Ho anche settato l’elemento SVG perch\u00e9 il suo posizionamento sia fissato, cos\u00ec da essere sempre visualizzato.<\/p>\n Un’immagine di background che si adatti all’intera pagina web pu\u00f2 essere pi\u00f9 impegnativa. Ho imparato che una singola immagine con un forte senso di diagonalit\u00e0<\/a>, ridimensionata in modo tale da riempire al 100% l’altezza e la larghezza della pagina pu\u00f2 essere una grafica di background divertente ed efficace che sembra sia creata su misura per ogni dimensione di pagina, come mostrato in Figura 5 e dimostrato anche dall’Esempio 5<\/a>.<\/p>\n Fig 5. SVG Feed site with paintbrush background image<\/p>\n<\/div>\n Per tornare all’uso che fa Jeff di SVG, egli utilizza un oggetto SVG come elemento di sfondo per creare un bordo blu che circonda il contenuto del suo sito. Tuttavia, se guardate l’oggetto SVG nella pagina, noterete che usa pi\u00f9 elementi SVG per creare tale effetto. La linea verticale \u00e8 fissata nel codice a 100 pixel di larghezza che pu\u00f2 allargarsi al 100%; quella orizzontale ha un’altezza di 100 pixel e pu\u00f2 allungarsi al 100%. Gli angoli arrotondati sono a tutti gli effetti un gradiente, definito altrove:<\/p>\n Notate che il gradiente usato per riempire i rettangoli \u00e8 definito altrove. Questo \u00e8 un altro interessante aspetto di SVG all’interno di una pagina web: potete definire dei patterns e dei gradienti in un posto ed usarli in molti posti diversi. Io ho usato questo approccio con il mio vecchio photo picker gradient<\/a> (gradiente creato a partire da un colore prelevato in una foto), per riempire il contorno dei commenti (capstones) con un gradiente basato sui colori della foto.<\/p>\n La specifica di SVG 1.1<\/a> copre altre opzioni che potete usare per gestire il rapporto d’aspetto (aspect ratio) della vostra immagine SVG.<\/p>\n<\/div>\n Potete trovare degli SVG pronti all’uso sul web e in seguito in questa sezione elencher\u00f2 delle buone risorse per SVG. Comunque, potete facilmente creare il vostro SVG, o usando uno strumento che gi\u00e0 avete, come Adobe Illustrator oppure usando un tool come Inkscape<\/a>, che \u00e8 uno strumento per grafica vettoriale disponibile gratuitamente, famoso e open source. La Figura 6 mostra Inkscape aperto, con una bitmap pronta per essere convertita in SVG. Fig 6. Inkscape con la clip art bitmap<\/p>\n<\/div>\n Se avete gi\u00e0 un semplice JPEG on un’altra grafica bitmap, potete convertire la bitmap in SVG. A seconda di quanta grafica volete catturare, potreste addirittura finire con qualcosa che a tutti gli effetti \u00e8 superiore all’originale, o perlomeno un’interessante versione dell’originale.<\/p>\n Un tool che potete utilizzare per convertire bitmaps in SVG \u00e8 Vector Magic<\/a>, che esiste sia nella variante online sia in quella desktop. Vector Magic fornisce varie opzioni per controllare l’output e fa un lavoro eccellente particolarmente con le immagini pi\u00f9 complesse. Potete provare Vector Magic senza abbonarvi per vedere l’effetto della trasformazione. WP Clipart<\/a> ha molte immagini disponibili gratuitamente che rendono bene in maniera vettoriale.<\/p>\n Potete anche usare Inkscape per convertire facilmente bitmap in SVG, come mostrano i passi seguenti:<\/p>\n Fig 7. Opening the Trace bitmap dialog window<\/p>\n \u00a0<\/p>\n<\/div>\n Fig 8. Trace bitmap dialog window<\/p>\n<\/div>\n Per farvi verificare direttamente la qualit\u00e0 di conversione da bitmap di Inkscape, ho creato le seguenti immagini SVG usando le clip art di dominio pubblico che ho trovato sul web: il logo di public domain (JPEG<\/a>, SVG<\/a>), una tazza da caff\u00e9 (PNG<\/a>, SVG<\/a>), fiori primaverili (PNG<\/a>, SVG<\/a>), pastelli colorati (PNG<\/a>, SVG<\/a>), e simboli di Halloween (PNG<\/a>, SVG<\/a>). Le ultime due hanno richiesto pi\u00f9 path finch\u00e9 non sono stata soddisfatta dell’immagine. Tipicamente, quanto pi\u00f9 \u00e8 compless un’immagine tanti pi\u00f9 paths saranno necessari per catturare tutte le variazioni di colore nell’immagine.<\/p>\n Una volta che avete il vostro SVG, i vostri disegni potranno essere statici oppure potrete usare JavaScript per animare ogni aspetto dello SVG. Potete anche usare le tecniche di animazione dichiarativa<\/a> implementate in SVG, sebbene sarebbe meglio riservare l’animazione ai diagrammi piuttosto che usarla per il design di una pagina.<\/p>\n<\/div>\n Il web \u00e8 ricco di grafiche vettoriali in altri formati quali EPS o Adobe Illustrator (.ai). Come SVG, molti file di grafica vettoriale si possono usare liberamente, perlomeno nei siti personali. Se il formato non \u00e8 gi\u00e0 un SVG, una rapida ricerca in Google mostrer\u00e0 diverse tecniche e risorse che potrete usare per convertire tale formato in SVG. Inkscape cura anche una lista dei tool di conversione<\/a>. Inoltre, Adobe Illustrator pu\u00f2 anche esportare grafiche vettoriali come SVG.
Ovviamente, per usare SVG dovete avere<\/span> SVG. In questo articolo, introdurr\u00f2 Inkscape, un tool gratis e open source che fa un lavoro fantastico nel convertire le bitmap in SVG. Parler\u00f2 anche dei molti posti online in cui trovare SVG da usare liberamente.<\/p>\n\nAggiungere SVG alle Pagine Web<\/h2>\n
Il primo metodo consiste nell’usare l’elemento object<\/span> e fare riferimento ad un file SVG esterno. Questo approccio \u00e8 attualmente il metodo pi\u00f9 usato per aggiungere SVG ad una pagina distribuita come HTML.
Per aggiungere SVG usando l’elemento object<\/span>, scrivete del markup come il seguente, che ho copiato dal sito di Jeff Schiller<\/a> (citato nella Parte I):<\/p>\n\n
\n<object type=\"image\/svg+xml\"\n width=\"100\" height=\"100\" style=\"float:right\"\n data=\"http:\/\/blog.codedread.com\/clipart\/apple.svgz\">\n <span\/><\/object>\n<\/code>\n<\/pre>\nobject<\/code>.<\/p>\nobject<\/code> \u00e8 l’unico approccio nativo che funziona in HTML. Mano a mano che il supporto per HTML5 aumenta, sempre pi\u00f9 browsers supporteranno SVG incorporato direttamente in HTML.<\/p>\nobject<\/code> \u00e8 che allungare ed allargare l’elemento object<\/code> fino a coprire un’intera pagina pu\u00f2 essere problematico, a seconda del browser. Ad esempio, Safari\/Webkit attualmente non crea un background trasparente per l’elemento object<\/code>.<\/p>\n\n
\nbody {
background-image: url(redcircle.svg);
}\n<\/code>\n<\/pre>\nimage<\/code>, ma questo ha ancora meno supporto che SVG nei CSS.<\/p>\n\n
\n<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n<svg viewBox=\"0 0 400 253\" \n version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" \n preserveAspectRatio=\"none\">\n<\/code>\n<\/pre>\n\n
\n<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<!-- Created with Inkscape (http:\/\/www.inkscape.org\/) -->\n<svg xmlns:svg=\"http:\/\/www.w3.org\/2000\/svg\"\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\n xmlns:inkscape=\"http:\/\/www.inkscape.org\/namespaces\/inkscape\"\n version=\"1.0\" \n viewBox = \"0 0 725 828\" \n preserveAspectRatio=\"none\"\n id=\"svg2\">\n<\/code>\n<\/pre>\n\nUsare SVGWeb<\/h2>\n
\n
\n<script src=\"src\/svg.js\" data-path=\"src\/\"><\/script>\n<\/code>\n<\/pre>\ndata-path<\/code>. Inoltre, assicuratevi di caricare tutti i contenuti della directory SVGWeb src in cui SVGWeb sar\u00e0 usata sul vostro sito web.<\/p>\n\n
\n<script type=\"image\/svg+xml\">\n<svg ...>...<\/svg>\n<\/script>\n<\/code>\n<\/pre>\n\n
<script type=\"image\/svg+xml\"><![CDATA[\n <svg ...>...<\/svg>\n ]]><\/script>\n<\/code>\n<\/pre>\nobject<\/code>.<\/p>\nobject<\/code> o incorporiate direttamente SVG, se volete che l’immagine si ridimensioni in accordo al contenuto della pagina, dovete usare un posizionamento assoluto per l’oggetto SVG o per object. Se volete che SVG si ridimensioni alla dimensione dell’intera pagina, anche se il contenuto della pagina si estende oltre alla parte visualizzata con la finestra del browser, aggiungete l’oggetto SVG ad un contenitore pi\u00f9 esterno che comprenda anche il contenuto della pagina. Assicuratevi che il contenuto della pagina e l’altro container siano posizionati relativamente per assicurarvi che l’oggetto SVG cambi proporzioni correttamente. Gli esempi appena citati mostrano entrambe le tecniche: l’Esempio 3 si ridimensiona per riempire l’intera pagina. L’Esempio 4 si ridimensiona solo per la finestra del browser.<\/p>\n<\/div>\n\nQuella cosa chiamata scalabilit\u00e0<\/h2>\n
object<\/code> direttamente nel vostro browser. Notate che l’oggetto grafico \u00e8 molto pi\u00f9 largo di come appare in veste di icona nella pagina di Jeff. Ci\u00f2 \u00e8 dovuto a due motivi: l’attributo viewBox di SVG<\/a> e la dimensione del contenitore nel quale \u00e8 aperto l’oggetto grafico.<\/p>\n\n
\nviewBox=\"0 0 740 850\"\n<\/code>\n<\/pre>\nobject<\/code> con una data altezza e larghezza, la grafica sembrava avere proprio quelle dimensioni. Quando \u00e8 aperta in una finestra di un browser, la grafica sembra essere molto pi\u00f9 larga.<\/p>\n\n ![\"Frugal](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/02\/figure3.png\")
<\/p>\n\n ![\"Frugal](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/02\/figure4.png\")
<\/p>\n\n ![\"SVG](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/02\/figure5.png\")
<\/p>\n\n
\n<svg id=\"leftedge\" version=\"1.1\" width=\"100%\" \n height=\"100%\" \n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"> \n<rect width=\"100px\" height=\"100%\"\n fill=\"url(#leftgrad)\" \/> \n<\/svg>\n<svg id=\"rightedge\" version=\"1.1\" width=\"100%\"\n height=\"100%\"\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<rect width=\"100px\" height=\"100%\" \n fill=\"url(#rightgrad)\" \/> <\/svg>\n<svg id=\"header\" version=\"1.1\"\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<rect width=\"100%\" height=\"100px\" fill=\"url(#topgrad)\" \/>\n<rect width=\"100px\" height=\"100px\"\n fill=\"url(#gradcornerTL)\" \/>\n<rect x=\"100%\" width=\"100px\" height=\"100px\"\n fill=\"url(#gradcornerTR)\"\n transform=\"translate(-100,0)\" \/> <\/svg>\n<\/code>\n<\/pre>\n\nCreare SVG<\/h2>\n
Un altro editor per SVG \u00e8 SVG-edit<\/a> anch’esso gratuito, basato su JavaScript. E poich\u00e9 \u00e8 basato su JavaScript, potete incorporare il tool in qualunque pagina web, fornendo cos\u00ec la possibilit\u00e0 di creare SVG ad altri. Se non volete installare un tool o inserirlo in una pagina web, potete anche usare l’editor vettoriale Raven<\/a>, sul sito web Aviary.<\/p>\n\n![\"Inkscape](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/02\/figure6.png\")
<\/p>\n\n
\n![\"Opening](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/02\/figure7.png\")
<\/p>\n\n![\"Trace](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/02\/figure8.png\")
<\/p>\n\nUtilizzare le grafiche vettoriali trovate nei vostri progetti<\/h2>\n
La Open Source Clip Art Library<\/a> \u00e8 un ottimo posto per scoprire SVG esistenti e altri differenti tipi di grafiche di pubblico dominio. Una volta che avete il file grafico, potete modificarlo per soddisfare i vostri bisogni, o combinare pi\u00f9 grafiche in una. Se siete nuovi a SVG, usate Inkscape per modificare l’immagine, altrimenti potreste essere capaci di modificare direttamente lo SVG, usando un editor XML. Una ricerca in Google con le parole “vector silhouettes” ha dato come risultato molti dei files sorgente delle silhouttes dei miei siti.<\/p>\n<\/div>\n\nOttimizzare e potenziare SVG<\/h2>\n
![\"Combing](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/02\/figure9.png\")
<\/p>\n![forte senso di diagonalit\u00e0<\/a>, ridimensionata in modo tale da riempire al 100% l’altezza e la larghezza della pagina pu\u00f2 essere una grafica di background divertente ed efficace che sembra sia creata su misura per ogni dimensione di pagina, come mostrato in Figura 5 e dimostrato anche dall’](\"https:\/\/alistapart.github.io\/code-samples\/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii\/paintbrush.svg\"){kind=link}
![JPEG<\/a>,](\"https:\/\/alistapart.github.io\/code-samples\/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii\/sample1.jpg\"){kind=link}
![SVG<\/a>), una tazza da caff\u00e9 (](\"https:\/\/alistapart.github.io\/code-samples\/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii\/sample1.svg\"){kind=link}
![PNG<\/a>,](\"https:\/\/alistapart.github.io\/code-samples\/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii\/sample2.png\"){kind=link}
![SVG<\/a>), fiori primaverili (](\"https:\/\/alistapart.github.io\/code-samples\/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii\/sample2.svg\"){kind=link}
![PNG<\/a>,](\"https:\/\/alistapart.github.io\/code-samples\/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii\/sample3.png\"){kind=link}
![SVG<\/a>), pastelli colorati (](\"https:\/\/alistapart.github.io\/code-samples\/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii\/sample3.svg\"){kind=link}
![PNG<\/a>,](\"https:\/\/alistapart.github.io\/code-samples\/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii\/sample4.png\"){kind=link}
![SVG<\/a>), e simboli di Halloween (](\"https:\/\/alistapart.github.io\/code-samples\/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii\/sample4.svg\"){kind=link}
![PNG<\/a>,](\"https:\/\/alistapart.github.io\/code-samples\/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii\/sample5.png\"){kind=link}