sharing

Do SVG’s w/ media queries work as background images?

Change your system’s color scheme from dark to light and back again (or you can do the same thing in your browser’s dev tools). Conveniently, this also works for SVG favicons (except for Safari, but Safari is the new Internet Explorer 6 and you’ll end up with many fallbacks to make it work properly).

Seems the answer is Yes!

CSS

background-image: url("./favorite.svg");
background-size: 256px;
background-repeat: no-repeat;
background-position: center;
background-color: #eee;
@media (prefers-color-scheme: dark) {
  background-color: #111;
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
	<style>
		.ink { fill: #333; }

		@media (prefers-color-scheme: dark) { .ink { fill: #eee; } }
	</style>
	<path class="ink"
		d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" />
</svg>

Looks like this (if you are too lazy to change your system’s color scheme)