Hoje, neste artigo, você vai aprender a adicionar arquivos SVG no WordPress especificamente usando Elementor.

O que você acha de utilizar imagens que podem ser redimensionadas infinitamente sem perder qualidade ou nitidez? Você consegue imaginar como isso é útil para o design responsivo? Isso é o que o SVG tem de melhor podemos implementar este recurso dentro do WordPress.

Olá! Ed Francisco aqui e mostrarei a você como utilizar a biblioteca de arquivos SVG do Elementor para inserir ícones e gráficos SVG no WordPress contrapondo ao uso das tradicionais imagens bitmap na web.

Mais antes de qualquer coisa vamos entender o que é SVG.

O que é SVG?

O Scalable Vector Graphics (SVG) é um formato de imagem vetorial baseado em XML para gráficos bidimensionais formados através de expressões matemáticas cuja as instruções inseridas produzem formas preenchidas e que oferece suporte para interatividade e animação.

Se você trabalha com Adobe Illustrator, Inkscape ou Corel Draw você sabe que eles geram arquivos do tipo vetor e o SVG é um deles.

Diferentemente dos arquivos de imagens bitmap (como JPG, PNG, GIF, etc) os vetores não são formados por pixels. O pixel, como tem dimensão física, perde a nitidez quando redimensionado. Coisa que não acontece com o SVG e arquivos vetoriais. Você pode aumentar ou diminuir o tamanho sem perda de resolução ou desfocagem. Eles são extremamente leves e mantêm suas páginas enxutas.

As imagens SVG poder ser usadas em logotipos, como ícones até como background e podem ser modificados através de CSS e Javascript.

Inserindo gráficos SVG através do Controles do Widgets de ícones do Elementor

A partir da versão 2.6 do Elementor se tornou nativo o suporte para inserção de gráficos vetoriais sem a necessidade da utilização de plugins para isso.

Com isso você pode usar qualquer widget para inserção de ícones que através de seus controles você poderá inserir em seu site Elementor dois tipos de recursos SVG:

• ícones;
• imagens SVG.

Vou mostrar como proceder começando com as imagens.

Inserindo imagens SVG no Elementor

Para inserir uma imagem SVG no Elementor você pode utilizar qualquer dos widgets nativos de ícones da plataforma (ícones, lista de ícones, ícones sociais), mas se for a primeira que você for inserir será necessário habilitar o upload. Veja como proceder.

1 – No campo de busca de widget digite “ícone” depois escolha qual widget você quer escolher arrastando-o para a interface da página.

2 – Depois coloque o Mouse em cima do símbolo do ícone na área de edição do ícone e clique na opção “Upload SVG”.

3 – Aparecerá uma mensagem de alerta sobre os riscos de usar arquivos SVG mesmo o Elementor executando processos para eliminação de códigos maliciosos (falarei mais sobre segurança mais a frente). Você deve clicar em Ativar.

4 – Você será redirecionado para a biblioteca de mídia, onde poderá escolher entre as imagens que estão lá presente ou fazer upload de uma imagem em seu computador.

5 – A imagem então será inserida no bloco que você arrastou o widget.

Estilizando imagem inserida

Depois que você insere a imagem o widget oferece, na aba conteúdo, de inserção de link, alinhamento e modo de visualização (default, empilhado e emoldurado) e na aba de estilização opções onde você pode definir a cor do elemento, e com controles deslizantes, o tamanho, se deseja rotacioná-la e efeitos hover.

Questões de segurança envolvendo arquivos SVG

Você já sabe que o Elementor irá tentar proteger o sistema caso identifique arquivos SVG com códigos maliciosos. Isso porque o WordPress não suporta uploads de arquivos SVG por padrão por questão de segurança.

Os arquivos SVG contêm código na linguagem de marcação XML, semelhante ao HTML. Seu navegador analisa a linguagem de marcação XML para exibir a imagem. No entanto, isso abre seu site para possíveis vulnerabilidades XML como obter acesso não autorizado a dados do usuário, disparar ataques de força bruta entre outros ataques.

Com isso pode ocorrer o seguinte erro quando você for fazer o upload de uma imagem SVG.

“Invalid SVG Format, file not uploaded for security reasons” (Formato SVG inválido, arquivo não enviado por motivos de segurança).

Solução 1 para o arquivo não enviado – Otimização

Não que isso influencie diretamente na segurança, mas é indicado que você salve os arquivos SVG de aplicativos como o Illustrator, sem os estilos embutidos, para permitir que o Elementor crie um estilo para o ícone.

Para isso na guia de salvamento “SVG Options” em CSS Properties escolha a opção “Presentation Attributes”.

Após isso você pode fazer uma otimização online através do site SVGOMG que poderá “limpar” seu arquivo de modo a ser aceito no upload na biblioteca de mídia.

Você pode tanto fazer o upload do seu SVG usando a opção “Open SVG” ou a opção “Paste Markup” para colocar o código XML fornecido pelo Illustrator conforme vídeo que deixarei a seguir.

Vá até a aba Markup e faça os ajustes conforme o vídeo. Depois clique no botão azul para fazer o download do arquivo SVG otimizado.

