SVG é uma imagem vetorial baseada em XML que é comumente usada por sites e marcas para exibir logotipos e ícones em seus sites. A principal razão pela qual eles são especialmente populares entre desenvolvedores e designers é que eles são um formato de imagem escalável, geralmente menor em tamanho de arquivo (às vezes por um pouco), e não pixelizam em telas de retina. O WordPress, por padrão, não permite que você carregue o formato de arquivo SVG, principalmente devido a preocupações com a segurança. Hoje vamos mergulhar numa forma segura de activar o suporte a SVG do WordPress, discutir o suporte ao browser, bem como algumas advertências caso decida mudar para o formato de imagem vectorial.

Espero que um dia tenhamos o SVG como parte do núcleo do WordPress, mas ainda não estamos lá.

O que é um SVG?

Segundo a Wikipedia, um SVG (scalable vector graphics) é um formato de imagem vetorial baseado em XML para gráficos bidimensionais com suporte para interatividade e animação. Você pode até manipulá-los com código ou com o seu editor de texto. A especificação SVG é um padrão aberto desenvolvido pelo World Wide Web Consortium desde 1999. Os SVGs são atualmente utilizados apenas por 3,4% de todos os websites, mas como pode ver abaixo, a taxa de adopção está a crescer rapidamente. Sites populares como o Google, Reddit, Dropbox, ESPN, e até o nosso próprio site aqui na Kinsta utilizam SVGs.

Estatísticas de utilização do SVG Abril 2016 - Abril 2017

Estatísticas de utilização do SVG Abril 2016 – Abril 2017

Suporte de Navegador SVG

Os SVGs são atualmente suportados por todos os principais navegadores e navegadores móveis. O único problema que você pode encontrar é se ainda precisar de suporte para o IE8, o que esperamos que você não precise. O IE8 tem apenas cerca de 0,36% de quota de mercado e já não é suportado. Aqui está um ótimo artigo da Lubos sobre por que os desenvolvedores devem parar de suportar o IE8, o IE9 e o IE10. De uma perspectiva empresarial, isto pode nem sempre ser possível, mas ele traz alguns pontos positivos. Se por alguma razão desesperada você ainda precisar do suporte ao IE8, você poderia definir uma imagem de retorno (PNG ou JPG) para seus SVGs, mas nós não vamos entrar nisso hoje. Abaixo está uma lista de navegadores suportados:

  • Internet Explorer 9, 10, 11+ e Edge
  • Firefox 3+
  • Chrome 4+
  • Safari 3.2+
  • Opera 10+
  • iOS Safari 3.2+
  • Opera Mini (todos)
  • Android Browser 4.4+
Suporte ao navegador SVG

Suporte ao navegador SVG

Benefícios dos SVGs

SVGs são um formato vetorial, o que significa que eles são automaticamente escaláveis tanto em navegadores quanto em ferramentas de edição de fotos. Isto torna-os óptimos tanto para designers gráficos como para web designers. Normalmente, quando você tenta editar um PNG ou JPG em uma ferramenta como Photoshop, Sketch ou Paint, você não pode aumentá-los sem pixelação. Com os SVGs, você pode redimensioná-los para uma quantidade infinita e eles parecerão perfeitos (ou deveríamos dizer perfeitos vetoriais) todas as vezes. É por isso que eles são um ótimo formato de imagem para usar em telas de retina.

Google indexa SVGs, o que é uma ótima notícia para fins de SEO. O conteúdo SVG que está ligado a um ficheiro em si será indexado e aparecerá na pesquisa de imagens do Google. Você pode ver isso em primeira mão com as ilustrações SVG que usamos na Kinsta, fazendo uma pesquisa avançada de imagens. Nota: Os SVGs em linha, ou melhor, aqueles compostos apenas de código, normalmente não são indexados.

