À medida que você cria um site e adiciona imagens a esse site, uma das coisas mais importantes que você deve determinar é quais formatos de arquivo são os corretos a serem usados. Dependendo do gráfico, um formato pode ser muito melhor que outros.
Muitos web designers se sentem confortáveis com o formato de arquivo JPG, e esse formato é perfeito para imagens com profundidade de cor profunda, como fotografias. Embora esse formato também funcione para gráficos simples, como ícones ilustrados, não é o melhor formato a ser usado nessa instância. Para esses ícones, o SVG seria uma escolha melhor. Vamos dar uma olhada exatamente porque:
SVG é tecnologia de vetor
Isso significa que não é tecnologia de varredura. Imagens vetoriais são uma combinação de linhas criadas usando matemática. Arquivos rasterizados usam pixels ou minúsculos quadrados de cor. Esse é um dos motivos pelos quais o SVG é escalonável e perfeito para sites responsivos que precisam ser dimensionados junto com o tamanho de tela de um dispositivo. Porque gráficos vetoriais existem no mundo da matemática, para mudar o tamanho, você simplesmente muda os números. Os arquivos raster geralmente exigem uma revisão significativa quando se trata de dimensionamento. Quando você quer ampliar uma imagem vetorial, não há distorção, porque o sistema é matemático e o navegador apenas recalcula essa matemática e torna as linhas mais suaves do que nunca. Quando você aumenta o zoom em uma imagem raster, perde a qualidade da imagem e o arquivo começa a ficar confuso quando você começa a ver esses pixels de cor. A matemática se expande e se contrai, os pixels não. Se você quiser que suas imagens sejam independentes de resolução, o SVG lhe dará essa capacidade.
O SVG é baseado em texto
Quando você usa um editor de gráficos para produzir uma imagem, o programa tira uma foto da sua obra de arte concluída. O SVG funciona de maneira diferente. Você ainda pode usar alguns programas de software e sentir como se estivesse desenhando uma imagem, mas o produto final é uma coleção de linhas vetoriais ou mesmo palavras (que são apenas vetores na página). Os mecanismos de pesquisa analisam palavras, especificamente palavras-chave. Se você fizer o upload de um JPG, estará se limitando ao título do gráfico e talvez à frase de texto alternativo. Com o código SVG, você expande as possibilidades e cria imagens que são mais amigáveis aos mecanismos de busca.
O SVG é XML e funciona em outros formatos de idioma
Isso volta ao código baseado em texto. Você pode fazer sua imagem de base em SVG e usar CSS para polir. Sim, você pode ter uma imagem que na verdade é um arquivo SVG, mas também pode codificar o SVG diretamente na página e editá-lo no futuro. Você pode alterá-lo com CSS da mesma maneira que alteraria o texto da página, etc. Isso é muito poderoso e facilita a edição.
O SVG é facilmente editado
Esta é provavelmente a maior vantagem. Quando você tira uma foto de um quadrado, é o que é. Para fazer uma alteração, você precisa redefinir a cena e tirar uma nova foto. Antes que você perceba, você tem 40 imagens de quadrados e ainda não está certo. Com o SVG, se você cometer um erro, altere as coordenadas ou uma palavra em um editor de texto e pronto. Eu posso me relacionar com isso porque desenhei um círculo SVG que não estava posicionado corretamente. Tudo o que eu tinha que fazer era ajustar as coordenadas.
Imagens JPG podem ser pesadas
Se você quiser que sua imagem cresça em tamanho físico, ela também aumentará em tamanho de arquivo. Com SVG, um quilo ainda é uma libra, não importa o tamanho que você faça. Um quadrado com 2 polegadas de largura pesará o mesmo que um quadrado de 100 polegadas de largura. O tamanho do arquivo não muda, o que é excelente do ponto de vista do desempenho da página!
Então, qual é melhor?
Então, qual é o melhor formato - SVG ou JPG? Isso depende da imagem em si. Isso é como perguntar "o que é melhor, um martelo ou uma chave de fenda?" Depende do que você precisa realizar! O mesmo vale para esses formatos de imagem. Se você precisa exibir uma foto, o JPG é a melhor escolha para você. Se você estiver adicionando um ícone, o SVG provavelmente será uma opção melhor. Você pode aprender mais sobre quando é apropriado usar arquivos SVG aqui.
Artigo original de Jennifer Krynin. Editado por Jeremy Girard em 6/6/17
