{"id":26004,"date":"2024-04-02T14:43:34","date_gmt":"2024-04-02T14:43:34","guid":{"rendered":"https:\/\/carlogislon.it\/staging\/?p=26004"},"modified":"2026-03-01T16:25:11","modified_gmt":"2026-03-01T16:25:11","slug":"svg-vs-png-vs-webp-svg-contro-tutti","status":"publish","type":"post","link":"https:\/\/carlogislon.it\/staging\/svg-vs-png-vs-webp-svg-contro-tutti\/","title":{"rendered":"Formato Svg<\/em> vs<\/i> Png vs<\/i> WebP\u2026 Svg contro tutti!"},"content":{"rendered":"

Foto di copertina: Eric Cook<\/p>\n

Cos’\u00e8 il formato Svg?<\/h2>\n

Un tantino sorprendente, forse, l’utilizzo dell’immagine di una copertina (la prima sotto a sinistra) come esempio di file<\/span> formato Svg. Forse ti aspettavi un semplice logo o un altro gattino stilizzato.<\/p>\n<\/div><\/div><\/div>

\"\"<\/a><\/p>\n<\/div>

Formato Svg<\/p><\/div><\/div><\/div><\/div>

\"\"<\/a><\/p>\n<\/div>

Formato WebP<\/p><\/div><\/div><\/div><\/div>

\"\"<\/a><\/p>\n<\/div>

Formato Png24<\/p><\/div><\/div><\/div><\/div><\/div>

\"\"<\/a><\/p>\n<\/div>

Formato Svg<\/p><\/div><\/div><\/div><\/div>

\"\"<\/a><\/p>\n<\/div>

Formato WebP<\/p><\/div><\/div><\/div><\/div>

\"\"<\/a><\/p>\n<\/div>

Formato Png24<\/p><\/div><\/div><\/div><\/div><\/div>

Certo, sarebbe un uso corretto per questo formato, come gli standard raccomandano, ma… ho raggiunto il limite dei gattini rappresentabili in una mia pagina web!<\/span><\/h2>\n

Scherzi a parte, il fatto \u00e8 che il formato Svg pu\u00f2 fare molto di pi\u00f9 che rappresentare icone o… gattini stilizzati. Ho voluto perci\u00f2 esordire rendendo onore alle reali potenzialit\u00e0 del formato mostrando una copertina in formato Svg. E non finisce qui, come ti mostrer\u00f2 di seguito.<\/p>\n

Per cominciare, descriverei questo formato semplicemente cos\u00ec: Il formato pi\u00f9 avanzato per rappresentare oggetti vettoriali, oggetti misti vettoriali-raster e animazioni per il web o per le pubblicazioni elettroniche (ebook)<\/i>.<\/p>\n

Troppo semplice? Niente paura, lo renderemo un po’ pi\u00f9 difficile ma soprattutto pi\u00f9 interessante.<\/p>\n

L’Svg \u00e8 un formato creato per il Web dallo stesso gruppo che ne sviluppa quasi tutti gli standard come i linguaggi Xml<\/i>, Html<\/i>, Css<\/i> ecc. Questi signori (in realt\u00e0 un insieme di corporation<\/i> associate) dicono come andrebbero fatte le cose e noi lo facciamo, semplice no?<\/p>\n

\u00c8 basato su Xml (un linguaggio esteso di markup che pu\u00f2 gestire del codice al suo interno). Puoi trovarne tutte le specifiche a questa precisa pagina<\/a>. Ma ecco qui un estratto per fornirti subito la versione dei capoccioni preposti:<\/p>\n

\n

L’SVG \u00e8 un linguaggio per descrivere la grafica bidimensionale. Come formato autonomo o se combinato con altri XML, utilizza la sintassi XML [xml]. Il codice SVG utilizzato all’interno dei documenti HTML utilizza la sintassi HTML [HTML]<\/i> \u2014 W3c<\/a><\/p>\n<\/blockquote>\n

Tutto chiaro, no? A me per niente ma non \u00e8 un problema, ho scritto questo articolo tarandolo sui duri di comprendonio come me, ergo<\/i>: \u00e8 comprensibile da chiunque.<\/p>\n

A cosa serve il formato Svg?<\/h2>\n

L’uso, si diceva, \u00e8 destinato a immagini al tratto<\/i>. Quest’ultimo \u00e8 un vero termine tecnico che indica immagini con tratti e aree di colore nette, piene o sfumate.<\/p>\n

Ma l’Svg \u00e8 il miglior formato anche per immagini miste tratto-tono continuo (come una foto con dei testi sopra, vedi esempio copertina poco in basso) e per le animazioni web.<\/p>\n

\"\"
Questa immagine \u00e8 in formato Svg. L’illustrazione principale \u00e8 naturalmente un’immagine raster <\/i>inglobata nell’Svg, realizzata con un programma a matrice di bit (Photoshop) mentre i testi e il logo della testata sono vettoriali, e conservati come tali nell’Svg. Io trovo il formato Svg ideale proprio per questo tipo di rappresentazioni: copertine, infografiche e simile da rappresentarsi sul web o su un ebook, formato Epub o Pdf. Realizzare un’immagine cos\u00ec non \u00e8 sempre immediato ma quasi sempre fattibile. (Copyright \u00a9 Carlo Gislon\/Nexus Edizioni, tutti i diritti riservati)<\/figcaption><\/figure>\n

Il formato Svg, sempre che non inglobi immagini raster…<\/p>\n