Após esse processo faça novamente o upload do arquivo.

Solução 2 para o arquivo não enviado – Sanitização com plugin

Apesar que em todos os casos práticos que eu precisei o método 1 foi o suficiente existe um plugin que promete que faça o upload de SVG de forma segura. Se trata do Save SVG. 

A função deste plugin é certificar de que as imagens SVG estão higienizados para impedir que as vulnerabilidades do arquivo afetem seu site.

O seu uso é simples. Basta fazer a instalação e ativação. A versão gratuita não necessita fazer configurações.

Onde encontrar boa fontes de imagens SVG

Caso você não tenha tempo para criar suas próprias imagens SVG um bom recurso é visitar o site Flaticon que é um dos maiores bancos de imagens vetorizadas da internet.

Inserindo ícones SVG no Elementor

Para inserir um ícone SVG no Elementor você pode utilizar qualquer dos widgets nativos de ícones da plataforma (ícones, lista de ícones, ícones sociais).

1 – No campo de busca de widget digite “ícone” depois escolha qual widget você quer escolher arrastando-o para a interface da página.

2 – Depois coloque o mouse em cima do símbolo do ícone na área de edição do ícone e clique na opção “Icon library” (Biblioteca de ícones).

3 – Você terá acesso a biblioteca de fontes SVG Font Awesome 5 adicionada nesta versão do Elementor, que está com um desempenho para carregamento das páginas. Navegue pelas diferentes opções na Biblioteca de ícones.e selecione o ícone de sua preferência e clique em Insert.

Estilizando o ícone inserido

Depois que você insere o ícone o widget oferece, na aba conteúdo, de inserção de link, alinhamento e modo de visualização (default, empilhado e emoldurado) e na aba de estilização opções onde você pode definir a cor do elemento, e com controles deslizantes, o tamanho, se deseja rotacioná-la e efeitos hover.

Inserindo ícones personalizados

Talvez você não tenha encontrado na Icon Library o ícone que você deseja. Então você inserir um ícone de uma fonte externa na biblioteca. O processo é simples basta que você clique na opção “Upload”. 

Único problema que este recurso é só para quem tem a versão PRO do Elementor instalada no WordPress. Mas ainda sim é possível fazer upload dos ícones através do plugin Custom Icons for Elementor.

Faça instalação do plugin. Para saber como instalar plugins leia este artigo.

Você terá acesso a interface de upload do ícone acesso o menu Custom Icons. E você pode personalizar seus ícones usando o site Flaticon em conjunto com o site Fontello.

Processo de construção do ícone personalizado

1 – Vá até o site Flaticon e escolha uma imagem que você seja transformar em ícone e faça o download da imagem.

2 – Depois vá até a pasta onde está o arquivo baixado e o arraste para dentro do site Fontello no campo Custom Icons.

3 – A imagem aparecer neste campo em forma de miniatura. Clique nela para selecionar.

4 – Depois vá no botão Download Webfont e clique para baixá-la.

5 – Vá até a interface de upload do Custom Icons e execute o upload do arquivo baixado.

6 – Retorne até a página que está editando o Elementor recarregue-a e executa o processo de inserir um ícone através de um widget como já mostrado nesse artigo.

7 – Você verá que a Icon Library mostra acesso para inserção que você criou no Fontello. Selecione o ícone e clique em Inserir.

8  – O ícone será inserido na área desejada.

Conclusão

Procurei passar as formas que a partir da versão do Elementor você te permita inserir arquivos SVG em seus sites WordPress. Esses arquivos serão cada vez mais usados onde pode ser mais compensador a aplicação que a aplicação de imagens bitmaps. Lógico que sempre haverá espaço para tanto imagens vetoriais quanto bitmaps. A necessidade do projeto é que vai definir o uso.

Caso a escolha seja SVG é importante estar sempre atento às questões de segurança sanitização os arquivos e verificando a procedência.

Acredito que muito ainda irá evoluir esta relação entre Design Responsivo, SVG, Elementor e WordPress a ponto de nos forçar a sempre estar atualizando este artigo. E isso será sinal de mais funcionalidades e facilidades para o usuário WordPress. 

E você o que achou do recurso para habilitação de arquivos SVG no Elementor? Dê sua opinião nos comentários!

Aproveite e compartilhe este artigo com os amigos. Também compartilhe sobre nosso curso de Elementor, o WP Elementor que apresenta aplicações dos principais recursos desta ferramenta.

Abraço!

Ed Francisco

Olá! Aqui é Ed Francisco, colaborador do Chief of Design desde suas primeiras linhas de conteúdo e de códigos.

Por falar em códigos, acredito que o HTML é a mais notável tecnologia web a qual me permitiu chegar aqui onde estou, e também escrever essas linhas sobre mim para você.

Sou formado em Tecnologia da Produção (foi aqui que conheci o HTML) e em Técnico em Produção Digital, Web e Multimídia (onde aperfeiçoei os meus conhecimentos de HTML).

Sou Paulistano da Zona Leste. Me aventuro tentando desvendar os mistérios da web desde 2008.