Os SVGs são tradicionalmente (nem sempre) menores em tamanho de arquivo que os PNGs ou JPGs. Ao usar SVGs, você pode realmente acelerar o seu site WordPress, pois diminuirá o tamanho geral da sua página. Genki escreveu um grande artigo onde ele compara o tamanho de SVG vs PNG vs JPEG e aqui está a nossa comparação JPG vs JPEG. Abaixo estão alguns exemplos de seus testes nos quais ele comparou os três tipos diferentes de imagem.

JPG (tamanho optimizado: 81.4 KB)

jpg imagem

JPG imagem

PNG (tamanho otimizado: 85.1 KB)

png imagem

PNG imagem

SVG (tamanho optimizado: 6.1 KB)

svg imagem

SVG imagem

Como você pode ver acima, o SVG é uma diminuição no tamanho do arquivo de 92,51% quando comparado com o JPG. E quando comparado com o PNG, 92,83%. Essas são diferenças bastante impressionantes no tamanho do arquivo. No entanto, há uma ressalva, como ele testou imagens mais detalhadas, os SVGs acabaram se tornando maiores em tamanho do que o JPG ou PNG.

É por isso que muitos sites utilizam SVGs para imagens menos detalhadas, como logotipos, ícones, etc., pois verão uma diminuição significativa no tamanho dos arquivos. Mas para mais imagens com grande detalhe, como talvez o seu blog post “imagens em destaque”, você pode querer ficar com um PNG ou JPG, mas você ainda pode otimizá-las. Muitos sites usam uma abordagem híbrida, usando os dois tipos de arquivo juntos onde faz sentido.

Além disso, é importante notar que redes de mídia social como Facebook e Twitter não suportam SVGs para compartilhamento. Portanto, se você usou SVGs para suas imagens em destaque, você teria que utilizar o recurso Yoast SEO e fazer upload de um PNG ou JPG para o OG e meta tags.

Porque a Segurança SVG é Importante

