O que é SVG — é um formato ou uma tag? Como trabalhar com SVG no DOM? Como pintar um elemento SVG individual ao passar o mouse?

O SVG é um formato de gráficos vetoriais baseado em XML. No HTML, o SVG é apresentado como um conjunto de tags (por exemplo, <svg>, <circle>, <rect>, <path> e outros), que descrevem elementos gráficos.

A manipulação do SVG no DOM ocorre da mesma forma que com outros elementos HTML. Pode-se usar JavaScript para aceder e modificar atributos, estilos e a estrutura do SVG.

Para pintar um elemento SVG individual ao passar o rato, pode usar a pseudo-classe CSS :hover. Por exemplo:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
</svg>

<style>
  #myCircle:hover {
    fill: red;
  }
</style>

Ao passar o rato sobre o círculo, a sua cor mudará de azul para vermelho.

Também pode controlar os estilos através do JavaScript, por exemplo:

const circle = document.getElementById('myCircle');
circle.addEventListener('mouseenter', () => {
  circle.setAttribute('fill', 'red');
});
circle.addEventListener('mouseleave', () => {
  circle.setAttribute('fill', 'blue');
});

Assim, o SVG é tanto um formato como um conjunto de tags no DOM, com os quais pode trabalhar com as tecnologias web padrão.