Skip to content

Tudo para WordPress, desenvolvimento web — e não só

🖼 Como carregar SVG no WordPress: 3 métodos seguros

🖼 Como carregar SVG no WordPress: 3 métodos seguros

Carregou um ícone SVG para o seu site e o WordPress recusa-se silenciosamente a aceitá-lo. Parece-lhe familiar? Por predefinição, o motor bloqueia ficheiros .svg por razões de segurança, e a tentativa de carregar um logótipo para a biblioteca de multimédia resulta no erro «Sorry, this file type is not permitted.»

Erro do WordPress ao tentar carregar um ficheiro SVG através da biblioteca de multimédia

O problema não é uma instalação defeituosa ou permissões de ficheiros. O WordPress exclui deliberadamente o SVG da lista de formatos permitidos porque a estrutura XML do ficheiro pode transportar código malicioso. Mas não precisa de desistir dos gráficos vetoriais: abaixo estão três formas seguras de carregar SVG sem pôr o seu site em risco.

💡 Visão geral rápida:

  • Saiba o que é o SVG e porque é que o WordPress o bloqueia
  • Escolha um de três plugins seguros para o carregamento
  • Configure o plugin de acordo com as suas necessidades em poucos minutos
  • Compare funcionalidades e obtenha uma recomendação final

O que é o SVG e como se diferencia do JPEG e do PNG

O SVG (Scalable Vector Graphics) é um formato vetorial baseado em XML. Ao contrário dos formatos rasterizados JPEG e PNG, que são compostos por píxeis, o SVG descreve imagens matematicamente, utilizando linhas, curvas e formas. O resultado é uma imagem que se mantém nítida num ecrã 4K ou num painel publicitário do tamanho de uma parede.

Para o proprietário de um site, isto significa três coisas. Primeiro, o seu logótipo e ícones têm um aspeto igualmente nítido em qualquer dispositivo, desde um telemóvel a um monitor de secretária. Segundo, um ficheiro .svg pesa várias vezes menos do que o seu equivalente PNG: um ícone típico ocupa 1 a 3 KB em vez de 15 a 30 KB. Terceiro, o SVG pode ser animado via CSS e JavaScript sem bibliotecas de terceiros.

Mas há um senão. A estrutura XML é lida pelo navegador como código, e um atacante pode incorporar um script no ficheiro. É exatamente por isso que o WordPress não inclui o SVG na lista de formatos permitidos de raiz. Quando tenta carregar um, vê aquele mesmo erro da imagem acima.

Segurança do SVG: o que precisa de saber antes de carregar

Um ficheiro .svg é um documento de texto com etiquetas como <svg>, <path> e <circle>. O navegador interpreta-o quase como HTML. Se uma etiqueta <script> ou um manipulador onload estiver escondido dentro do ficheiro, o navegador executará esse código. Isto chama-se XSS armazenado: um script malicioso é guardado no servidor e é executado sempre que um visitante abre a página.

Na prática, não foram registados ataques em massa via SVG no WordPress; a vulnerabilidade é conhecida e os programadores aprenderam há muito a fechá-la. Os plugins modernos de SVG passam o ficheiro carregado por um sanitizador: uma biblioteca que remove todas as etiquetas e atributos perigosos, deixando apenas os gráficos «limpos».

A regra é simples: nunca carregue SVG de fontes não confiáveis. Se o ficheiro foi feito pelo seu designer ou descarregado de um site oficial de ícones, os riscos são mínimos. Se o ficheiro veio de um cliente desconhecido por email, abra-o primeiro num editor de texto e certifique-se de que não há etiquetas <script> ou atributos on* no interior.

Abaixo estão três plugins que resolvem o problema de carregamento de SVG com diferentes níveis de controlo e configurações.

Resultados da pesquisa por plugins SVG no directório do WordPress

Método 1: SVG Support, o máximo de capacidades

Página de definições do plugin SVG Support com opções de segurança e modo avançado

O SVG Support é o plugin mais popular para carregar gráficos vetoriais no WordPress. Mais de 1 milhão de instalações ativas, uma classificação de 4,5 no WordPress.org e atualizações consistentes (a mais recente em maio de 2026) falam por si.

A instalação é a padrão: Plugins → Adicionar Novo, escreva «SVG Support» na barra de pesquisa, clique em Instalar Agora e depois em Ativar. Após a ativação, vá a Configurações → SVG Support.

A principal configuração que deve ativar de imediato é Restringir a Administradores. Impede que qualquer pessoa, exceto os administradores, carregue SVG. Se for o único a gerir o site, esta caixa de verificação protege contra o carregamento acidental de um ficheiro perigoso por um editor ou especialista em SEO.

