Quando devo usar SVG ou SVGZ para meus gráficos da web?

Pelo meu entendimento,

O SVGZ é um tipo de arquivo compactado de um SVG. Adoro usar imagens SVG e tenho muita experiência com elas.

Todas as vezes que as usei, nunca tive um gráfico que ultrapassasse algumas centenas de kilobytes.

Uso SVG para gráficos responsivos ao criar sites responsivos. Também os uso, pois meu estilo de design favorito é o gráfico vetorial. Minha força de design mais forte é ilustradora, especialmente quando se trata de design gráfico.

A outra razão pela qual eu usaria um gráfico SVG é devido à facilidade de animar certos elementos do gráfico, como braços, pernas, etc.

Especialmente elementos de plano de fundo, como uma cidade que se estende por toda a página enquanto animar algumas luzes piscando e assim por diante.

Se o arquivo estiver compactado, ele perderia o código SVG para que eu não pudesse animá-lo?

Existe alguma razão para eu usar um SVGZ em vez de apenas um SVG?

Atualizar

Bem, eu decidi criar um SVG e SVGZ para ver como eles agiam com a web desde que descobri meus trabalhos. O antigo CS3 pode salvar o SVGZ!

Após o teste, deparei-me com um problema muito inesperado com o tipo de arquivo SVGZ. (Testado no Chrome, Firefox e IE) Se você acessa o URL direto da imagem, recebe um erro. Eu suponho que você não possa acessar o código SVG nesses tipos de arquivos, mas depois de criar um violino, ele nem parece exibir a imagem.

Estes são inúteis para a web?

.svg

.svgz

JSFIDDLE

— Josh Powell
fonte

Parece que pode ser parcialmente uma configuração de problema de configuração do servidor da Web .svgza ser atendida usando o tipo MIME correto, consulte stackoverflow.com/questions/16725380/svgz-doesnt-display . Pessoalmente eu uso sempre Raphael.js para gráficos SVG / vetor na web, porque eu preciso IE8 apoio

— user56reinstatemonica8

Hmm, obrigado pelos links muito úteis. Existe algum motivo para usar um SVGZ? Eu pensei que talvez fosse bom reduzir o tamanho de um arquivo de imagem. Estou curioso para saber se um SVGZé ou não útil para a web ou realmente útil de alguma forma.

— Josh Powell

Se funcionar, reduzirá bastante o tamanho do arquivo. Isso pode ser útil se você estiver usando a interatividade em algo complexo - por exemplo, um mapa do mundo SVG muito detalhado e com zoom. A zcompressão gzip significa que é usada para reduzir o tamanho do arquivo e praticamente nada mais.

— user56reinstatemonica8

@ JosPowell: dado que a maioria dos servidores http envia conteúdo com compressão gzip, não vejo o objetivo desta pergunta. E com alguns servidores, se você nomear seu arquivo .svg.gz, o navegador receberá uma informação de que o arquivo original não foi compactado.

— user2284570

Respostas:

O suporte ao svg compactado varia de acordo com o navegador, mas você precisa configurar o servidor para sinalizar corretamente o arquivo svgz com informações sobre sua codificação para informar explicitamente ao navegador como decodificá-lo após o recebimento.

A resposta do servidor para svgz precisa ser configurada para incluir "Content-encoding: gzip"

svg     Content-Type: image/svg+xml

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

Para um servidor da web Apache, isso pode ser alcançado através de um arquivo .htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Observe que, se você o compactar em tempo real ou assá-lo antes de colocá-lo no servidor, a codificação de conteúdo deve ser sugerida. Para ativos como esse, acho melhor compactar previamente. Caso contrário, você estará consumindo a CPU do servidor para cada solicitação do arquivo. Isso pode não parecer muito, mas esse é o tipo de problema de otimização que reduz, por exemplo, o site de assistência médica dos EUA.

— horatio
fonte

Se o seu servidor ou plataforma é de alguma forma inteligente, a compactação é altamente otimizada, pois pode ser armazenada em cache. Esse certamente não é o tipo de coisa que irá travar o site, muito menos o healthcare.gov.

— Josh Koenig

Pode não ser a resposta que você espera, mas para a Web, não é realmente necessário usar nenhum arquivo SVGZ. O motivo é que um arquivo SVGZ é simplesmente um SVG que foi pré-compactado com Gzip.

Os servidores da web modernos podem fazer isso compactando eles mesmos antes de veicular o ativo (consulte esta resposta no StackOverflow para obter mais informações); portanto, se você tiver um SVG de 300 KB que é de 50 KB quando compactado, será o mesmo quando for compactado automaticamente pelo servidor da Web. Portanto, não será de 300 KB no final da linha, será de 50 KB e será descompactado pelo navegador.

— Taylor Jasko
fonte

Tem certeza de que o arquivo compactado está armazenado em cache em algum lugar? É muito trabalhoso compactar esses ativos svg repetidamente para 5000 visitantes.

— bokan 26/09/14

@bokan: alguns servidores oferecem a opção de compactar previamente o conteúdo anexando uma extensão de arquivo .gz. Portanto, se um cliente procurar index.html, o servidor responderá com o arquivo pré-compactado denominado index.html.gz.

— user2284570

@ user2284570: Então você precisa criar o arquivo .gz manualmente. Caso contrário, ele compactará os arquivos toda vez que os enviar, e isso é muito trabalhoso para o servidor.

— Bokan

@bokan: Sim, e muitas vezes requer muita configuração adicional do servidor do que a simples compressão de codificação de conteúdo. Até o IE5 o suporta. a criação de um script para compactar todos os arquivos estáticos dentro de um diretório permanece simples. No segundo caso, isso economiza espaço em disco e largura de banda.

— user2284570