Come convertire i file SVG in codice HTML

Per poter convertire il contenuto di un file SVG in codice HTML senza perdita di tempo ci serve un convertitore, ma non necessariamente un programma dedicato

Prefazione

Scalable Vector Graphics abbreviato in SVG, indica una tecnologia in grado di visualizzare oggetti di grafica vettoriale e, pertanto, di gestire immagini scalabili dimensionalmente.
Più specificamente si tratta di un linguaggio derivato dall’XML, cioè di un’applicazione del metalinguaggio posto a base degli sviluppi del Web da parte del consorzio W3C, che si pone l’obiettivo di descrivere figure bidimensionali statiche e animate.

La w3 schools ci aiuta ad intendere come scrivere in formato SVG su un file HTML.

Questo se si parte da zero ma se abbiamo dei file SVG che vogliamo trasferire sul Web e non a livello grafico (con cui basterebbe esportare l’immagine in png) allora dobbiamo avere un convertitore.

Esistono vari programmi per i file vettoriali sia proprietari (intendo quelli che dobbiamo comprare con icenza) sia Open Source con Licenza GPL o simili che ci permettono di utilizzare il software gratuitamente anche ad uso commerciale (anche se sono liberi ovvero senza prezzo ci sono migliaia e migliaia di persone che lavorano dietro a questi processi, impiegando molto del loro tempo per offrire un sistema valido e stabile che vi aiuti nel vostro lavoro. Non ci guadagnano niente ma una donazione alla Fondazione sarebbe opportuna e gradita)

Tra i software commerciali direi che il più usato è Adobe Illustrator (salva i file con estensione AI). Ho avuto modo di provarlo ed è molto valido.

La mia scelta cade sempre sempre sul Software Open Source, anche perchè molto facilmente è multipiattaforma e dunque possiamo utilizzarlo sia sotto Windows che Linux che MAC. Il mio software preferito per i file vettoriali è Inkscape, con cui eseguo i miei lavori con molta soddisfazione.

 

La conversione

Per quanto accennato nella prefeazione è dunque possibile effettuare la conversione dei file SVG in codice HTML e dunque leggibile dai Browser internet.

Abbiamo detto che serve un convertitore ma non necessariamente un software apposito, infatti è così.

Nella norma essendo un file SVG leggibile direttamente dai browser facilmente possiamo aprire il file SVG con un browser e visualizzare dirrettamente all’interno di esso il contenuto del file SVG, ma nella realtà non abbiamo effettuato una vera conversione.

Qui però incappiamo nel tipo di browser utilizzato e della sua versione, esempio:

Internet Explorer 11: se proviamo ad aprire nel browser un file SVG detto ci presenterà solo una pagina bianca

Firefox 30.0: se proviamo ad aprire nel browser un file SVG detto ci presenterà il contenuto del file ma con qualche diversità dall’originale

Google Chrome 36.0: se proviamo ad aprire un file SVG detto ci presenterà il contenuto del file che molto probabilemente corrisponderà similmente all’originale.

Dunque con Google Chrome o con Firefox visualizziamo il sorgente della pagina otteniamo il contenuto del file in formato script che possiamo utilizzare per i nostri progetti in formato HTML