La Grafica Vettoriale applicata al Web, il Formato SVG

Poco tempo fa vi abbiamo introdotto in quello che è il mondo del markup e dei suoi principali linguaggi, in tal senso vi invitiamo a sfogliare il nostro blog, qualora non l’aveste già fatto, e a meglio documentarvi su quelli che sono i nostri migliori articoli, tra questi troverete sicuramente l’articolo che apre la finestra sui vari linguaggi e un secondo articolo che parla di quello che forse risulta essere il linguaggio di markup per antonomasia, ovvero il linguaggio HTML.

In questo articolo, invece, andiamo ad unire due mondi paralleli che hanno imparato a coesistere e oltre ad aver instaurato una fraterna simbiosi si sono fusi per dar vita ad uno dei più esoterici dei linguaggi di markup e degli utilizzi della grafica, riuscendo ad unire, non solo i due mondi, ma anche a fondere due mestieri creativi, quello del graphic designer e quello del web designer, riscrivendo il concetto di design della creazione dei siti web e alla creazione di e-commerce, riscrivendo ancora una volta la storia dell’arte, stiamo parlando del mondo della grafica vettoriale, che fusa all’estensione del linguaggio di markup XML danno vita al linguaggio grafico SVG, Scalable Vector Graphics.

Il formato .SVG

Il formato SVG una particolare estensione, o meglio dire, è un particolare formato, in grado, di visualizzare e far visualizzare al mondo del WEB gli oggetti in Grafica Vettoriale, e quindi, consente e permette di modificarne le dimensioni senza alcuna perdita di qualità visiva.
In particolare, il formato SVG, grazie alla sua stretta collaborazione con il linguaggio di markup XML e al mondo in cui i due lavorano abitualmente e grazie anche al costante monitoraggio del consorzio W3C riescono a lavorare sul WEB andando a descrivere forme e figure grafiche animate e non.

Cosa ne pensa W3C sull’utilizzo del formato SVG?

W3C ha espresso parere favorevole a questo formato, anzi, ove possibile ne raccomanda l’ampio utilizzo, in quanto SGV e un linguaggio nativamente supportato dal web e dai Browser come Google Chrome , Mozilla FireFox e Opera, menzione a parte va fatta per Safari, che sino a poco tempo fa non supportava questo formato, ma il WEB tutto, ha insistito per tale evoluzione, poi avvenuta, ovviamente.
In oltre, vi è chiarito che le immagini grafiche in SVG possono essere visualizzate e riprodotte anche da vari editor.

Le caratteristiche principali del formato SVG

Le caratteristiche principali del formato SVG sono molteplici, ma tra queste quella che sicuramente spicca su tutte è la qualità grafica che grazie alla sua infinita scalabilità, oltre al fatto che permette di realizzare qualsiasi forma geometrica possa venirci in mente e ci permette di utilizzare linee e curve, i vari oggetti possono essere raggruppati in vari oggetti più complessi muniti di attributi di stile facilmente interpretabili in quanto strutturate in XML.
In oltre, SVG, è un formate ed un’estensione facilmente lavorabile, e non soltanto da complessi software professionali a pagamento come Adobe Illustrator contenuto nella suite Adobe Creative Cloud (e da qualche tempo a questa parte anche da Photoshop), ma anche da software open source come Inkscape e Sodopodi.

SVG e la grafica vettoriale

Le potenzialità della grafica vettoriale sul WEB sono infinite e apre ai Graphic designer e ai Web designer un infinito mondo di possibilità, tra cui la libertà d’espressione, infatti, gli elementi che compongono la grafica vettoriale sono formati (per l’appunto) da vettori, punti definiti in maniera matematica, al contrario della grafica raster, che viene definita dall’unione di singoli quadratini piatti e rigidi che servono a definire l’immagine stessa.
In oltre, come già chiarito, la grafica vettoriale può essere modificata in dimensioni a piacimento, senza alcun limite.

I contro della grafica vettoriale sul WEB

Forse, il vero grande problema dell’utilizzo di questo formato è uno, il peso, che di fatto, essendo generato grazie al ragionamento matematico o essendo composto da una serie di calcoli risulta, solitamente, più pesante rispetto alla grafica classica (RASTER), in quanto, l’hardware sarà costretto , volta per volta, a cimentarsi in complessi calcoli matematici per ricreare l’immagine.

Un esempio di codice di markup SVG

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="722.819px" height="275.839px" viewBox="0 0 722.819 275.839" enable-background="new 0 0 722.819 275.839"
	 xml:space="preserve">
<g>
	<g>
		<circle fill="#231F20" cx="137.685" cy="138.153" r="131.005"/>
	</g>
		<g>
			<path fill="#FFFFFF" d="M132.444,156.281c0-15.039-5.641-27.529-16.922-37.464c-9.476-8.14-20.383-12.213-32.714-12.213
				c-14.743,0-27.001,5.453-36.776,16.351c-8.573,9.522-12.86,20.632-12.86,33.326c0,15.181,5.715,27.736,17.147,37.672
				c9.476,8.005,20.306,12.005,32.489,12.005c17.746,0,32.037-6.623,42.867-19.871l-7.219-4.968
				c-9.177,11.042-21.061,16.559-35.648,16.559c-12.786,0-23.239-4.968-31.361-14.903c-5.116-6.623-8.123-14.075-9.024-22.354v-8.28
				c1.201-12.694,6.916-22.697,17.146-30.013c7.068-4.828,14.814-7.244,23.239-7.244c12.332,0,22.71,4.693,31.135,14.074
				c6.316,7.177,9.475,14.903,9.475,23.183H59.437v8.28h73.007V156.281z"/>
		</g>
		
	
</g>
</svg>