Blog

Um arquivo SVG pode oferecer gráficos poderosos em qualquer escala, acelerar seu site e melhorar o SEO.

Com esses resultados potenciais, por que apenas 53% dos sites que usam arquivos SVG? A verdade é que a otimização de imagem online não é fácil. Qualidade resolução de imagem, design responsivo e animação pode melhorar qualquer site. Mas, se não forem bem executados, podem ter efeitos devastadores na experiência do usuário e na velocidade do site.

SVGs são uma espécie de truque de mágica no design de sites. Eles geram gráficos nítidos em qualquer escala, mas também são otimizados para mecanismos de pesquisa. Os arquivos SVG são programáveis, geralmente menores que outros formatos e capazes de animações dinâmicas. Há muito que você pode fazer com seu site depois de aprender sobre arquivos SVG.

Continue lendo este guia rápido para o poderoso arquivo SVG ou clique em um dos links abaixo para avançar:

O que é um arquivo SVG?

Um arquivo SVG, abreviação de scalable vector graphic file, é um tipo de arquivo gráfico padrão usado para renderizar imagens bidimensionais na Internet.

Scalable arquivos gráficos vetoriais são um formato compatível com a Web que armazena imagens como vetores.

Isso levanta a questão: o que exatamente é um gráfico vetorial?

Raster vs. .Vector

Há mais do que alguns formatos de arquivo de imagem em uso na web hoje, que podemos dividir em duas categorias: gráficos raster e gráficos vetoriais.

Você provavelmente está familiarizado com os formatos comuns PNG e JPEG. Estes são formatos de gráficos raster, o que significa que eles armazenam informações de imagem em uma grade de quadrados coloridos, também chamados de bitmap. Os quadrados neste bitmap se combinam para formar uma imagem coerente, muito parecida com os pixels em uma tela de computador.

Gráficos raster funcionam bem para imagens altamente detalhadas como fotografias, onde cada pixel tem uma cor especificada e exata. As imagens rasterizadas têm uma resolução fixa, portanto, aumentar seu tamanho reduz a qualidade da imagem.

Formatos gráficos vetoriais — como SVG e PDF — funcionam de maneira diferente. Esses formatos armazenam imagens como um conjunto de pontos e linhas entre os pontos. As fórmulas matemáticas determinam o posicionamento e a forma desses pontos e linhas e mantêm suas relações espaciais quando a imagem é ampliada ou reduzida. Os arquivos gráficos vetoriais também armazenam informações de cores e podem até exibir texto.

 

Como funcionam os arquivos SVG</h2 >

Arquivos SVG são escritos em XML, uma linguagem de marcação usada para armazenar e transferir informações digitais. O código XML em um arquivo SVG especifica todas as formas, cores e texto que compõem a imagem.

Vejamos alguns exemplos. Vou começar desenhando um círculo simples SVG:

Quando abro o arquivo para este círculo em um editor de texto, este código XML aparece:

Como você pode ver, não há muito código aqui. Precisamos apenas de uma linha de código para desenhar um círculo. Isso ocorre porque o XML faz a maior parte do trabalho para nós com tags. No código acima, as tags são mostradas em rosa entre colchetes angulares.

Para desenhar o círculo, o código XML especifica a forma com uma tag , sua posição com o e com os atributos cx e cy , o raio com o atributo r e a cor dentro da tag