O Modo Avançado ativa a animação CSS e a renderização inline do SVG. Precisa disto se planeia animar ícones ou alterar a sua cor através dos estilos do tema. Sem esta caixa de verificação, o plugin remove automaticamente atributos potencialmente perigosos e a animação pode quebrar.

O SVG Support também sabe como envolver os ficheiros carregados numa etiqueta <img> com as dimensões corretas; isto é importante para as Core Web Vitals, porque o navegador reserva espaço para a imagem antes de esta carregar e a página não «salta».

  • Vantagens: controlo de acesso detalhado, modo avançado para animações, dimensionamento automático de imagem, atualizações regulares
  • Desvantagens: configurações disponíveis apenas num separador separado (sem integração com a biblioteca de multimédia)
  • Preço: gratuito
  • Download: 🔗 SVG Support no WordPress.org

Método 2: Safe SVG, minimalismo da equipa 10up

Página de instalação do plugin Safe SVG a partir do painel do WordPress

O Safe SVG é desenvolvido pela agência 10up; são as pessoas em quem a Microsoft, a Adobe e a Casa Branca confiam. E essa é a melhor recomendação que um plugin de segurança pode ter.

Ao contrário do SVG Support, o Safe SVG não requer configuração. Instale, ative e está pronto; pode começar a carregar SVG. O plugin usa a mesma biblioteca de sanitização que o núcleo do WordPress (enshrined/svg-sanitize) e passa cada ficheiro por ela no momento do carregamento. Sem interfaces extra, sem configurações; simplesmente funciona.

O Safe SVG permite carregamentos de SVG para todos os utilizadores que tenham a capacidade upload_files. Se o seu site tiver vários autores, deve restringir adicionalmente o grupo, por exemplo, através de um plugin de gestão de funções. Mas para um administrador único, este é o caminho mais simples e seguro.

O plugin existe há anos, tem mais de 1 milhão de instalações ativas e uma classificação de 4,4. É atualizado com menos frequência do que o SVG Support (a mais recente em abril de 2026), mas isso é, na verdade, um sinal de estabilidade: não há nada para avariar.

  • Vantagens: sem necessidade de configuração, funciona de imediato, sanitização ao nível do núcleo do WordPress, programador com uma reputação impecável
  • Desvantagens: sem definições de controlo de acesso, sem modo avançado para animações, sem renderização inline
  • Preço: gratuito
  • Download: 🔗 Safe SVG no WordPress.org

Método 3: WP SVG Images, sanitização com controlo de funções

Banner do plugin WP SVG Images para carregamento seguro de ficheiros SVG no WordPress

O WP SVG Images é desenvolvido pela equipa do ShortPixel, conhecida pelas suas ferramentas de otimização de imagem. O plugin ocupa um meio-termo entre o SVG Support e o Safe SVG: as definições de funções estão presentes, mas não há ecrãs desnecessários.

Após a ativação, o plugin permite imediatamente carregamentos de SVG para todos os administradores e editores. Em Configurações → WP SVG Images, pode afinar quais as funções autorizadas a carregar e ativar a sanitização individualmente para cada função. Por exemplo: os administradores carregam sem verificações, os editores carregam com sanitização obrigatória, os autores não podem carregar de todo.

Uma vantagem adicional é a pré-visualização do SVG diretamente na biblioteca de multimédia. O WordPress padrão mostra um ícone de espaço reservado em vez do ficheiro vetorial. O WP SVG Images renderiza uma miniatura, para que veja exatamente o que carregou sem abrir o ficheiro num novo separador.

O plugin também fornece filtros para programadores: WPSVG_setAllowedTags e WPSVG_setAllowedAttrs permitem-lhe adicionar etiquetas e atributos personalizados à lista de permissões do sanitizador.

  • Vantagens: pré-visualização de SVG na biblioteca de multimédia, definições flexíveis de sanitização por função, filtros para programadores, suporte ativo
  • Desvantagens: sem modo de animação avançado, requer PHP 5.6.40+
  • Preço: gratuito
  • Download: 🔗 WP SVG Images no WordPress.org

Tabela comparativa: qual o plugin a escolher

Plugin

Instalações ativas

Classificação

Definições de funções

Pré-visualização na biblioteca

Animações SVG

SVG Support

1M+

4,5 ★

✅ (admin / todos)

✅ (Modo Avançado)

Safe SVG

1M+

4,4 ★

❌ (apenas upload_files)

WP SVG Images

30K+

5,0 ★

