What is SVG — a format or a tag? How to work with SVG in DOM? How to color an individual SVG element on hover?

SVG is a vector graphics format based on XML. In HTML, SVG is represented as a set of tags (e.g., <svg>, <circle>, <rect>, <path>, etc.) that describe graphic elements.

Working with SVG in the DOM is similar to working with any other HTML elements. You can use JavaScript to access and modify SVG attributes, styles, and structure.

To change the color of a specific SVG element on hover, you can use the CSS pseudo-class :hover. For example:

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

When you hover over the circle, its color will change from blue to red.

You can also control styles via JavaScript, for example:

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

Thus, SVG is both a format and a set of tags in the DOM that can be manipulated with standard web technologies.