SVG — это формат векторной графики, основанный на XML. В HTML SVG представлен как набор тегов (например, <svg>, <circle>, <rect>, <path> и др.), которые описывают графические элементы.

Работа с SVG в DOM происходит так же, как с любыми другими элементами HTML. Можно использовать JavaScript для доступа и изменения атрибутов, стилей и структуры SVG.

Чтобы покрасить отдельный элемент SVG при наведении, можно использовать CSS-псевдокласс :hover. Например:

<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>

При наведении курсора на круг его цвет изменится с синего на красный.

Также можно управлять стилями через JavaScript, например:

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

Таким образом, SVG — это и формат, и набор тегов в DOM, с которыми можно работать стандартными веб-технологиями.

Что такое SVG — это формат или тег? Как работать с SVG в DOM? Как покрасить отдельный элемент SVG при наведении?