SVG significa Scalable Vector Graphics (Gráficos Vetoriais Escaláveis). É um tipo de formato de imagem composto por 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 (tornar maior e menor) 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 logotipos e outras imagens que precisam ser exibidas em muitos tamanhos diferentes.
Vantagens das Imagens SVG
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 de sites responsivos, 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
Lembre-se de 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 de arquivo 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 pode 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 o 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 linha, texto e gráficos icônicos em tamanhos de arquivo pequenos.
Aqui está uma rápida olhada nas diferenças entre imagens SVG, JPEG e PNG.
| Atributo | SVG | JPEG | PNG |
|---|---|---|---|
| Escalabilidade | Ilimitado, sem perda de qualidade | Limitado, perde qualidade ao ser ampliado | Limitado, perde qualidade ao ser ampliado |
| 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 vetorial, 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.
Primeiro, você deve salvar as imagens SVG nas dimensões exatas em que deseja usá-las. O redimensionamento para cima 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 Limpador e Otimizador de SVG.
Por fim, é importante usar compressão gzip com arquivos SVG. Para mais detalhes, você pode consultar 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 apenas que usuários confiáveis façam upload de imagens SVG para a 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, consulte nosso guia sobre como instalar um plugin do WordPress.
Em seguida, você precisa ir para Code Snippets » Add Snippet no seu painel de administração do WordPress. Basta procurar por ‘svg’ e passar o mouse sobre ‘Allow SVG Files Upload’.
Em seguida, você pode clicar em ‘Use snippet.’
Em seguida, você simplesmente precisa ativar o trecho de código para ‘Active’ e, em seguida, clicar em ‘Update’.
Isso permitirá o suporte seguro a SVG 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, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
