SVG significa Scalable Vector Graphics (Gráficos Vetoriais Escaláveis). É um tipo de formato de imagem feito de vetores (em vez de pixels), que são descrições matemáticas das formas e cores da imagem e são armazenados em formato XML.
Essas equações descrevem todos os pontos, formas, curvas, linhas e cores dentro de uma imagem SVG.
Ao contrário de outros formatos de imagem como JPEG ou PNG, o SVG pode ser ampliado e reduzido (aumentado e diminuído) sem perder qualidade. Isso o torna um ótimo formato de arquivo para imagens em diferentes tamanhos de tela, como desktops, tablets e dispositivos móveis.
SVGs são bidimensionais e tipicamente usados para ilustrações, gráficos, fontes de ícones e imagens de marca. No entanto, você também pode usá-los para animações.
Como o nome sugere, os SVGs também são escaláveis. Isso significa que eles podem ser esticados ou encolhidos sem perder nenhuma qualidade de imagem. Para esta temporada, os SVGs também são ótimos para logos e outras imagens que precisam ser exibidas em muitos tamanhos diferentes.
Prós das Imagens SVG
As imagens SVG são adequadas para muitos usos diferentes, como gráficos e ilustrações. Aqui estão alguns dos principais benefícios do formato SVG:
- Escalabilidade: Como usam vetores, as imagens SVG podem ser dimensionadas para qualquer tamanho sem perder qualidade. Isso é perfeito para design responsivo de sites, que precisa que os gráficos fiquem bons em telas de todos os tamanhos.
- Editável: Você pode editar imagens SVG com qualquer editor de texto diretamente em sua página da web usando CSS e JavaScript. Isso significa que você pode fazer alterações facilmente em suas imagens SVG.
- Tamanhos de arquivo pequenos: Arquivos SVG geralmente têm tamanhos de arquivo menores em comparação com imagens bitmap como JPEG ou PNG. Isso pode levar a tempos de carregamento de página mais rápidos e melhor desempenho do WordPress em geral.
- Compatibilidade: SVG é suportado por todos os navegadores web modernos. Isso significa que suas imagens SVG serão exibidas corretamente para quase todos os usuários online.
Contras das Imagens SVG
Tenha em mente que SVG não é adequado para todos os tipos de imagem. Aqui estão alguns dos contras do formato de arquivo SVG:
- Dificuldade: Imagens SVG podem ser mais complexas do que imagens raster padrão como JPEG ou PNG. Isso significa que você precisa de mais habilidade e conhecimento de software de edição de imagem para criar e alterar imagens SVG.
- Problemas de Renderização: Navegadores ou dispositivos mais antigos podem ter problemas para renderizar gráficos SVG corretamente.
- Problemas de Segurança: Arquivos SVG são armazenados no formato de linguagem de marcação XML, que é vulnerável a código malicioso, ataques de força bruta e ataques de cross-site scripting.
- Tamanho do Arquivo: Para imagens muito detalhadas, os tamanhos dos arquivos SVG podem se tornar bastante grandes. Isso pode diminuir os tempos de carregamento do seu site.
Imagens SVG vs. JPEG vs. PNG
SVG, JPEG e PNG são alguns dos formatos de arquivo de imagem mais populares para uso online, incluindo sites WordPress. Mas existem algumas diferenças importantes entre eles.
JPEG é um formato usado principalmente para imagens fotográficas. Ao contrário do SVG, JPEG é uma imagem raster ou bitmap, o que significa que é composta por pixels individuais.
Se você ampliar demais uma imagem JPEG, os pixels começarão a ficar visivelmente perceptíveis e a imagem poderá parecer borrada ou pixelada. Salvar imagens JPEG também diminui sua qualidade devido ao algoritmo de compressão JPEG.
PNG é outro formato de imagem raster como JPEG. Ele usa compressão de dados sem perdas, o que significa que nenhum dado é perdido quando a imagem é comprimida. Isso torna o PNG uma excelente opção para desenhos de linhas, texto e gráficos icônicos em tamanhos de arquivo pequenos.
Aqui está uma visão geral rápida das diferenças entre imagens SVG, JPEG e PNG.
| Atributo | SVG | JPEG | PNG |
|---|---|---|---|
| Escalabilidade | Ilimitada, sem perda de qualidade | Limitada, perde qualidade ao ser ampliada | Limitada, perde qualidade ao ser ampliada |
| Tamanho do Arquivo | Relativamente pequeno e gerenciável | Pode ser grande, depende da qualidade | Geralmente maior devido à compressão sem perdas |
| Melhor Para | Gráficos e ilustrações | Imagens fotográficas | Arte de linha, texto e gráficos icônicos |
| Suporta Transparência | Sim | Não | Sim |
Como Otimizar Imagens SVG
Antes de incorporar imagens ao seu conteúdo do WordPress, recomendamos otimizá-las para a web. Isso garante que suas páginas carreguem rapidamente e proporcionem uma boa experiência ao usuário.
Primeiramente, você deve salvar as imagens SVG nas dimensões exatas em que deseja usá-las. Ampliar pode aumentar o tamanho do arquivo e o tempo de carregamento da sua página, mesmo que não afete a qualidade da imagem.
Você também deve considerar remover dados desnecessários dos seus arquivos de imagem SVG. Você pode fazer isso usando uma ferramenta online de limpeza de marcação SVG como o SVG Cleaner & Optimizer.
Finalmente, é importante usar compressão gzip com arquivos SVG. Para mais detalhes, você pode ver nosso guia sobre como habilitar a compressão gzip no WordPress.
Como Usar Imagens SVG no WordPress
O WordPress não permite o upload de imagens SVG por padrão devido às vulnerabilidades de segurança da linguagem de marcação XML. É por isso que recomendamos permitir que apenas usuários confiáveis façam upload de imagens SVG na biblioteca de mídia do seu site WordPress.
Você pode habilitar o suporte a SVG facilmente com o plugin gratuito WPCode. É o melhor plugin de snippets de código que permite habilitar manualmente uploads de SVG apenas para administradores.
Primeiro, você precisará instalar e ativar o plugin WPCode. Para mais detalhes, veja nosso guia sobre como instalar um plugin do WordPress.
Em seguida, você precisa ir para Snippets de Código » Adicionar Snippet no seu painel de administração do WordPress. Basta procurar por 'svg' e passar o mouse sobre 'Permitir Upload de Arquivos SVG'.
Em seguida, você pode clicar em ‘Usar snippet.’
Em seguida, você só precisa ativar o snippet de código para ‘Ativo’ e, em seguida, clicar em ‘Atualizar’.
Isso permitirá o suporte a SVG seguro para administradores em seu site.
Para mais detalhes e para ver outros plugins de suporte a SVG, consulte nosso guia sobre como adicionar arquivos de imagem SVG no WordPress.
Esperamos que este artigo tenha ajudado você a aprender mais sobre imagens SVG no WordPress. Você também pode consultar nossa lista de Leitura Adicional abaixo para artigos relacionados sobre dicas, truques e ideias úteis do WordPress.
Se você gostou deste artigo, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e Facebook.
