O que é e como exportar corretamente um arquivo .SVG?

Recomendamos que você use os logos da sua loja, ícones customizados e demais imagens que você tenha em vetor com arquivos na extensão .SVG

O que é um arquivo com extensão .SVG.

Svg é é a abreviatura de Scalable Vector Graphics que pode ser traduzido do inglês como gráficos vetoriais escalonáveis, ou seja, é uma “imagem” que não perde qualidade indiferentemente do tamanho que é exibido na tela por que é um vetor. Vetor, para quem não sabe, é uma "imagem" que sua forma é recalculada, ou redesenhada, com coordenadas X e Y na tela independente do tamanho que está sendo exibido, nunca perdendo qualidade.

Diferente dos formatos .JPG, .JPEG, .PNG ou .GIF por exemplo, que são arquivos bitmaps com resolução predefinida e formados por pixels. Como não é possível recalcular ou criar mais pixels de uma imagem, eles são apenas aumentados e por isso a imagem fica distorcida e sem qualidade quando é exibida em uma tela com tamanho maior do que a sua resolução. Em determinadas situações você até consegue visualizar estes pixels em formato de quadrados na imagem.

Entendeu a diferença? Arquivos com extensão .SVG não perdem qualidade independente do tamanho e os demais sofrem distorção se forem exibidos em tamanho maior que sua resolução ou em telas mais densas de maior resolução.

Para que tipo de aplicação é recomendado o uso de .SVG na sua loja?

É altamente recomendado você usar os logos da sua loja, ícones customizados e demais imagens que você tenha em vetor com arquivos na extensão .SVG, garantindo uma qualidade perfeita destas imagens em todos os dispositivos da sua loja virtual.

Vale lembrar que não adianta você inserir uma imagem, foto, logo ou ícone que já é um .png ou .jpg, por exemplo, dentro de um software vetorial e exportá-lo em .svg. Não será possível recalcular ou criar os pixels destas imagens e consequentemente a perda de resolução será inevitável.

Qual a forma correta de exportar um arquivo .svg?

Um dos softwares vetoriais mais usados atualmente é o Adobe Illustrator, ideal para você desenhar seus ícones, logos e demais imagens vetoriais que você quer exibir na sua loja.

Por outro lado a exportação destes vetores em um arquivo .svg do Adobe Illustrator requer uma série de cuidados. Muitas vezes, mesmo assim acontecem alguns problemas de exibição deste .svg nos navegadores, aparentemente ficando vazios. Existem algumas ferramentas online gratuitas para otimização de svg que resolvem em alguns casos, uma delas é esta: https://jakearchibald.github.io/svgomg/.

Mas se você quer simplificar a sua vida, exporte seu .svg no software Figma!

Como exportar arquivos .svg no Figma

Para você que ainda não conhece, o Figma é um software com versão gratuita focado no design e prototipagem de interfaces de lojas virtuais, sites, sistemas, aplicativos e por aí vai. Como os arquivos .svg são muito utilizados nestes casos a exportação de .svg do Figma é o caminho mais fácil e sem erros que você vai encontrar.

Siga os passos abaixo:

1 - Crie uma conta acessando https://www.figma.com/ e clique no botão “Sign Up”, no topo a direita da página.

2 - Siga as instruções para a criação do seu time e confirme sua conta

3 - Já dentro do figma, clique no botão “+” também no canto superior direito da tela para criar um novo arquivo.

4 - O Figma aceita vetores que estão na área de transferência do seu computador, você pode copiar um vetor do Adobe Illustrator e colar diretamente no Figma que o vetor será importado sem problemas.

5 - Para exportar, se o vetor tiver mais que um elemento, você precisa agrupar todos estes elementos e exportar o grupo, pois a lógica de é exportar elemento por elemento.

6 - Selecione o elemento ou grupo que deseja exportar e role até o final da coluna da direita até achar a seção “Export”, clique no “+”

7 - Dentro desta seção, selecione a extensão .svg, clique no botão Export e selecione a pasta para salvar o arquivo.

#Dica

Você também pode instalar o aplicativo do Figma no seu computador, que é bem mais leve do que utilizar no navegador. Para fazer o download acesse https://www.figma.com/downloads/