SVG é uma imagem vetorial que é muito utilizado em criação de logos e ícones em sites.

A diferença entre imagens de pixel (PNG, JPEG) e imagens vetoriais (SVG) é que este último é escalável. Ou seja, a imagem adapta-se ao tamanho da tela e não fica pixelado.

Neste post, mostrarei como habilitar o suporte ao SVG no WordPress de forma segura, ao mesmo tempo, porque não se deve usar qualquer código encontrado na internet para este fim.

O que é um SVG?

De acordo com Wikipedia, SVG é uma abreviatura em inglês que pode ser traduzido como gráficos vetoriais escaláveis. 

Criada em 1999, é uma linguagem XML para descrever, de forma vetorial, desenhos e gráficos 2D estáticos, dinâmicos ou animados.

Sobretudo, a principal característica dos gráficos vetoriais é que não perdem qualidade ao serem ampliados.

De acordo com W3techs, até Junho de 2019, as imagens em SVG são utilizadas por 17% de todos os sites na internet. Desse modo, as imagem vetoriais são atualmente suportados por todos os principais navegadores para desktops e mobiles atuais.

SVG WordPress: Navegadores que suportam SVG.
Navegadores que suportam o formato SVG.

Imagem S.V.G é bom para SEO?

Em resumo, as imagens neste formato são mais fáceis de serem compreendidas pelos mecanismos de buscas. 

Além da legibilidade, ou seja, a facilidade dos mecanismos de busca entender o que significa a imagem, arquivos SVG quase sempre possuem tamanhos muito menores que os formatos PNG e JPEG.

Por fim, o Google indexa e exibe em suas pesquisas imagens vetoriais normalmente, o que também é uma ótima notícia para fins de SEO.

Por que a segurança do S.V.G é importante?

Em princípio, a razão pela qual o S.V.G não faz parte do núcleo do WordPress ainda é que há preocupações de segurança a serem abordadas.

Por ser baseado em XML, um arquivo S.V.G pode ser facilmente modificado por hackers que podem incluir códigos maliciosos para comprometer toda a estrutura de seu servidor.

Entretanto, muitos plugins para WordPress utilizam o código a seguir, que simplesmente permite que o tipo MIME permita o upload de SVGs para a biblioteca de mídia do WordPress.

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

Inegavelmente, esta não é a maneira segura de fazer isso! Então não baixe o primeiro plugin SVG gratuito que encontrar na internet.

Como ativar com segurança o suporte ao SVG no WordPress

SVG WordPress: Como ativar com segurança o suporte ao SVG no WordPress

Todos os arquivos SVGs precisam ser higienizados através de uma limpeza em seu código para evitar problemas com segurança.

A limpeza irá remover tudo o que contenha de perigoso no HTML e, assim, impedir ataques XSS e outras irregularidades.

O Plug-in S.V.G Safe é a escolha mais segura para habilitar imagens SVGs no WordPress.

O plugin utiliza a biblioteca SVG-Sanitizer para higienizar sua imagem no momento em que é feito upload, realizando toda limpeza de código necessária para deixá-lo seguro.

O plug-in também permite visualizar este formato como imagens normais na biblioteca de mídia.

O SVG Safe pode ser baixado gratuitamente através do painel de plugins do WordPress.


Experimente também otimizar suas imagens com o formato Webp para melhor performance em seu site e impulsione seu SEO.

Author

Sou um entusiasta da Ciência da Computação. No The/Robot eu blogo sobre infraestrutura web, ecommerce, wordpress e assuntos relacionados ao empreendedorismo digital.

Write A Comment