{"id":2096,"date":"2014-07-21T11:57:57","date_gmt":"2014-07-21T09:57:57","guid":{"rendered":"https:\/\/www.generazione2000.com\/magazine\/2014\/07\/21\/convertire-file-svg-in-html\/"},"modified":"2020-08-21T10:57:07","modified_gmt":"2020-08-21T08:57:07","slug":"convertire-file-svg-in-html","status":"publish","type":"post","link":"https:\/\/www.generazione2000.com\/magazine\/convertire-file-svg-in-html\/","title":{"rendered":"Convertire file SVG in HTML"},"content":{"rendered":"<table>\n<tbody>\n<tr>\n<td>\n<figure id=\"attachment_591\" aria-describedby=\"caption-attachment-591\" style=\"width: 200px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.generazione2000.com\/magazine\/wp-content\/uploads\/sites\/2\/2020\/08\/SVG-Logo.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-591\" src=\"https:\/\/www.generazione2000.com\/magazine\/wp-content\/uploads\/sites\/2\/2020\/08\/SVG-Logo.png\" alt=\"SVG Logo\" width=\"200\" height=\"200\" \/><\/a><figcaption id=\"caption-attachment-591\" class=\"wp-caption-text\">SVG Logo<\/figcaption><\/figure><\/td>\n<td>\n<h1>Come convertire i file SVG in codice HTML<\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><em>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<\/em><\/p>\n<h2>Prefazione<\/h2>\n<p>Scalable Vector Graphics abbreviato in SVG, indica una tecnologia in grado di visualizzare oggetti di grafica vettoriale e, pertanto, di gestire immagini scalabili dimensionalmente.<br \/>\nPi\u00f9 specificamente si tratta di un linguaggio derivato dall&#8217;XML, cio\u00e8 di un&#8217;applicazione del metalinguaggio posto a base degli sviluppi del Web da parte del consorzio W3C, che si pone l&#8217;obiettivo di descrivere figure bidimensionali statiche e animate.<\/p>\n<p>La\u00a0<a title=\"Vai alla pagina di W3Schools.com dedicata al tutorial SVG\" href=\"https:\/\/www.w3schools.com\/svg\/\" target=\"_blank\">w3 schools<\/a> ci aiuta ad intendere come scrivere in formato SVG su un file HTML.<\/p>\n<p>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&#8217;immagine in png) allora dobbiamo avere un convertitore.<\/p>\n<p>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)<\/p>\n<p>Tra i software commerciali direi che il pi\u00f9 usato \u00e8 Adobe Illustrator (salva i file con estensione AI). Ho avuto modo di provarlo ed \u00e8 molto valido.<\/p>\n<p>La mia scelta cade sempre sempre sul Software Open Source, anche perch\u00e8 molto facilmente \u00e8 multipiattaforma e dunque possiamo utilizzarlo sia sotto Windows che Linux che MAC. Il mio software preferito per i file vettoriali \u00e8 <a title=\"Vai al sito Ufficiale di Inkscapa\" href=\"https:\/\/inkscape.org\/it\/\" target=\"_blank\">Inkscape<\/a>, con cui eseguo i miei lavori con molta soddisfazione.<\/p>\n<p>&nbsp;<\/p>\n<h2>La conversione<\/h2>\n<p>Per quanto accennato nella prefeazione \u00e8 dunque possibile effettuare la conversione dei file SVG in codice HTML e dunque leggibile dai Browser internet.<\/p>\n<p>Abbiamo detto che serve un convertitore ma non necessariamente un software apposito, infatti \u00e8 cos\u00ec.<\/p>\n<p>Nella norma essendo un file SVG leggibile direttamente dai browser facilmente possiamo aprire il file SVG con un browser e visualizzare dirrettamente all&#8217;interno di esso il contenuto del file SVG, ma nella realt\u00e0 non abbiamo effettuato una vera conversione.<\/p>\n<p>Qui per\u00f2 incappiamo nel tipo di browser utilizzato e della sua versione, esempio:<\/p>\n<p>Internet Explorer 11: se proviamo ad aprire nel browser un file SVG detto ci presenter\u00e0 solo una pagina bianca<\/p>\n<p>Firefox 30.0: se proviamo ad aprire nel browser un file SVG detto ci presenter\u00e0 il contenuto del file ma con qualche diversit\u00e0 dall&#8217;originale<\/p>\n<p>Google Chrome 36.0: se proviamo ad aprire un file SVG detto ci presenter\u00e0 il contenuto del file che molto probabilemente corrisponder\u00e0 similmente all&#8217;originale.<\/p>\n<p><em>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<\/em><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":1978,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[68,69,36],"tags":[236,319,579,1096],"class_list":["post-2096","post","type-post","status-publish","format-standard","has-post-thumbnail","","category-grafica","category-grafica-vettoriale","category-tip-triks","tag-browser","tag-convertitore","tag-html","tag-svg"],"_links":{"self":[{"href":"https:\/\/www.generazione2000.com\/magazine\/wp-json\/wp\/v2\/posts\/2096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.generazione2000.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.generazione2000.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.generazione2000.com\/magazine\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.generazione2000.com\/magazine\/wp-json\/wp\/v2\/comments?post=2096"}],"version-history":[{"count":1,"href":"https:\/\/www.generazione2000.com\/magazine\/wp-json\/wp\/v2\/posts\/2096\/revisions"}],"predecessor-version":[{"id":2188,"href":"https:\/\/www.generazione2000.com\/magazine\/wp-json\/wp\/v2\/posts\/2096\/revisions\/2188"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.generazione2000.com\/magazine\/wp-json\/wp\/v2\/media\/1978"}],"wp:attachment":[{"href":"https:\/\/www.generazione2000.com\/magazine\/wp-json\/wp\/v2\/media?parent=2096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.generazione2000.com\/magazine\/wp-json\/wp\/v2\/categories?post=2096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.generazione2000.com\/magazine\/wp-json\/wp\/v2\/tags?post=2096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}