O que é um arquivo SVG (e como usá-lo)?

Um Scalable Vector Graphic (SVG) é um tipo exclusivo de formato de imagem. Ao contrário de outras variedades, os SVGs não contam com pixels exclusivos para compor as imagens que você vê. Em vez disso, eles usam dados 'vetoriais'.

Usando SVGs, você obtém imagens que podem ser dimensionadas em qualquer resolução, o que é útil para webdesign entre muitos outros casos de uso. Neste artigo, faremos a pergunta: O que é um arquivo SVG? Em seguida, ensinaremos a você como usar o formato.

Vamos lá!

Inscreva-se no nosso canal no Youtube

O que é um arquivo SVG?

SVGs são gráficos construídos com vetores. Para os não iniciados, um vetor é um elemento com magnitude e direção específicas. Em teoria, você pode gerar quase qualquer tipo de gráfico que desejar usando uma coleção de vetores. Veja esta imagem de um retângulo azul com uma borda e sombra pretas, por exemplo:

Este é outro tipo de arquivo de imagem denominado Portable Network Graphic (PNG), usado para ilustrações e desenhos. Se você quiser replicar algo semelhante usando gráficos vetoriais, precisará gerá-lo com o código XML (o mesmo usado para mapas de sites). O código a seguir pode obter o mesmo resultado:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

Em teoria, se você pegar esse código e colocá-lo em um arquivo HTML, verá um conjunto de retângulos semelhante ao PNG - ou seja, contanto que o navegador que você usa suporte arquivos SVG. Embora as duas imagens tenham a mesma aparência, os arquivos SVG oferecem uma série de benefícios que outros formatos não oferecem. Por exemplo, os SVGs são capazes de reter a qualidade da imagem conforme aumentam ou diminuem.

Se você continuar ampliando o retângulo PNG, notará que sua qualidade começa a diminuir em algum ponto. Com gráficos baseados em pixels mais complexos, a degradação se torna evidente muito mais rápido. No entanto, os SVGs ficam bem em praticamente qualquer resolução.

Por que usar um arquivo SVG?

Muitos sites usam formatos como PNG e JPEG quase que alternadamente. Os SVGs não são tão versáteis, entretanto. Se você tentar recriar uma fotografia complexa usando vetores, normalmente acabará com arquivos SVG enormes e inutilizáveis.

O formato SVG é uma opção fantástica para todo um conjunto de outros cenários, embora:

• Design de logotipo. Como você provavelmente irá reutilizar logotipos em sites e mídias sociais, o uso de SVG resolve quaisquer problemas de escalabilidade em potencial.
• Diagramas. Os SVGs são uma combinação perfeita para diagramas e qualquer outro tipo de ilustração que dependa de linhas simples.
• Elementos animados. Você pode usar CSS para animar SVGs, o que os torna um componente útil no design de sites, especialmente para microinterações.
• Tabelas e gráficos. Você pode usar SVGs para criar gráficos e tabelas escaláveis ​​que suportam animações.

Como os SVGs usam o formato XML, isso também os torna pesquisáveis ​​e indexáveis. Os leitores de tela podem interpretar arquivos SVG, desde que você use as marcas de acessibilidade corretas.

Por fim, os arquivos SVG tendem a ser muito menores do que os equivalentes de alta resolução em outros formatos. No papel, isso significa que você pode reduzir alguns dos tamanhos de página e diminuir o tempo de carregamento. No entanto, a menos que você planeje converter a maioria de suas imagens em SVGs, o aumento de desempenho provavelmente será mínimo.

Como criar um arquivo SVG (2 maneiras)

Existem duas abordagens que você pode adotar quando se trata de arquivos SVG. Você pode criá-los do zero ou pegar uma imagem existente e convertê-la. Vamos começar com o método manual.

1. Crie um arquivo SVG manualmente

