O que é SVG?

SVG, ou Gráficos Vetoriais Escaláveis, é um formato de imagem vetorial baseado em XML para gráficos bidimensionais.

Principais características:

• Escalabilidade: As imagens permanecem nítidas em qualquer escala, pois são descritas por fórmulas matemáticas, não por pixels.
• Formato XML: A estrutura dos ficheiros SVG é descrita por tags, semelhante ao HTML. Isto torna-os legíveis e editáveis em texto.
• Interatividade: Possibilidade de adicionar elementos interativos com JavaScript.
• Animação: Suporte para animação de elementos com CSS ou JavaScript.
• Acessibilidade: Capacidade de descrever conteúdo para pessoas com deficiências.
• Leveza: Os ficheiros SVG podem ser menores que imagens rasterizadas de mesma qualidade.

Formas de usar SVG:

• Inserção em HTML através da tag <svg>:

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
  

• Uso como fundo em CSS:

  .element {
    background-image: url('image.svg');
  }
  

• Através da tag <img>:

  <img src="image.svg" alt="Minha imagem SVG">
  

• Através da tag <object> ou <iframe>.

O SVG é ideal para logotipos, ícones, ilustrações, gráficos e diagramas, onde a nitidez em diferentes tamanhos e a possibilidade de interatividade são importantes.