Ativar suporte SVG no WordPress

O WordPress permite que os usuários carreguem vários tipos diferentes de arquivos de imagem. Você provavelmente reconhecerá os suspeitos de sempre, como PNG e JPG. Exibir outros tipos de arquivo, como gráficos vetoriais, pode ser mais problemático.

Felizmente, existem algumas maneiras de incorporar arquivos vetoriais em seu site. Embora não seja um recurso nativo, os arquivos Scalable Vector Graphics (SVG) podem ser usados ​​para exibir imagens bidimensionais em sites WordPress. Com um pouco de reconfiguração, você poderá otimizar alguns de seus logotipos e outros gráficos usando esse tipo de arquivo.

Observação: se você estiver hospedando com o WP Engine, oferecemos suporte nativo à compactação GZIP em arquivos SVG.

Neste artigo, aprenderemos mais sobre o que são arquivos SVG e por que você pode querer usá-los. Em seguida, veremos duas maneiras de permitir o uso deles em seu site. Também abordaremos algumas precauções de segurança importantes que você pode querer tomar. Vamos começar!

O que é um SVG?

Um arquivo SVG é um tipo de imagem vetorial. Os arquivos vetoriais são compostos de maneira diferente dos tipos de arquivo de imagem mais comuns. Por exemplo, um JPG é composto de milhares de pixels. Com um arquivo SVG, por outro lado, esse não é o caso.

As imagens vetoriais são mais como um conjunto de instruções escritas. Eles não contêm pixels que formam uma imagem maior. Em vez disso, eles incluem um conjunto de dados semelhante a um esquema que cria uma imagem bidimensional. Isso significa que há alguns benefícios exclusivos no uso de arquivos SVG.

Por que usar SVG?

Os SVGs têm várias vantagens. Como são altamente escaláveis, você pode manipular o tamanho conforme necessário sem afetar a qualidade da imagem. Como você deve saber muito bem, se você tentar aumentar o tamanho de um JPG, a qualidade cairá para um nível inutilizável muito rapidamente.

É aí que os SVGs podem ser úteis. Embora não sejam destinados à exibição de fotografias tradicionais, eles são uma ótima opção para logotipos de empresas, ícones e outros gráficos simples em seu site.

Além disso, os arquivos SVG tendem a ser significativamente menores do que outros tipos de imagem. Isso significa que seu site não ficará sobrecarregado com gráficos. Além disso, os arquivos SVG são indexados pelo Google há algum tempo. Isso pode ser um benefício real para a Otimização de Mecanismos de Busca (SEO) do seu site.

Como fazer upload de um SVG para o WordPress

Como o WordPress não inclui suporte para SVGs pronto para uso, você terá que trabalhar um pouco mais para incluí-los em seu site. Nas próximas seções, veremos como adicionar arquivos SVG ao seu site com um plug-in e por meio de um processo manual.

Método 1: Use um Plug-in

Assim como em muitas tarefas do WordPress, os plug-ins podem simplificar a ativação do suporte a SVG. Tudo o que você precisa fazer é escolher a ferramenta certa e definir algumas configurações.

Etapa 1: Baixe o plug-in

Primeiro, você precisará baixar e instalar um plug-in SVG. Recomendamos Suporte SVG:

Depois de instalar e ativar o plug-in, você terá uma nova opção de menu no painel do WordPress em Configurações > Suporte SVG . Lá, você receberá instruções sobre como estilizar arquivos SVG para seu site:

Além disso, você poderá definir algumas configurações administrativas importantes. Isso inclui restringir os privilégios de upload de SVG apenas para administradores:

Depois disso, você poderá fazer upload de arquivos SVG diretamente para sua Biblioteca de mídia. No entanto, existem alguns outros itens importantes para cuidar primeiro.

Etapa 2: ativar o suporte GZip de arquivos SVG em seu servidor

A maneira como você abordará esta etapa dependerá do host da Web e da configuração do servidor. Por exemplo, aqui no WP Engine, o GZip já está habilitado para uma lista específica de tipos de arquivos. Com isso dito, “image/svg+xml” não é um deles.

Adicionar esse tipo à lista do seu site garantirá que seus arquivos SVG sejam otimizados de forma adequada e rápida. Você precisará incluir esse tipo de arquivo em seu arquivo .htaccess para que tudo funcione sem problemas.

Etapa 3: verifique se o plug-in está protegendo os arquivos corretamente

Uma das desvantagens de usar arquivos SVG, e a principal razão pela qual esse tipo de arquivo ainda não foi incorporado ao núcleo do WordPress, é devido a problemas de segurança. Como os arquivos SVG são baseados em XML, eles são vulneráveis ​​a ataques de entidades externas, entre outros riscos.

Ao configurar seu plug-in SVG, é recomendável limitar o acesso de upload SVG apenas aos administradores. No entanto, uma abordagem ainda mais segura é 'higienizar' seus arquivos SVG antes de carregá-los. Isso elimina qualquer código XML desnecessário que pode deixar seu site aberto a ataques.

O plug-in SVG Support não inclui sanitização automática, mas existem outros plug-ins que incluem. O SVG seguro é um deles:

Alternativamente, você também pode instalar seu próprio desinfetante e usá-lo de forma independente. O criador do Safe SVG forneceu o código desinfetante do plug-in no GitHub para qualquer pessoa usar.

Ter seu próprio desinfetante instalado também é uma boa opção se você planeja usar o próximo método para habilitar SVGs em seu site WordPress.

Método 2: ativar manualmente os uploads de arquivos SVG

Se preferir colocar a mão na massa a usar um plug-in, você pode habilitar manualmente seu site WordPress para aceitar arquivos SVG. A seguir, veremos como esse processo funciona.

Passo 1: Edite o arquivo Functions.php do seu site

Para começar, você precisará editar o arquivo functions.php do seu site. Para fazer isso, você pode ir para Aparência > Editar temas em seu painel e selecionar o arquivo functions.php :

Alternativamente, você pode acessar os arquivos do seu site usando um aplicativo File Transfer Protocol (FTP), como o FileZilla.

De qualquer forma, é melhor criar um tema filho ou mudar para um ambiente de desenvolvimento antes de fazer qualquer trabalho importante em seu site. Isso manterá seu site ao vivo protegido contra danos enquanto você estiver fazendo alterações.

Etapa 2: adicionar um trecho de código

Em seguida, você precisará adicionar o seguinte trecho de código ao seu arquivo functions.php :

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

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

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

Depois disso, você poderá fazer upload de imagens SVG para sua Biblioteca de mídia. Lá, você pode visualizar e interagir com eles da mesma forma que com outros tipos de arquivo de imagem.

Etapa 3: acesso seguro e limite de permissões de upload SVG

Como mencionamos anteriormente, habilitar arquivos SVG envolve certos riscos. Para manter seu site seguro, você pode definir permissões de upload para SVGs criando funções de usuário personalizadas. Você pode usar um plug-in como o User Role Editor ou o WPFront User Role Editor para fazer isso.

Esses plug-ins permitem que você personalize os níveis de acesso e permissão para suas funções de usuário existentes. Em outras palavras, eles permitirão que você designe quais usuários terão permissão para fazer upload de SVGs. Isso ajudará você a manter o controle sobre a segurança desses arquivos.

Fique seguro com o WP Engine

Nativamente, o WordPress não permite o uso de arquivos SVG. Isso é lamentável, pois esses arquivos tendem a ser a melhor opção para exibir logotipos e outros gráficos. A boa notícia é que, com a ajuda de alguns de nossos recursos favoritos para desenvolvedores, você poderá habilitar e proteger o uso de arquivos SVG em seu site.

Além disso, lembre-se de que, em nossos planos de hospedagem WordPress, você terá acesso a suporte profissional e soluções de segurança de sites bem desenvolvidas. Proteja seu site conosco hoje!