A criação de um arquivo SVG geralmente não envolve a digitação de informações vetoriais como fizemos anteriormente. Esse foi apenas um exemplo para mostrar o conceito. Em vez disso, você cria SVGs como qualquer outro gráfico - usando um programa de design e salvando o arquivo como um SVG. Muitas ferramentas modernas de design gráfico suportam SVGs fora da caixa. Algumas das principais opções incluem:

• Adobe Illustrator, Photoshop, Animate e InDesign
• Microsoft Visio
• Inkscape
• GIMP

As duas últimas opções nesta lista são soluções de código aberto. Isso os torna uma ótima opção para experimentar a criação de SVGs sem pagar por software premium. Na verdade, eles podem ser tudo de que você precisa.

Se você não tem experiência com design gráfico, criar seus próprios logotipos ou outros elementos para o seu site será um desafio. Nesse caso, sua melhor aposta será pegar as imagens existentes e convertê-las em SVGs.

2. Converta imagens existentes em SVGs

Existem várias ferramentas gratuitas que você pode usar para converter imagens de outros formatos em SVGs. A maior parte do software que mencionamos na última seção permite que você abra suas imagens e salve-as como arquivos SVG.

Se não quiser baixar nenhum software, você também pode usar ferramentas de conversão online - e há muitos serviços aos quais você pode recorrer. Um exemplo é o Vector Magic, que você pode usar para converter todos os tipos de arquivos em SVGs:

Gostamos dessa ferramenta em particular porque mostra uma prévia do seu arquivo SVG antes de baixá-lo. Você também pode usar um editor integrado para fazer pequenas alterações e correções antes de baixar o arquivo:

Claro, esta é apenas uma opção. Outros serviços de conversão de PNG e JPG para SVG incluem Convertio e Img2Go. Você vai querer fazer alguma pesquisa para encontrar a solução mais adequada para suas necessidades.

Em nossa experiência, a maioria dos conversores SVG oferece resultados de qualidade semelhante. Para obter os melhores resultados possíveis, o conversor que você usa não importa tanto quanto as imagens que você seleciona.

Como regra geral, só faz sentido usar o formato SVG para imagens 'simples' - ou seja, imagens com bordas definidas e linhas limpas. Quanto mais complexa for a imagem, mais provável é que você termine com um arquivo SVG enorme que é uma tarefa árdua para editar manualmente ou animar.

Como usar um arquivo SVG (dentro e fora do WordPress)

Os SVGs não são tão difíceis de usar. Adicionar um arquivo SVG ao seu site é tão fácil quanto pegar seu código e colá-lo em um documento HTML onde você quiser que a imagem vá.

Se você e os visitantes do seu site usam navegadores que suportam arquivos SVG (e a maioria o faz atualmente), eles poderão ver o elemento. Animar SVGs é, obviamente, mais complicado, pois requer o uso de CSS.

O processo muda se você estiver usando o WordPress, no entanto. O Content Management System (CMS) não oferece suporte a SVGs prontos para uso. Se você deseja habilitar o suporte SVG para que possa fazer upload de arquivos diretamente para o seu site, use um plug-in como o Safe SVG:

Também é possível habilitar o suporte SVG no WordPress manualmente, mas o processo é muito mais complicado. Nesse caso, usar um plugin é a opção mais segura.

Conclusão

Adaptar seu site para usar arquivos SVG é muito mais fácil do que você pode imaginar. O verdadeiro desafio está em projetar SVGs do zero ou escolher as imagens certas para converter para o formato. Felizmente, existem muitas ferramentas que você pode usar para fazer as duas coisas.

Algumas ótimas opções incluem Adobe Illustrator, InDesign e GIMP. Usando essas ferramentas, você pode criar e converter imagens existentes em SVGs. Se você estiver usando o WordPress, poderá fazer upload desses SVGs usando o plug-in Safe SVG e, em seguida, divertir-se com a animação.

Você tem alguma dúvida sobre como usar arquivos SVG? Vamos falar sobre eles na seção de comentários abaixo!

Miniatura da imagem do artigo por VectorsMarket / shutterstock.com