A principal razão pela qual arquivos SVG 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 no que são SVG, como eles podem ser benéficos, e como você pode habilitar com segurança o suporte a SVG do WordPress. Também discutiremos o suporte ao navegador, assim como algumas advertências se você decidir mudar para o formato de imagem vetorial.
Espero que um dia tenhamos o SVG como parte do núcleo do WordPress, mas ainda não estamos lá.
O que é um arquivo SVG?
SVG (Scalable Vector Graphics) é uma imagem vetorial baseada em XML que é comumente usada por sites e marcas para exibir logos e ícones em seus sites. A Wikipedia define SVG como:
Um SVG (Scalable Vector Graphics) é um formato de imagem vetorial baseado em XML para gráficos bidimensionais com suporte para interatividade e animação. A especificação SVG é um padrão aberto desenvolvido pelo World Wide Web Consortium (W3C) desde 1999.
Você pode até mesmo manipular arquivos SVG com código ou com seu editor de texto. Os SVGs são utilizados atualmente em 33% de todos os sites e, como você pode ver abaixo, a taxa de adoção está crescendo rapidamente. Sites populares como Google, Reddit, Dropbox, ESPN e até mesmo nosso próprio site aqui na Kinsta usam SVGs.
Suporte ao Navegador de Arquivos SVG
Os arquivos SVG são atualmente suportados por todos os principais navegadores, incluindo os 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% da participação de mercado dos navegadores e não é mais 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 imagens SVG, mas nós não vamos entrar nisso hoje. Abaixo está uma lista de navegadores suportados:
- Internet Explorer 9, 10, 11+ e Edge
- Firefox 2+
- Chrome 4+
- Safari 3.1+
- Opera 10+
- iOS Safari 3.2+
- Android Browser 3+
- Firefox for Android 86+
- Opera Mini (todos)
- Opera Mobile 12+
- Chrome for Android 89+
- UC Browser for Android 12.12+
- Samsung Internet 4+
- QQ Browser 10.4
- Baidu Browser 7.12
- KaiOS Browser 2.5
Benefícios do uso de arquivos SVG
Os arquivos SVG 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)
PNG (tamanho otimizado: 85.1 KB)
SVG (tamanho optimizado: 6.1 KB)
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 carregar um PNG ou JPG para o OG e meta tags, caso contrário você poderia arriscar que sua imagem em destaque não aparecesse de forma alguma.
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.
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
Daryll has developed a plugin, WP SVG (also know as Safe SVG), which utilizes the SVG-Sanitizer library upon uploading SVG images to your WordPress media library. The plugin also enables you to view SVGs like normal images in the media library.
Você pode fazer o download do SVG Seguro gratuitamente do repositório WordPress ou procurando por ele dentro de seu painel de controle do WordPress em “Add New” plugins. Você pode se levantar e ir com alguns simples cliques.
Há também tem uma versão premium, disponível 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.
Como um plugin alternativo, você pode querer verificar o SVG Support.
Antes de carregar o seu arquivo 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.
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.
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.
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.
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?
Brian tem uma enorme paixão pelo WordPress, e tem utilizado há mais de uma década e até desenvolve alguns plugins premium. Brian gosta de blogs, filmes e caminhadas. Conecte-se com Brian no Twitter.
Deixe um comentário