Como adicionar SVG ao WordPress: Seu guia para imagens vetoriais no WordPress

O WordPress suporta vários formatos de imagem prontos para uso, incluindo .jpg.jpeg.png, e .gif. No entanto, ele não permite que você use SVGs (Scalable Vector Graphics), que é um dos tipos de imagem mais flexíveis do mercado. Felizmente, aprender como adicionar SVG ao WordPress é bastante simples.


Para ativar esse formato de imagem, tudo que você precisa fazer é ajustar alguns arquivos. Depois disso, você poderá usar SVGs em seu conteúdo como imagens, logotipos e muito mais. Além disso, o WordPress funciona perfeitamente com SVGs depois de ativar o tipo de arquivo.

Neste artigo, falaremos sobre o que são SVGs e por que são tão úteis. Em seguida, ensinaremos como adicionar SVG ao WordPress usando dois métodos diferentes e explicar como animar com CSS. Vamos começar!

O que são SVGs (Scalable Vector Graphics) (e por que eles são benéficos)

Um exemplo de um SVG.

SVGs (como os de Freepik) são ideais para imagens simples sem muitos elementos complexos, como ícones.

SVG não é um formato de imagem em si. Na verdade, é uma linguagem de marcação usada para criar imagens bidimensionais compostas de vetores. Isso pode parecer complexo em teoria, mas, na prática, você usará SVGs nas mesmas situações que em outras imagens.

Isso importa porque os SVGs têm alguns benefícios sobre os tipos de imagem mais comuns, como PNG e JPG. Por exemplo:

  • Eles ocupam menos espaço. Em vez de pixels, os SVGs são compostos de vetores. Portanto, suas imagens pesam menos, o que deve ajudar seu site a carregar mais rapidamente.
  • Você pode escalá-los facilmente. Como você deve saber, há limites para o quão longe você pode ampliar imagens regulares antes que elas comecem a parecer terríveis. Esse não é o caso dos SVGs, pois os vetores podem ser redimensionados para cima ou para baixo sem perda de qualidade (ou alteração no tamanho do arquivo).
  • Você pode animar SVGs com CSS. Os vetores podem ser animados usando CSS, o que pode gerar alguns efeitos exclusivos (falaremos mais sobre isso mais tarde).

Criar seus próprios SVGs pode ser difícil se você não tiver experiência em design. No entanto, você sempre pode procurar imagens de estoque SVG ou perguntar ao seu designer se ele pode replicar alguns dos elementos do seu site usando o formato.

Lembre-se de que quanto mais complexa for uma imagem, mais difícil será replicá-la usando vetores. Em outras palavras, os SVGs são uma boa alternativa para gráficos simples, como logotipos e ícones, mas não funcionam tão bem para fotografias.

Como adicionar SVG ao WordPress (dois métodos fáceis)

Como mencionamos anteriormente, o WordPress não suporta SVGs prontos para uso. No entanto, você pode ativar esse recurso manualmente ou usar um plug-in para fazê-lo. Vamos começar com o último método, porque é o mais simples.

Método 1: usar o plug-in SVG Support

Se você está procurando a maneira mais rápida de adicionar SVG ao WordPress, é isso. Vamos usar o plug-in SVG Support, que habilita esse formato de imagem específico adiciona suporte à sua biblioteca de mídia:

O processo é simples. Você só precisa instalar e ativar o plug-in normalmente, e poderá adicionar SVGs ao seu site WordPress.

O WordPress agora exige que tenhamos o nos nossos arquivos SVG antes de fazer o upload. Abra seu arquivo SVG em qualquer editor de código (como texto sublime) e adicione o seguinte à primeira linha do seu arquivo SVG e salve, para que você não encontre erros de segurança:


No entanto, existem mais duas configurações que você pode alterar, dependendo de suas necessidades. Primeiro, vamos ao Configurações → Suporte SVG aba:

Como adicionar SVG ao WordPress usando o plug-in SVG Support

Dentro, você encontrará duas opções. A primeira vez que liga o plug-in Modo avançado, que permite segmentar seus SVGs com CSS. Se você não deseja animar seus SVGs, pode pular esta opção.

Segundo, você também pode restringir a capacidade de fazer upload de SVGs para administradores apenas ativando o Restringir aos administradores? característica. Essa decisão é sua!

Método 2: modificar o site functions.php Arquivo

Todo site WordPress tem seu próprio functions.php Arquivo. Este componente essencial inclui funções, classes e filtros importantes. Também é seu ingresso para adicionar suporte SVG ao WordPress através de algumas linhas de código.

Para acessar esse arquivo, você precisa acessar seu site via FTP. Se você não possui um cliente, recomendamos o uso do FileZilla. Depois de encontrar suas credenciais de FTP e acessar seu site, você desejará ir para o seu raiz pasta, que geralmente é chamada public_html ou com o nome do seu site:

A pasta raiz do WordPress.

Agora, digite o wp-inclui pasta e procure o functions.php arquivo dentro. É importante observar que esse é o arquivo principal, enquanto também existem functions.php arquivos para cada um dos seus temas:

A pasta wp-includes.

Neste exemplo, adicionaremos o código ao arquivo principal. No entanto, você pode achar que as alterações são perdidas quando o WordPress é atualizado, portanto, sinta-se à vontade para adicioná-lo ao seu tema específico. functions.php arquivo, dependendo da abordagem com a qual você se sente mais confortável.

Observação do editor: fazer isso no arquivo de funções do seu tema é realmente a abordagem recomendada.

Acesse o functions.php arquivo agora clicando com o botão direito do mouse e escolhendo o Visualizar edição opção. Isso o abrirá usando o editor de texto padrão. Agora, role para baixo e cole esse trecho de código:

função add_file_types_to_uploads ($ file_types) {
$ new_filetypes = array ();
$ new_filetypes ['svg'] = 'imagem / svg + xml';
$ file_types = array_merge ($ file_types, $ new_filetypes);
retornar $ file_types;
}
add_filter ('upload_mimes', 'add_file_types_to_uploads');

Salve suas alterações no arquivo e feche-o. Em seguida, você pode retornar ao seu painel e testar seu novo recurso carregando um arquivo SVG na sua biblioteca de mídia, que deve funcionar sem problemas.!

Anime suas imagens SVG usando CSS

Animar seus SVGs é um processo um tanto complexo, principalmente se você não tem muita experiência no uso de CSS. No entanto, esse recurso pode ajudá-lo a criar animações simples que pesam muito pouco, especialmente em contraste com os GIFs. Além disso, você pode dimensionar seus SVGs animados para cima ou para baixo, conforme necessário, o que é algo que (novamente) GIFs não podem fazer bem.

Se você quiser ler mais sobre como animar SVGs usando CSS, poderá encontrar tutoriais on-line que o guiarão pelos princípios básicos do processo. Além disso, confira alguns exemplos do que você pode criar se você se dedicar a isso.

Conclusão

Os SVGs são um dos tipos de imagens mais interessantes que você pode usar em seu site. Sua escalabilidade não apenas os torna uma boa opção para sites responsivos, mas também é possível animá-los para que eles possam substituir GIFs em determinadas situações. Além disso, habilitá-los no WordPress é notavelmente simples.

Basta escolher um desses dois métodos para adicionar SVG ao WordPress, e você poderá brincar com o tipo de arquivo no conteúdo do seu coração:

  1. Use o plug-in SVG Support se você não quiser mexer no código.
  2. Modifique seu functions.php para adicionar suporte ao SVG, se você não deseja instalar um plug-in extra.

Você tem alguma dúvida sobre como adicionar SVG ao WordPress? Pergunte na seção de comentários abaixo!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map