✅ (individualmente por função)

Todos os três plugins são gratuitos e utilizam bibliotecas de sanitização comprovadas. O SVG Support é a escolha para quem precisa de animação e o máximo controlo. O Safe SVG é para quem valoriza a simplicidade e não quer mexer em configurações. O WP SVG Images é um compromisso com uma pré-visualização conveniente e distribuição flexível de permissões.

Como instalar um plugin de SVG e carregar um ficheiro: passo a passo

Independentemente do plugin que escolher, o processo de instalação é o mesmo:

Passo 1. No painel de administração do WordPress, abra Plugins → Adicionar Novo.

Passo 2. Na barra de pesquisa, introduza o nome do plugin: SVG Support, Safe SVG ou WP SVG Images.

Passo 3. Clique em Instalar Agora no cartão do plugin desejado e depois em Ativar.

Passo 4. Se o plugin tiver configurações (SVG Support ou WP SVG Images), vá ao separador correspondente e ative as restrições de funções. Para o Safe SVG, este passo não é necessário.

Passo 5. Abra o editor de artigos ou páginas. No bloco de Imagem, clique em «Carregar»; o formato .svg está agora na lista de formatos permitidos.

Antes de carregar um ficheiro SVG, certifique-se de que confia na sua origem. Idealmente, use ficheiros criados pelo seu designer no Illustrator, Figma ou Inkscape. Se recebeu um SVG de um contratante externo, abra-o no Bloco de Notas e examine-o rapidamente: não deve conter <script> ou onload=.

Na prática, uma verificação manual de três segundos mais o sanitizador do plugin proporcionam uma margem de segurança dupla. Em anos de trabalho com o WordPress, nunca encontrámos um único incidente real com SVG carregado através de qualquer um dos três plugins descritos.

Se prefere o formato de vídeo, o clipe acima mostra todo o processo, desde a instalação do plugin até à inserção do SVG numa página.

⁉️🤔 Perguntas frequentes

Posso carregar SVG sem um plugin?

Adicione um snippet com o filtro upload_mimes que regista o tipo MIME image/svg+xml. No entanto, não recomendamos esta abordagem: sem um sanitizador, expõe o seu site a XSS armazenado. Um plugin resolve o problema de segurança automaticamente; uns poucos cliques contra um potencial buraco nas suas defesas.

Porque é que o plugin Enable SVG já não está disponível?

Motivo: «Pedido do Autor». O plugin não era atualizado há 4 anos e foi removido permanentemente do WordPress.org. Se o tiver instalado, substitua-o por um dos três plugins acima. São mantidos ativamente e compatíveis com o WordPress 7.0.

Como verifico se um SVG carregado é seguro?

Um SVG seguro consiste em primitivas gráficas como svg, g e path no interior. Nenhum script, nenhum foreignObject e nenhum atributo onload ou onclick aparece num ficheiro limpo. Todos os três plugins neste artigo removem automaticamente os elementos perigosos durante o carregamento.

Qual o formato melhor para um logótipo, SVG ou PNG?

O SVG é a escolha certa para a maioria dos sites. Um logótipo vetorial ocupa apenas alguns kilobytes, não fica desfocado em ecrãs retina e pode mudar de cor via CSS. O PNG só é necessário se o logótipo contiver uma fotografia ou um gradiente complexo que renderize mal em vetor.

WP SVG Images ou Safe SVG: qual é mais fiável?

A diferença está na conveniência. O Safe SVG é «instalar e esquecer» de uma agência de elite. O WP SVG Images oferece pré-visualizações na biblioteca de multimédia e definições individuais de funções. Em termos de segurança, são equivalentes.

Conclusão: o que instalar em 2026

Todos os três plugins resolvem a tarefa de carregamentos seguros de SVG; a escolha resume-se ao seu caso de uso.

Precisa de animação de ícones vetoriais e renderização inline? Opte pelo SVG Support; é o único plugin com modo avançado.

Quer apenas carregar um logótipo e esquecer o problema? O Safe SVG é a sua opção. Instale, ative, está feito.

Precisa de pré-visualizações na biblioteca de multimédia e controlo de acesso detalhado para a sua equipa? Escolha o WP SVG Images; a ShortPixel criou uma ferramenta conveniente com a melhor classificação entre os plugins de SVG.

Resumindo: instale o Safe SVG para o minimalismo ou o SVG Support para o controlo total. Ambas as opções são gratuitas e testadas em milhões de sites. E, mais importante, após instalar qualquer um dos três plugins, o erro «tipo de ficheiro não permitido» desaparece de vez.