Quer aprender como fazer upload de SVGs para o WordPress? Vamos apresentar neste tutorial os métodos para conseguir isso..
Administradores da Web e designers da Web são obrigados a usar diferentes formatos de arquivo de mídia em seu trabalho. Um dos formatos mais populares atualmente é o SVG, um formato vetorial baseado em XML. Infelizmente, nem todos os navegadores e plataformas suportam SVG, então você deve habilitar o suporte SVG manualmente primeiro.
Este artigo abordará as etapas para fazer upload de arquivos SVG para um site WordPress usando o plug-in SVG Support. Também responderemos a algumas perguntas sobre os problemas de segurança em torno desse formato de arquivo de mídia específico e por que vale a pena usar o SVG.
Para começar, vamos nos familiarizar com o SVG e como ele funciona.
Mas antes de começarmos, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog
Então, voltemos ao porquê de estarmos aqui.
O que é SVG?
Scalable Vector Graphics (SVG) é um formato de imagem de gráficos vetoriais baseado em texto XML. Embora formatos de imagem comuns como JPG e PNG sejam compostos de vários quadrados minúsculos chamados pixels, esse formato depende da linguagem de marcação XML para descrever os atributos da imagem.
Em janeiro, 2022, 42% de todos os sites em todo o mundo usar SVG. Esse percentual aumentou desde janeiro de 2021, quando apenas 29,4% dos sites tem usado. Semelhante aos formatos PNG e JPG, o SVG é popular entre sites de alto tráfego como Google, Wikipedia e YouTube.
Outra grande vantagem do SVG é que ele é amplamente suportado por todos os principais navegadores.
Aqui está a lista de navegadores que suportam o formato de arquivo SVG:
| navegador | Suporte parcial | Apoio total |
| Bord | - | Versão 12-18, 79-96, 97 |
| Firefox (em inglês) | versão 2 | Versões 3-94, 95, 96-97 |
| Firefox para Android | - | versão 95 |
| Chrome | - | Versões 4-96, 97, 98-100 |
| Chrome para Android | - | versão 96 |
| Safári | versão 3.1 | Versão 3.2-15.1, 15.2, TP |
| ópera | - | Versões 10-81, 82 |
| Miniópera | - | Todas versões |
| Opera telemóvel | - | Liberação 12-12.1, 64 |
| Safari no iOS | - | Liberação 3.2-15.1, 15.2 |
| Navegador Android | Versão 3-4.3 | Liberação 4.4-4.4.4, 96 |
| Navegador UC para Android | - | versão 12.12 |
| Samsung Internet | - | Liberação 4-14.0, 15.0 |
| Navegador QQ | - | versão 10.4 |
| Navegador Baidu | - | versão 7.12 |
| Navegador KaiOS | - | versão 2.5 |
Como funciona o SVG?
SVGs usam XML para produzir imagens vetoriais bidimensionais. Ao contrário do JPG e do PNG, os gráficos vetoriais não possuem pixels. Em vez disso, seu comportamento é descrito em arquivos de texto XML.
Por esse motivo, os SVGs podem ser pesquisados, indexados, roteirizados, modificados e compactados como código. Como resultado, qualquer pessoa pode criá-los usando um editor de texto ou software de gráficos vetoriais.
O WordPress suporta SVG?
Não há suporte SVG no WordPress por padrão devido aos riscos de segurança que ele impõe – abordaremos os problemas de segurança relacionados ao SVG com mais detalhes posteriormente.
Aqui está uma mensagem de erro que aparece ao fazer upload de um gráfico SVG para um site WordPress:
Existe um discussão atual em tornar o SVG parte da funcionalidade principal do WordPress. Até lá, temos que ser criativos e usar outras soluções para fazer upload de imagens SVG para o WordPress.
Por que usar o WordPress SVG?
Apesar de seus problemas de segurança, muitos usuários ainda usam esse formato de imagem, pois possui várias vantagens. Aqui estão alguns dos benefícios de usar arquivos SVG:
- Escalabilidade: Como o SVG é um formato de imagem vetorial, os arquivos SVG mantêm a mesma qualidade em todas as resoluções de tela. Essa vantagem também está presente depois de ampliá-los, e é por isso que muitas pessoas usam esse formato de imagem escalável para ícones e logotipos.
- Tamanho de arquivo menor : os arquivos SVG facilitam a melhoria do desempenho do site porque ocupam menos espaço de armazenamento na Web e carregam muito mais rápido do que outras imagens.
- SEO friendly : o Google indexa arquivos SVG, permitindo que eles apareçam na Pesquisa de imagens do Google e melhorando seus esforços de pesquisa. SEO. Com outros tipos de imagens, você está limitado a otimizar seus atributos alternativos.
- SVGs baseados em código são editáveis usando um editor de texto ou software de edição de gráficos vetoriais. Você pode otimizar arquivos SVG para sites ou até adicionar animações para tornar os gráficos interativos.
SVG no WordPress e segurança
Como o SVG é essencialmente um arquivo de texto XML, ele possui vulnerabilidades exploráveis que não afetam outros formatos de imagem. Portanto, as pessoas podem sequestrá-lo facilmente com código malicioso para lançar ataques Cross-Site Scripting (XSS) e XML External Entity (XXE) em seu sistema.
Por esse motivo, você deve ter cuidado ao manipular arquivos SVG e adicioná-los ao WordPress.
Para minimizar os riscos de segurança, certifique-se de higienizar os arquivos SVG antes de carregá-los na biblioteca de mídia do WordPress. Esse processo remove códigos e erros suspeitos, tornando as imagens seguras para o seu site.
Você pode limpar os arquivos SVG carregados usando um plug-in SVG – abordaremos as etapas posteriormente. No entanto, recomendamos que você desinfete duas vezes com o Teste de desinfetante SVG -
Outra maneira de proteger seu site WordPress é limitar os uploads de SVG apenas para usuários confiáveis. Os usuários selecionados devem estar cientes dos problemas de segurança em torno do formato SVG - isso os desencorajará a obter arquivos SVG de fontes duvidosas.
Como fazer upload de arquivos SVG para o WordPress em 2 métodos seguros
Tecnicamente, existem duas maneiras de adicionar suporte SVG ao WordPress: usando um WordPress Plugin ou ativando-o manualmente. Seja qual você escolher, sugerimos que você limite os privilégios de download apenas para administradores e usuários confiáveis para minimizar downloads maliciosos.
Use um plug-in do WordPress
Neste tutorial, usaremos Suporte SVG. esta WordPress Plugin usa uma biblioteca de limpeza SVG que será ativada automaticamente ao carregar arquivos SVG para a biblioteca de mídia. Também é fácil de configurar e de uso gratuito.
Aqui estão as etapas para configurar o suporte a SVG:
- IInstale o plug-in e ativá-lo.
- Acesso a configurações -> ajuda SVG do seu painel do WordPress.
- Marque a caixa ao lado da opção Restringir a administradores para limitar os privilégios de upload. Faça o mesmo para a opção Ative o modo avançado se você quiser acesso a recursos avançados, como renderização SVG inline e estilo CSS.
- Depois de salvar as alterações, você pode iniciar com segurança o upload de arquivos SVG para a biblioteca de mídia.
Adicione manualmente o suporte a SVG do WordPress
Este método envolve a edição de arquivos functions.php do seu site WordPress. Portanto, recomendamos que você siga estas etapas se estiver familiarizado com PHP e entender completamente o problema de segurança do SVG.
Certifique-se da backup do seu site WordPress antes de fazer alterações para evitar perda de dados em caso de configuração incorreta.
As etapas a seguir explicarão como habilitar o SVG no WordPress manualmente com a ajuda de um cliente FTP como FileZilla.
- Vá para o diretório de arquivos do seu site em seu host
- Acesso a public_html -> wp-includes. Role para baixo até você encontre funções.php.
- Clique com o botão direito do mouse neste arquivo e selecione Visualizar/Editar para abri-lo e cole o seguinte trecho de código nele:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');- Salve as alterações e tente carregar um novo arquivo SVG. Se o processo for bem-sucedido, sua biblioteca de mídia deverá aceitar o upload do arquivo.
As muitas vantagens dos arquivos SVG contribuem para a crescente popularidade desse tipo de arquivo. Infelizmente, os arquivos de texto XML são propensos à injeção de código, que é a principal razão pela qual o WordPress não inclui suporte SVG por padrão.
Dito isto, existem duas maneiras de fazer com que seu site WordPress aceite arquivos SVG: usando um WordPress Plugin ou edite o arquivo functions.php. Além de limitar os privilégios de upload, você poderá fazer upload de arquivos SVG com segurança para a biblioteca de mídia do site.
Outros recursos recomendados
Convidamo-lo também a consultar o Ressources abaixo para ter mais propriedade e controle de seu site e blog.
- Como criar um plugin WordPress simples
- Como criar um plug-in WordPress de bloco simples do Gutenberg
- Como definir sua página inicial no WordPress
- Como entender o painel do WordPress
- Como criar um plugin WordPress simples
Conclusão
É isso para este guia que mostra como fazer upload de SVGs para o WordPress. Esperamos que este artigo tenha lhe dado algumas dicas sobre os benefícios e riscos de fazer upload de arquivos SVG para um site WordPress. Se você tiver alguma dúvida ou sugestão, informe-nos dentro de Comentários.
No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
En attendant, compartilhe este artigo em suas diferentes redes sociais.
...
