Como Adicionar Arquivos de Imagem SVG no WordPress

Pronto para dar ao seu site WordPress uma atualização gráfica séria? Imagine um logotipo infinitamente escalável e ícones que parecem nítidos em qualquer dispositivo, sem pixelação, sem distorção. Este guia mostra exatamente como fazer upload e gerenciar arquivos SVG no WordPress usando WP Media Folder, e é feito para qualquer pessoa, mesmo que você não seja um desenvolvedor.

Neste tutorial passo a passo, vamos desvendar os benefícios dos arquivos SVG, por que os designers os amam e por que eles são fantásticos para SEO e desempenho da página. Você aprenderá vários métodos fáceis de seguir para habilitar uploads de SVG: desde o uso de plugins confiáveis até ajustes simples de código, além de estratégias inteligentes para manter seu site seguro.

Estaremos usando WP Media Folder, o poderoso plugin de gerenciamento de mídia da JoomUnited. 

Por que SVGs são Incríveis para Gráficos Escaláveis

Escalabilidade – Os arquivos SVG são vetoriais. Isso significa que você pode ampliar, aumentar ou diminuir o tamanho deles sem perder a qualidade, seja para logotipos, ícones ou designs responsivos.

Leves e otimizados para SEO – os arquivos SVG costumam ser menores do que as imagens raster e são baseados em XML, permitindo que os mecanismos de busca leiam os elementos principais diretamente (texto alternativo, títulos etc.).

Estilização e animação – Você pode manipular SVGs via CSS ou JavaScript. Quer um efeito de foco ou uma animação? Fácil.

Acessibilidade – Quando configurados corretamente, os SVGs contêm tags de texto e funções acessíveis que os leitores de tela podem interpretar, mais um ótimo motivo para usá-los.

Soluções para Adicionar SVGs no WordPress

O WordPress bloqueia o SVG por padrão devido a riscos de segurança (SVG é XML, que pode incluir código malicioso), no entanto, existem três maneiras confiáveis de habilitar o suporte a SVG:

1. Use um Plugin

 a) WPCode + trecho SVG

• Instale o plugin WPCode gratuito.
• Adicione o snippet 'Permitir Upload de Arquivos SVG' da sua biblioteca e ative-o.
• Por padrão, apenas Administradores podem enviar SVGs.

 b) Plugin de Suporte SVG

• Instale 'Suporte SVG' via Plugins > Adicionar Novo, ative-o.
• Em suas configurações, verifique "Restringir ao Administrador" e/ou "Habilitar Modo Avançado" (renderização em linha, estilo CSS).
• Faça o upload do seu SVG via Mídia > Adicionar novo ou arraste e solte.

c) Outras opções:

• SVG Seguro por Darrell Doyle, mais antigo, mas ainda usado.
• Suporte SVG higieniza uploads para evitar riscos de XSS/XXE.
• HappyFiles/CatFolders adicionam uploads de SVG com sanitização e pré-visualizações.

2. Adicione um trecho de código ao functions.php

Você pode usar o seguinte código: 

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

Onde: Arquivo functions.php do tema (sempre use um tema filho!).

Desvantagens: Não há sanitização por padrão — arriscado, a menos que seja combinada com um sanitizador. E o upload é limitado ao administrador (você pode personalizar isso).

3. Considerações de Segurança

 SVG = XML, que pode conter:

• Ataques XSS (JavaScript).
• Ataques XXE (chamadas de entidade externa).

Melhores práticas:

• Utilize plugins como SVG Support, SVG Safe e HappyFiles, que possuem sanitização integrada.
• Higienize o arquivo usando ferramentas online (por exemplo, o SVG Sanitizer Test de Darryll Doyle) antes de fazer o upload.
• Restringir uploads de SVG apenas para Administrador ou usuários confiáveis.

WP Media Folder e por que é importante para SVGs no WordPress

WP Media Folder é um gerenciador de biblioteca de mídia poderoso

- Estrutura de pasta/subpasta

-Filtros avançados, ordenação, arrastar e soltar

 - Renomear, marca d'água, substituir em massa, pré-visualizar, baixar

- Compatível com muitas ferramentas como Page Builders, WooCommerce e WPML.

Embora a WP Media Folder em si não permita o uso de arquivos SVG, ela permitirá que organizemos, mantenhamos e também gerenciemos qualquer tipo de arquivo, incluindo arquivos SVG.

Concluindo: Eleve seu Site com SVGs e WP Media Folder

Pare de lutar com pastas de mídia desorganizadas e arquivos de imagem não otimizados. Em vez disso, desbloqueie todo o potencial dos SVGs, leves, pesquisáveis e adaptáveis, com as ferramentas intuitivas de organização da WP Media Folder. 

Seja você um criador de conteúdo, designer ou dono de uma pequena empresa, esta ferramenta coloca tecnologia poderosa em suas mãos, sem precisar escrever uma única linha de código. Seu site carregará mais rápido, terá um posicionamento melhor nos mecanismos de busca e um visual incrível! O que você está esperando? Acesse aqui e adquira a sua cópia.