{"id":67140,"date":"2022-04-13T16:28:22","date_gmt":"2022-04-13T14:28:22","guid":{"rendered":"https:\/\/www.area-press.eu\/comunicatistampa\/?p=67140"},"modified":"2022-04-13T16:28:22","modified_gmt":"2022-04-13T14:28:22","slug":"cose-un-file-svg-e-come-lo-usiamo-nel-web","status":"publish","type":"post","link":"https:\/\/www.area-press.eu\/comunicatistampa\/2022\/04\/13\/cose-un-file-svg-e-come-lo-usiamo-nel-web\/","title":{"rendered":"Cos’\u00e8 un file SVG e come lo usiamo nel web?"},"content":{"rendered":"

Cos’\u00e8 un file SVG<\/strong>? Con la diffusione di internet e l’uso del web per la promozione di attivit\u00e0 e imprese professionali, anche le persone comuni si trovano alle prese con problemi di natura tecnica propri della piattaforma. Vediamo di rispondere insieme a questa domanda.<\/p>\n

Il formato SVG<\/h2>\n

Il formato SVG<\/strong> nasce nel settembre del 2001. Si tratta di un formato standard aperto, sviluppato nell’ambito del W3C<\/strong> (World Wide Web Consortium). Il termine \u00e8 un acronico che sta per Scalable Vector Graphics.<\/p>\n

Con questa tecnologia possiamo visualizzare sul web degli elementi di grafica vettoriale<\/strong>. La grafica vettoriale \u00e8 un sistema di composizione dell’immagine basato su formule matematiche che definiscono figure geometriche, punti, linee, curve e poligoni ai quali possiamo applicare colori e sfumature. Addirittura \u00e8 possibile applicare delle animazioni<\/strong> alla grafica.<\/p>\n

\u00c8 un formato che si basa su un linguaggio XML<\/strong>, questo tipo di codice permette la ricerca, l’indicizzazione, la compressione e lo script dei file SVG.<\/p>\n

Come utilizziamo la Scalable Vector Graphics<\/h2>\n

Di solito ci accontentiamo di soluzioni bitmap per le immagini che usiamo sul web, come PNG e JEPG, oppure GIF per le animazioni. Ma non \u00e8 sempre la scelta ideale.<\/p>\n

Andiamo ad approfondire le qualit\u00e0 di uno dei formati pi\u00f9 utili<\/strong>.<\/p>\n

La natura vettoriale<\/strong> di questo tipo di immagini permette di ridimensionare<\/strong> l’elemento grafico a piacimento senza perdere la qualit\u00e0 dei dettagli, senza sfocature. Questo perch\u00e9, a differenza di una immagine bitmap, basata su pixel rigidi, qui abbiamo a che fare con geometria su base matematica<\/strong>. L’immagine pu\u00f2 essere cos\u00ec riprodotta su differenti formati, come schermi desktop, cellulari, stampa, plotter, ecc… Senza perdere di definizione.<\/p>\n

Il peso dell’immagine<\/strong> \u00e8 un altro punto di forza. La compressione del codice SVG ci offre buoni risultati anche in termine di ottimizzazione SEO del sito<\/a>, immagini leggere e agili, ideali per caricamenti rapidi<\/strong> delle nostre pagine web.<\/p>\n

Google<\/strong> accetta e indicizza senza problemi questo tipo di formato, il codice XML integrato in quello HTML del nostro sito viene letto dal motore di ricerca e il contenuto indicizzato. Soltanto, come avviene per tutti i contenuti web, potrebbero volerci i consueti tempi tecnici degli spider di Google.<\/p>\n

Le figure espresse con il codice contenuto nel file SVG possono essere anche dinamiche e interattive<\/strong>. Il modello supportato da questo tipo di codice consente la gestione delle animazioni degli oggetti grafici e addirittura eventi<\/strong> che rispondono a differenti tipi di sollecitazioni dell’utente.<\/p>\n

Quando non utilizzare le immagini SVG<\/h4>\n

Come abbiamo detto, i file in SVG sono ideali per tutte quelle immagini che devono essere scalabili<\/strong>, ad esempio sfondi o loghi. Questo formato, per\u00f2, non \u00e8 in grado di restituire immagini complesse di qualit\u00e0<\/strong>.<\/p>\n

Quindi, quando ci troviamo di fronte a fotografie o progettazione grafica<\/a> che l’utente deve essere in grado di fruire, evitiamo la grafica vettoriale. Meglio utilizzare un tipo di formato pi\u00f9 tradizionale facendo sempre attenzione per\u00f2 a ottimizzare la sua usabilit\u00e0 per il web<\/strong>.<\/p>\n

Creare o modificare un file SVG<\/h2>\n

Per visualizzare un file in formato SVG basta avere a disposizione un browser, oggi tutti hanno un supporto per il rendering di questo formato. Il discorso cambia radicalmente, invece, quando parliamo di creare o modificare una immagine di questo tipo.<\/p>\n

Aprendo uno di questi files con un qualsiasi programma testuale, ci troveremmo di fronte al codice XML che compone l’immagine. Una serie di dati intellegibili che forniscono ai browser le istruzioni su come gestire la nostra immagine.<\/p>\n

L’unico modo che abbiamo per creare o gestire una immagine SVG \u00e8 attraverso specifici programmi di grafica vettoriale<\/strong>, molti dei quali a pagamento. Online potrete trovare, per grafiche pi\u00f9 semplici, anche tool gratuiti per la conversione di immagini<\/strong> da bitmap a vettoriale.<\/p>\n","protected":false},"excerpt":{"rendered":"

Cos’\u00e8 un file SVG? Con la diffusione di internet e l’uso del web per la promozione di attivit\u00e0 e imprese professionali, anche le persone comuni si trovano alle prese con problemi di natura tecnica propri della piattaforma. Vediamo di rispondere insieme a questa domanda.<\/p>\n","protected":false},"author":51,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[32166,32165,6921],"class_list":["post-67140","post","type-post","status-publish","format-standard","hentry","category-informatica","tag-file-svg","tag-progettazione-grafica","tag-web-design"],"_links":{"self":[{"href":"https:\/\/www.area-press.eu\/comunicatistampa\/wp-json\/wp\/v2\/posts\/67140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.area-press.eu\/comunicatistampa\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.area-press.eu\/comunicatistampa\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.area-press.eu\/comunicatistampa\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/www.area-press.eu\/comunicatistampa\/wp-json\/wp\/v2\/comments?post=67140"}],"version-history":[{"count":1,"href":"https:\/\/www.area-press.eu\/comunicatistampa\/wp-json\/wp\/v2\/posts\/67140\/revisions"}],"predecessor-version":[{"id":67141,"href":"https:\/\/www.area-press.eu\/comunicatistampa\/wp-json\/wp\/v2\/posts\/67140\/revisions\/67141"}],"wp:attachment":[{"href":"https:\/\/www.area-press.eu\/comunicatistampa\/wp-json\/wp\/v2\/media?parent=67140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.area-press.eu\/comunicatistampa\/wp-json\/wp\/v2\/categories?post=67140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.area-press.eu\/comunicatistampa\/wp-json\/wp\/v2\/tags?post=67140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}