It works in <svg> tags:

  <style>
    .bg {
      fill: #ffffff;

      @media (prefers-color-scheme: dark) {
        fill: #000000;
      }
    }
  </style>

But again there is tool online for it:

• SVGOMG
• ILoveIMG

It uses GSAP

JS code can be executed in svgs. Crazy as this can be a security issue!

Generate different svg. It seems to not work well with Firefox.

Use SVGs instead of icon fonts for the reasons explained in the articles.

The technique is to group all SVG images in one big SVG; and then reference them across the website with:

<svg class="icon">
  <use xlink:href="#svg-id"></use>
</svg>

Enter an SVG path data (the string inside the d attribute) to visualize it and discover all its different commands

It could be more performant than the traditional tools.

Add a background mask to an SVG icon