Quando dovrei usare SVG o SVGZ per la mia grafica web?

Dalla mia comprensione,

SVGZ è un tipo di file compresso di un SVG. Adoro usare le immagini SVG e ho avuto molta esperienza con esse.

Tutte le volte che li ho usati non ho mai avuto un grafico che andasse oltre alcune centinaia di kilobyte.

Uso SVG per la grafica reattiva mentre realizzo siti Web reattivi. Li uso anche perché il mio stile di design preferito è la grafica vettoriale. La mia più forte forza progettuale è l'illustratore, soprattutto quando si tratta di progettazione grafica.

L'altro motivo per cui vorrei usare un grafico SVG è dovuto alla facilità di animazione di alcuni elementi del grafico, come braccia, gambe, ecc.

Soprattutto elementi di sfondo, come una città che si estende su tutta la pagina mentre io animo un po 'di sfarfallio di luci e così via.

Se il file è compresso, perderebbe il codice SVG in modo da non poterlo animare?

C'è qualche motivo per cui dovrei usare un SVGZ piuttosto che solo un SVG?

Aggiornare

Bene, ho deciso di creare un SVG e un SVGZ per vedere come si sono comportati con il web da quando ho scoperto che i miei lavori antichi CS3 possono salvare SVGZ!

Dopo il test ho riscontrato un problema molto imprevisto con il tipo di file SVGZ. (Testato su Chrome, Firefox e IE) Se vai all'URL diretto dell'immagine, viene visualizzato un errore. Suppongo che non sia possibile accedere al codice SVG su questi tipi di file, ma dopo aver suonato un violino non sembra nemmeno visualizzare l'immagine.

Sono inutili per il web?

.svg

.svgz

JSFIDDLE

— Josh Powell
fonte

Sembra che potrebbe essere in parte un'impostazione del problema di configurazione del server Web .svgzda servire utilizzando il giusto tipo MIME, vedere stackoverflow.com/questions/16725380/svgz-doesnt-display . Personalmente uso sempre Raphael.js per la grafica SVG / vettoriale sul web perché ho bisogno del supporto IE8

— user56reinstatemonica8

Hmm, grazie per i link molto utili. C'è qualche motivo per usare un SVGZ? Ho pensato che forse sarebbe bello ridurre le dimensioni del file di immagine. Sono solo curioso di sapere se un SVGZè in qualche modo utile per il web o davvero utile in alcun modo.

— Josh Powell,

Se funziona, ridurrà molto le dimensioni del file. Questo potrebbe essere utile se stai utilizzando l'interattività su qualcosa di complesso, ad esempio una mappa del mondo SVG molto dettagliata che è zoomabile. I zmezzi di compressione gzip che viene utilizzato per ridurre le dimensioni del file e praticamente nient'altro.

— user56reinstatemonica8

@JoshPowell: dato che la maggior parte dei server http invia contenuti con compressione gzip non vedo lo scopo di questa domanda. E con alcuni server, se assegni un nome al tuo file .svg.gz, il browser riceverà informazioni sul fatto che il file originale non è stato compresso.

— user2284570

Risposte:

Il supporto per svg compresso varierà in base al browser, ma è necessario configurare il server in modo che contrassegni correttamente il file svgz con informazioni sulla sua codifica per dire esplicitamente al browser come decodificarlo al momento della ricezione.

La risposta del server per svgz deve essere configurata per includere "Codifica contenuto: gzip"

svg     Content-Type: image/svg+xml

svgz    Content-Type: image/svg+xml
        Content-Encoding: gzip

Per un server Web Apache, ciò può essere ottenuto tramite un file .htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Si noti che sia che lo si comprima al volo o lo si inserisca prima di posizionarlo sul server, è necessario suggerire la codifica del contenuto. Per risorse come questa, penso che sia meglio pre-comprimerlo. Altrimenti, stai consumando la CPU del server per ogni richiesta del file. Questo potrebbe non sembrare molto, ma questo è il tipo di problema di non ottimizzazione che porta ad esempio il sito web sanitario degli Stati Uniti.

— Horatio
fonte

Se il tuo server o la tua piattaforma sono per nulla intelligenti, l'esecuzione della compressione è altamente ottimizzata in quanto può essere memorizzata nella cache. Questo non è certamente il tipo di cose che causeranno l'arresto anomalo del tuo sito, per non parlare di healthcare.gov.

— Josh Koenig,

Questa potrebbe non essere la risposta che ti aspetti, ma per il web non è davvero necessario utilizzare alcun file SVGZ. Il motivo è che un file SVGZ è semplicemente un file SVG che è stato pre-gziped.

I server Web moderni possono eseguire questa operazione Gzipping da soli prima di pubblicare l'asset (vedere questa risposta su StackOverflow per ulteriori informazioni), quindi se si dispone di un SVG da 300 KB che è 50 KB quando viene compresso, sarà simile allo stesso quando Gzipped dal server Web automaticamente. Quindi non sarà di 300 KB lungo la linea, sarà di 50 KB e quindi non sarà compresso dal browser.

— Taylor Jasko
fonte

Sei sicuro che il file compresso sia memorizzato nella cache da qualche parte? È un sacco di lavoro per decomprimere queste risorse svg ancora e ancora per 5000 visitatori.

— bokan,

@bokan: alcuni offrono al server la possibilità di precomprimere il contenuto aggiungendo un'estensione di file .gz. Pertanto, se un client cerca index.html, il server risponderà con il file precompresso denominato index.html.gz.

— user2284570

@ user2284570: Quindi devi creare il .gz a mano. Altrimenti comprimerà i file ogni volta che li invia, e questo è molto lavoro per il server.

— bokan,

@bokan: Sì e spesso richiede molta configurazione aggiuntiva del server rispetto alla semplice compressione della codifica dei contenuti. Anche IE5 lo supporta. la creazione di uno script per comprimere tutti i file statici all'interno di una directory rimane semplice. Nel secondo caso, ciò consente di risparmiare spazio su disco e larghezza di banda.

— user2284570,