Il formato SVG, o Scalable Vector Graphics, consente di descrivere degli oggetti grafici tramite le loro proprietà geometriche anziché tramite il colore dei pixel, analogamente ad altri formati di grafica vettoriale. Si basa sul linguaggio XML, è definito come standard dal consorzio W3C e si presta all'utilizzo in ambito web.
Per disegnare a tali figure geometriche, è necessario un passaggio intermedio detto "rasterizzazione" (in inglese rastering), che si occupa di calcolare il colore dei singoli pixel che rappresenteranno l'immagine a schermo.
Fig. 1 Esempio di immagine vettoriale
A valle di questo passaggio si inserisce una fase di post processing, all'interno della quale applicare una serie di filtri prima di restituire l'immagine finale. Anche i filtri sono standardizzati dal W3C, che ne stabilisce la tipologia, i parametri e i meccanismi di connessione in modo molto flessibile.
Fig. 2 La stessa immagine con una serie di filtri applicati
Microsoft ha introdotto il supporto al formato SVG sul proprio browser a partire da Internet Explorer 9 e con IE10 ha introdotto il supporto ai filtri accelerato in hardware, sia per i normali siti Web sia per le App del Windows Store scritte in JavaScript e HTML. Vediamo l'esempio di codice che riproduce l'immagine di Fig. 2
<!DOCTYPE html> <html><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Example filters01.svg - introducing filter effects</title> </head><body> <svg width="7.5cm" height="5cm" viewBox="0 0 200 120"> <desc>An example that combines multiple filter primitives to produce a 3D lighting effect on a graphic. The graphic contains the string "SVG" sitting on top of an oval filled in red and surrounded by an oval outlined in red.</desc> <defs> <filter id="MyFilter" filterUnits="userSpaceOnUse"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="litPaint"/> </feMerge> </filter> </defs> <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" /> <g filter="url(#MyFilter)" > <g> <path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" /> <path fill="#D90000" d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" > <text x="52" y="76">SVG</text> </g> </g> </g> </svg> </body></html> |
Potete anche visitare la corrispondente pagina di esempio qui ( https://dl.dropboxusercontent.com/u/65618619/test-svg.html ).
Come si vede dall'esempio, il filtro chiamato MyFilter è il risultato della composizione di numerosi passaggi intermedi, ciascuno dei quali specifica degli input e output e diversi parametri, documentati nel dettaglio qui ( http://www.w3.org/TR/SVG/filters.html ). Il risultato di un filtro può essere usato come input per un secondo filtro, ottenendo quindi una rete arbitrariamente complessa.
L'immagine sorgente è invece descritta all'interno dei tag <g>, ed è composto da 3 elementi: due ovali (uno filled, l'altro outline) e un elemento text.
Fig. 3 Grafo dei filtri
Inoltre, secondo le specifiche, una sorgente SVG può contenere al suo interno anche delle immagini raster, quindi qualsiasi sorgente di tipo png, jpg, gif, ecc... Pertanto è possibile usare questo meccanismo anche per applicare filtri di vario tipo alle foto, come illustrato da questo sito di esempio: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm.
Fig. 4 Esempio interattivo con filtri SVG
In ultimo, è possibile esportare file SVG compresi di filtri da programmi di grafica come Inkscape, lasciando quindi massima libertà alla produzione grafica ed integrando l'XML finale nella pagina HTML in modo molto semplice.
Per ulteriori approfondimenti:
http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
http://www.w3.org/TR/SVG/filters.html
Anda sedang membaca artikel tentang
Grafica vettoriale SVG e Filtri in IE10
Dengan url
https://ibudanaksehat.blogspot.com/2013/07/grafica-vettoriale-svg-e-filtri-in-ie10.html
Anda boleh menyebar luaskannya atau mengcopy paste-nya
Grafica vettoriale SVG e Filtri in IE10
namun jangan lupa untuk meletakkan link
Grafica vettoriale SVG e Filtri in IE10
sebagai sumbernya
0 komentar:
Posting Komentar