Wordpress

Como adicionar suporte SVG ao WordPress e o porquê fazê-lo de forma segura!

Habilite o suporte ao SVG de forma segura e o porquê que não se deve usar qualquer código encontrado na internet para este fim.
Google+ Pinterest LinkedIn Tumblr

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

A diferença entre uma imagens de pixel como PNG e JPEG e o SVG é que este último é escalável. Ele se adapta ao tamanho onde foi inserido e não fica pixelado.

Por padrão, o WordPress não permite que você faça o upload de imagens neste formato.

A principal razão por esta decisão é devido a preocupações de segurança.

Neste post mostraremos como habilitar o suporte ao SVG no WordPress de forma segura, quais navegadores suportam este formato, e porque não se deve usar qualquer código encontrado na internet para este fim.

O que é um SVG?

Segundo a 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.

Umas das principais características dos gráficos vetoriais é que não perdem qualidade ao serem ampliados.

Até Dezembro de 2018 as imagens em SVG são utilizadas por quase 15% de todos os sites na internet.

É um aumento de 10% em relação ao mesmo período em 2017.

Navegadores que suportam SVG.

Os SVGs são atualmente suportados por todos os principais navegadores para desktops e navegadores mobile atuais.

Abaixo está uma lista de navegadores suportados:

  • Internet Explorer 9, 10, 11+ e Edge
  • Firefox 3+
  • Chrome 4+
  • Safari 3.2+
  • Ópera 10+
  • iOS Safari 3.2+
  • Opera Mini (todos)
  • Navegador Android 4.4+

Imagens SVG é bom para SEO?

Geralmente sim. As imagens neste formato quase sempre são mais fáceis de serem compreendidas pelos mecanismos de buscas. 

Além da legibilidade, ou seja, a facilidade do Google entender o que significa a imagem, o formato SVG são quase sempre menores que os formatos PNG e JPEG.

O Google indexa normalmente imagens SVGs e será exibido na pesquisa de imagens do Google, o que é uma ótima notícia para fins de SEO.

Por que a segurança do SVG é importante?

A razão pela qual o SVG 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 SVG pode ser facilmente modificado por hackers que podem incluir códigos maliciosos para comprometer toda a estrutura de seu servidor.

Muitos plugins SVG no repositório estão utilizando 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');

Esta não é a maneira segura de fazer isso! Então não vá e baixe o primeiro plugin SVG gratuito que você vê.

A solução é que os SVGs precisam ser higienizados através de uma limpeza em seu código para evitar problemas com segurança.

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

O Pug-in SVG Safe utiliza a biblioteca SVG-Sanitizer quando se faz upload de  imagens SVG em seu WordPress e realiza toda limpeza de código necessária para deixá-los seguros.

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

Você pode fazer o download do SVG Safe gratuitamente através do painel de plugins do WordPress.

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

Do NOT follow this link or you will be banned from the site!