Click the circle to change colors.
<svg viewBox="0 0 10 10" height="120px" width="120px" xmlns="http://www.w3.org/2000/svg">
  <script>
    // <![CDATA[
    window.addEventListener("DOMContentLoaded", () => {
      function getColor() {
        const R = Math.round(Math.random() * 255)
          .toString(16)
          .padStart(2, "0");

        const G = Math.round(Math.random() * 255)
          .toString(16)
          .padStart(2, "0");

        const B = Math.round(Math.random() * 255)
          .toString(16)
          .padStart(2, "0");

        return `#${R}${G}${B}`;
      }

      document.querySelector("circle").addEventListener("click", (e) => {
        e.target.style.fill = getColor();
      });
    });
    // ]]></script>

  <circle cx="5" cy="5" r="4" />
</svg>