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 – SVGs são arquivos vetoriais. Isso significa que você pode ampliar, aumentar ou diminuir o tamanho deles sem perder qualidade para logotipos, ícones ou designs responsivos.

Leve e compatível com SEO – Arquivos SVG são frequentemente menores que imagens raster e são baseados em texto XML, para que os motores de busca possam ler elementos-chave diretamente (texto alternativo, títulos, etc.).

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

Acessibilidade – Configurados corretamente, SVGs contêm tags de texto acessíveis e papéis que leitores de tela podem interpretar, mais um motivo sólido 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: functions.php do Tema (sempre use um tema filho!).

Desvantagens: Sem sanitização por padrão — arriscado, a menos que seja emparelhado com um sanitizador. E o upload é limitado ao Admin (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:

• Use plugins como SVG Support, SVG Safe, HappyFiles com sanitização embutida.
• Sanitizar via ferramentas online (por exemplo, Teste de Sanitizador de SVG 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. 

Quer você seja um criador de conteúdo, designer ou proprietário de uma pequena empresa, isso coloca tecnologia poderosa em suas mãos sem qualquer código. Seu site carregará mais rápido, terá uma classificação mais alta e terá uma aparência incrível! O que você está esperando? Vá aqui e obtenha sua própria cópia.