A razão pela qual o SVG ainda não faz parte do núcleo do WordPress é que existem preocupações de segurança a serem abordadas. Você pode acompanhar a discussão ativa sobre SVGs no núcleo do WordPress (#24251) que foi iniciada em 2013.  SVG é um ficheiro XML, que por si só o abre a diferentes vulnerabilidades, das quais os formatos de imagem normais não são afectados. Estas incluem ataques de entidades externas XML (XXE), entidades aninhadas a bombas, e ataques XSS.

Mario Heiderich publicou uma apresentação perspicaz sobre os riscos de segurança devidos à injeção de conteúdo ativo com arquivos SVG. Um exemplo dado foi que o JavaScript estava embutido em um SVG e ele realmente conseguiu chamar Mario pelo Skype. Isso é meio assustador! SecuPress, autores de um plugin de segurança WordPress, também abordou o assunto de ser cuidadoso ao adicionar SVGs ao WordPress, e a importância de fazê-lo da maneira correta.

Muitos plugins SVG no repositório estão utilizando o seguinte código, que simplesmente habilita o tipo MIME para permitir o upload de SVGs para a biblioteca de mídia do WordPress. Esta não é a maneira segura de fazer isto! Portanto, não vá e baixe o primeiro plugin SVG gratuito que você vê ou copie colar este código e pense que está pronto para ir.

function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

A solução é que os SVGs precisam de ser higienizados. A higienização é basicamente a limpeza do código ou da entrada para evitar problemas de segurança (como injeção de código), conflitos de código e erros. Isto pode implicar coisas como a codificação de dados, filtragem e validação de strings, etc. É aqui que entra em jogo a biblioteca SVG-Sanitizer de Daryll Doyle, a que ele se refere como “sua tentativa de construir um higienizador SVG decente em PHP”. Veja a demonstração do seu anti-sanitizante SVG para vê-lo em ação.

Demonstração do higienizador SVG

Demonstração do higienizador SVG

Também é importante que você considere quem no seu site tem acesso para carregar SVGs. Por exemplo, se você está em um site multi-autor, você não tem idéia do tipo de SVG que outra pessoa pode carregar, expondo o seu site. É aconselhável restringir os carregamentos de SVG aos administradores e àqueles que entendem algumas das preocupações de segurança.

Como ativar com segurança o suporte a WordPress SVG

Como ativar com segurança o WordPress SVG Daryll desenvolveu um plugin, WP SVG (também conhecido como SVG Seguro), que utiliza a biblioteca do SVG-Sanitizer ao fazer o upload de imagens SVG para a sua biblioteca de mídia WordPress. O plugin também permite que você visualize SVGs como imagens normais na biblioteca de mídia. Você pode baixar o SVG Seguro gratuitamente do repositório WordPress ou procurando por ele dentro do seu painel de controle do WordPress em “Adicionar Novo” plugins. Você pode se levantar e ir com alguns cliques simples.

WP SVG plugin

WP SVG plugin

Ele também tem uma versão premium, localizada em wpsvg.com, que permite que você restrinja certos usuários de fazer o upload de SVGs e otimização adicional de SVGs. Neste exemplo abaixo, vamos simplesmente usar a versão gratuita.

Antes de carregar o seu SVG, é importante entender que eles se comportam de forma ligeiramente diferente das imagens. Ao exportar um SVG a partir da sua ferramenta de edição de fotos, você vai querer exportar o texto como curvas (ou criar um esboço), caso contrário, ele pode renderizar um pouco diferente em vários navegadores.

Affinity Designer - Exportar texto como curvas SVG

Affinity Designer – Exportar texto como curvas SVG

Depois de instalar o plugin, não há configurações, ele simplesmente higienizará seus SVGs após o upload. No nosso site de testes abaixo pode ver que substituímos o nosso logótipo por um ficheiro SVG, que pode ser visto como normal na biblioteca multimédia.

SVG na biblioteca de mídia WordPress

SVG na biblioteca de mídia WordPress

Isto também nos permitiu usar o painel de controle do nosso tema para mudar o logotipo no cabeçalho do nosso WordPress para o nosso arquivo SVG. Você pode ver abaixo que ele está de fato servindo o arquivo .svg. E fica bonito agora nas telas da retina.

SVG no cabeçalho do WordPress

SVG no cabeçalho do WordPress

Há um ajuste adicional que tivemos de fazer. No IE9-11 o desktop & mobile ainda não escalam corretamente os arquivos SVG. A adição de altura e largura resolve este problema. Isto pode variar por tema, mas em nosso site de testes nós simplesmente modificamos nosso arquivo header.php e adicionamos estas dimensões personalizadas. Alguns temas do WordPress usam CSS para modificar o dimensionamento, o que não é bom por razões de desempenho, mas devido a isso pode exigir a adição de código adicional para corrigir o problema do IE.

Arquivo header.php modificado para SVG IE problema de escalonamento

Arquivo header.php modificado para SVG IE problema de escalonamento

E é isso! Agora você habilitou com segurança o suporte ao WordPress SVG. Este plugin e/ou método não é endossado ou suportado pelo núcleo do WordPress, portanto, é claro, use por sua conta e risco. No entanto, se você já estava carregando SVGs apenas com o snippet do tipo MIME, então, por favor, faça-o desta forma.

Além disso, se você nunca usou SVGs antes, certifique-se de ter o GZIP ativado em seu servidor para o tipo de arquivo “image/svg+xml”. Isso garantirá que eles sejam comprimidos e carregados o mais rápido possível. Por vezes os sysadmins apenas ativam os tipos de ficheiros mais standard. Nota: GZIP está habilitado em todos os servidores Kinsta já para SVGs.

Resumo

SVGs são uma ótima maneira de melhorar o visual do seu site! Recomendamos utilizar SVGs, PNG e JPGs juntos para alcançar o melhor desempenho, pois imagens muito detalhadas não terão um desempenho tão bom no formato SVG. Os SVGs são ótimos para o seu logotipo, para garantir que ele tenha uma aparência perfeita em cada tela, juntamente com ícones. Qual é a sua opinião? Você já usou SVGs no seu site WordPress?


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos