Adicionar arquivos SVG ao seu site WordPress pode fazer com que suas imagens pareçam nítidas e claras.
No entanto, embora o WordPress permita o upload de muitos tipos de arquivos, como imagens, áudio e vídeo, ele não suporta arquivos SVG nativamente.
Isso ocorre porque os arquivos SVG podem apresentar riscos de segurança. Mas não se preocupe. Existem maneiras seguras de usar SVGs.
Neste artigo, mostraremos como adicionar arquivos de imagem SVG ao WordPress de forma fácil e segura.
O que é SVG?
SVG, ou Scalable Vector Graphics (Gráficos Vetoriais Escaláveis), é um formato de arquivo que define gráficos vetoriais usando a linguagem de marcação XML. Seu principal benefício é que ele permite ampliar imagens sem perder qualidade ou ter qualquer pixelização.
Como o SVG funciona?
Scalable Vector Graphics (SVG) é uma tecnologia que exibe desenhos bidimensionais usando XML. É diferente dos formatos de imagem comumente usados como PNG, GIF ou JPG.
Se você pegar um arquivo de imagem PNG ou JPG e der zoom, notará que a imagem ficará borrada e pixelizada.
Gráficos vetoriais não usam pixels.
Em vez disso, eles usam um mapa bidimensional que define o gráfico que você está visualizando como coordenadas. A imagem não pixeliza quando você aumenta o zoom porque simplesmente não pode.
Isso permite que você amplie gráficos vetoriais sem perder qualidade. Mais importante ainda, imagens SVG podem ter um tamanho de arquivo muito menor do que arquivos PNG ou JPG, tornando-as uma ótima opção para formatação de imagens.
Gráficos vetoriais são comumente usados para ícones, fontes de ícones, logotipos de sites e imagens de marca. Você pode querer adicionar arquivos SVG ao WordPress para o logotipo da sua empresa, ícones ou outros gráficos.
No entanto, arquivos SVG podem ser um pouco inseguros. É por isso que o WordPress não suporta uploads de arquivos SVG por padrão.
Se você fizer upload de uma imagem SVG no WordPress, verá a seguinte mensagem de erro: 'Desculpe, este tipo de arquivo não é permitido por motivos de segurança.'
Problemas de Segurança Relacionados a SVG no WordPress
Arquivos SVG contêm código na linguagem de marcação XML, que é semelhante ao HTML. Seu navegador ou software de edição de SVG analisa a linguagem de marcação XML para exibir a saída na tela.
No entanto, isso expõe seu site a possíveis vulnerabilidades de XML. Ele pode ser usado para obter acesso não autorizado a dados do usuário ou acionar ataques de força bruta ou ataques de cross-site scripting.
Os métodos que compartilharemos neste artigo tentarão higienizar arquivos SVG para melhorar sua segurança. No entanto, esses plugins não podem impedir totalmente o upload ou a injeção de código malicioso.
A melhor solução é usar apenas arquivos SVG criados por fontes confiáveis e restringir o upload de SVG a usuários confiáveis. Para saber mais sobre segurança, você pode conferir nosso guia completo de segurança do WordPress para iniciantes.
Com isso em mente, mostraremos como usar arquivos SVG no WordPress de forma fácil e segura em 3 métodos. Basta usar os links rápidos abaixo se você estiver interessado em um método específico:
- Método 1. Permitir arquivos SVG no WordPress usando WPCode (Recomendado)
- Método 2. Fazer upload de arquivos SVG no WordPress usando SVG Support
- Método 3. Fazer upload de arquivos SVG no WordPress usando Safe SVG
Dica de especialista: Antes de decidir usar arquivos de imagem SVG, não se esqueça de que você também pode usar ferramentas de edição de imagem para comprimir o tamanho dos arquivos e impulsionar a velocidade e o desempenho do seu WordPress.
Pronto? Vamos começar com um tutorial em vídeo.
Tutorial em Vídeo
Se você preferir instruções escritas, continue lendo.
Método 1. Permitir arquivos SVG no WordPress usando WPCode (Recomendado)
A maneira mais simples de permitir uploads de SVG com segurança no WordPress é usando WPCode, o plugin de snippets de código mais poderoso disponível.
O WPCode possui uma grande biblioteca de snippets de código pré-configurados que podem substituir muitos plugins de uso único em seu site. Ele inclui os snippets para desativar páginas de anexo, manter o Editor Clássico de Posts e permitir uploads de arquivos SVG, tudo isso sem os riscos de quebrar seu site.
Para começar, você precisará instalar e ativar o plugin gratuito WPCode. Para instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.
Ao ativar, você desejará navegar até Snippets de Código » Adicionar Snippet no seu painel de administração do WordPress. Basta procurar por ‘svg’ e passar o mouse sobre ‘Permitir Upload de Arquivos SVG’.
Clique em ‘Usar snippet’ quando ele aparecer.
Em seguida, você chegará à página ‘Editar Snippet’, onde o WPCode já configurou todas as configurações necessárias para o código ser executado.
Tudo o que você precisa fazer é clicar no interruptor para ‘Ativo’ e, em seguida, pressionar o botão ‘Atualizar’.
Agora, você pode fazer upload de arquivos SVG sem que o WordPress exiba uma mensagem de erro ou aviso.
Você pode então tratá-lo como qualquer outra imagem em seu site WordPress.
Por padrão, o snippet do WPCode permite apenas que usuários com a função ‘Administrador’ adicionem SVGs ao WordPress.
Você também pode conceder permissão a todas as outras funções de usuário excluindo as linhas 14-16 do snippet de código. Em seguida, você pode ‘comentá-las’ adicionando duas barras, ‘//’, ao início das linhas 11-13, tornando-as de cor bege clara.
O WPCode não executará nenhuma parte do snippet que ele vê como um comentário em vez de código. Você pode ver este exemplo na imagem abaixo.
De qualquer forma, com o código removido, todos os usuários podem fazer upload de arquivos SVG para o seu site. Apenas certifique-se de clicar em ‘Atualizar’ para salvar quaisquer alterações que você fizer.
Método 2. Fazer upload de arquivos SVG no WordPress usando SVG Support
Este segundo método usa o plugin SVG Support. Ele permite que você exiba SVGs em posts e páginas do WordPress e controle quem pode fazer upload deles.
Primeiro, você precisa instalar e ativar o plugin SVG Support. Para mais detalhes, você pode ver nosso guia passo a passo sobre como instalar um plugin WordPress.
Após a ativação, você desejará acessar Configurações » Suporte a SVG para configurar as opções do plugin.
Na página de configurações, basta marcar a caixa ao lado da opção ‘Restringir a Administradores?’. Isso permitirá que apenas um administrador do site faça upload de arquivos SVG no WordPress.
O próximo passo é ativar o modo avançado. Você só precisa marcar esta opção se desejar usar recursos avançados como animações CSS e renderização de SVG inline.
Não se esqueça de clicar no botão 'Salvar Alterações' para armazenar suas configurações.
Agora você pode criar uma nova postagem ou editar uma existente. No editor de postagens, você poderá fazer upload do seu arquivo SVG como faria com qualquer outro arquivo de imagem.
Simplesmente adicione um bloco de imagem ao editor e, em seguida, faça o upload do arquivo SVG.
Método 3. Fazer upload de arquivos SVG no WordPress usando Safe SVG
Este método também usa um plugin e permite que você sanitize os arquivos SVG enviados para o WordPress.
A primeira coisa que você precisa fazer é instalar e ativar o plugin Safe SVG. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.
O plugin funciona pronto para uso, e não há configurações para você configurar. Você pode simplesmente prosseguir e começar a enviar arquivos SVG.
A desvantagem é que este plugin permite o upload de SVG por todos os usuários que podem escrever posts no seu site WordPress. Para controlar quem pode enviar arquivos, você deve comprar a versão premium do plugin.
Esperamos que este artigo tenha ajudado você a aprender como adicionar arquivos SVG com segurança no WordPress. Você também pode querer ver nosso guia sobre como adicionar um widget ao cabeçalho do seu site e nossas escolhas de especialistas de snippets de código úteis para iniciantes.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Dennis Muthomi
Mudei um cliente de logos PNG para SVG. A diferença de velocidade foi incrível, especialmente no celular!
Dica rápida da minha experiência: Sempre crie um backup em PNG e use o elemento ‘picture’ no seu código. Dessa forma, você estará coberto com navegadores mais antigos enquanto obtém todos os benefícios do SVG nos modernos.
Agradeço muito as dicas de segurança também – elas são super importantes ao trabalhar com sites de clientes!
Jiří Vaněk
Eu li um artigo interessante sobre por que os arquivos SVG podem ser perigosos. No entanto, antes de ter essa informação, eu estava constantemente lutando com o WordPress, que se recusava a fazer upload de SVGs, e eu estava bastante frustrado. Eu tenho ícones para a web em formato SVG. No entanto, o WPCode e um snippet simples realmente me ajudaram. É uma solução direta e funcional que qualquer um pode lidar, até mesmo um iniciante completo.
Eugene Velasquez
Adicionei todos os plugins SVG, mas ainda estou sendo impedido de adicionar SVGs, que criei por conta própria, então não há risco ou código malicioso. Existe outra maneira de adicionar os arquivos SVG ao WordPress?
WPBeginner Support
Se nem mesmo os plugins permitem que você adicione SVGs ao seu site, recomendamos entrar em contato com seu provedor de hospedagem para garantir que eles não tenham uma configuração de segurança que possa estar substituindo seu WordPress.
Admin
Felix Krusch
Desde a introdução dos Blocos, você pode simplesmente adicionar código SVG em um "Bloco de HTML Personalizado". Nenhum plugin de snippet é mais necessário.
WPBeginner Support
If the image is hosted elsewhere that would work but to upload we would recommend using the snippet at this time. You would also not want to add the PHP code using the HTML snippet if that is what you mean
Admin
sn
Oi,
Obrigado pelos seus artigos.
Normalmente eu acesso seu site e aprendo muitas coisas com ele.
Aqui você escreveu que usar arquivos SVG em sites não é seguro.
Minha pergunta é se eu criar o arquivo SVG eu mesmo, a partir do Adobe Illustrator ou software similar,
ainda assim é inseguro colocá-lo no meu site?
e devo usar o plugin Safe SVG?
Obrigado!
WPBeginner Support
If you are the person who created the SVG and there are no other users uploading files to your site, you are fine to not use the safe SVG plugin.
Admin
sn
Você quer dizer que não haverá vulnerabilidades nesse caso?
WPBeginner Support
As vulnerabilidades com as quais se preocupar seriam se você adicionar um SVG de uma fonte desconhecida que possa ter adicionado código malicioso.
sn
Muito obrigado pela sua resposta.
mr waghela
obrigado senhor por compartilhar as melhores informações
WPBeginner Support
Glad our guide was helpful
Admin
Alan Smith
Thanks a lot
WPBeginner Support
You’re welcome
Admin
Amandine
Olá, fiz o upload com sucesso do plugin SVG e consigo fazer o upload do meu arquivo SVG, mas no ponto de cortar o logotipo, não consigo cortá-lo e, portanto, ele não aparece no meu site. Ele aparece bonito e nítido no painel de personalização do lado esquerdo, mas não no site. Enquanto isso, se eu fizer o upload de um arquivo PNG, o corte funciona e ele aparece no painel de personalização, bem como no site. Você poderia me informar se há algo que preciso fazer para que meu logotipo SVG apareça no site? Obrigado.
WPBeginner Support
Você precisaria editar seu SVG usando algo diferente do seu site WordPress para cortá-lo no tamanho que você deseja.
Admin
pushkraj
Eu quero fazer upload de um svgz (svg compactado), mas recebo um erro por motivos de segurança. Embora eu possa fazer upload de arquivos no formato SVG sem nenhum problema, preciso do svgz para reduzir o tamanho do arquivo. Por favor, me ajude com minha solicitação.
Obrigado.
WPBeginner Support
Para permitir esse tipo de arquivo, você deve consultar nosso guia aqui: https://www.wpbeginner.com/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
Admin
Brian
Olá WPBeginner,
Adicionei o plugin Safe SVG ao meu site, mas parece que meus arquivos SVG são carregados corrompidos. Não consigo usá-los. Como isso é possível?
WPBeginner Support
You would want to reach out to the plugin’s support and let them know about the issue and they should be able to assist
Admin
Huu Tai
Obrigado pelas informações completas,
Será que eu poderia usar o SVG Support para fazer o upload do logotipo da web?
WPBeginner Support
Desde que seu tema não substitua especificamente isso, você deve ser capaz.
Admin
Scott
Entendo a complexidade de converter imagens de pixels em matemáticas.
Surgiu um método ou programa bastante simples ou automatizado para converter imagens jpegs e .png em SVG?
Equipe Editorial
Olá Scott,
Nenhum que tenhamos conhecimento até agora.
Admin
Cactoos
Pelo que tentei, o Inkscape pode fazer exatamente isso. É gratuito e funciona em Windows, Mac e Linux.
Gimp, Illustrator e não tenho tanta certeza, mas talvez o Krita também possa fazer isso.
Gimp e Krita também são gratuitos e multi-SO.
De fato, converti uma foto bem pesada e de alta qualidade para SVG (imagem JPG anterior direto da câmera fotográfica) e funcionou perfeitamente, demorou um pouco, mas funciona. Pode ser porque estou em um sistema bem fraco.
Salman Ravoof
Quase todo software de edição vetorial tem essa funcionalidade. Tanto Inkscape quanto Illustrator podem fazer isso. No entanto, os resultados não serão tão bons se você tiver formas complexas e muitas cores (todas as imagens da vida real se enquadram nisso). Essa funcionalidade é melhor usada para imagens com menos de 4 cores, quanto menor, melhor.