Qual é a diferença entre gráficos vetoriais (SVG) e raster? Como o SVG é utilizado no desenvolvimento web?

A gráfica vetorial (SVG) descreve imagens usando fórmulas matemáticas — linhas, curvas, polígonos. Isso permite escalar a imagem sem perder qualidade, pois ela é redesenhada completamente em qualquer tamanho.

A gráfica raster é composta por pixels — pequenos pontos com uma cor fixa. Ao ampliar uma imagem raster, a qualidade diminui, surgem pixels e borrões.

No desenvolvimento web, SVG é usado para ícones, logotipos, diagramas e animações, onde a nitidez em qualquer resolução é importante. SVG pode ser inserido diretamente no HTML como a tag <svg>, estilizado via CSS e controlado por JavaScript, tornando-o muito flexível para interfaces interativas e responsivas.

Exemplo de inserção de SVG no HTML:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>