Sobes.tech
Intern

O que é SVG?

sobes.tech IA

Resposta da IA

SVG (Gráficos Vetoriais Escaláveis) é um formato de gráficos vetoriais baseado em XML para criar gráficos bidimensionais. Ao contrário das imagens rasterizadas, o SVG descreve gráficos usando fórmulas matemáticas, o que permite escalar as imagens sem perder qualidade.

Principais características do SVG:

  • Formato vetorial: As imagens são descritas por primitivas geométricas (pontos, linhas, curvas, figuras), não por pixels.
  • Base XML: A estrutura do documento SVG é baseada na sintaxe XML, tornando-o fácil de ler e editar.
  • Escalabilidade: As imagens podem ser ampliadas ou reduzidas sem perder nitidez ou qualidade.
  • Interatividade: Os elementos SVG podem ser interativos, reagindo a eventos (cliques, passagens de rato, etc.) usando JavaScript.
  • Estilização: A aparência dos elementos SVG pode ser estilizada usando CSS.
  • Animação: SVG suporta animação de elementos com ferramentas embutidas ou CSS/JavaScript.

Vantagens de usar SVG na web:

  • Ideal para ícones e logotipos: A escalabilidade garante uma exibição nítida em qualquer resolução de tela.
  • Tamanho de arquivo menor: Para muitos tipos de gráficos, os arquivos SVG podem ser menores que formatos raster semelhantes.
  • SEO-friendly: O texto em SVG é indexado por motores de busca.
  • Acessibilidade: Graças à sua natureza textual, SVG é mais acessível para tecnologias assistivas.
  • Fácil de modificar: Como é XML, seu conteúdo pode ser modificado dinamicamente.

Exemplo de uma imagem SVG simples (círculo):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>