Is it possible to use SVG <use> in CSS background image?

Question

Here we see that SVG can be used in CSS background images.

.icon { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="16" viewBox="0 0 64 16"> <circle fill="blue" cx="8" cy="8" r="8"/> <circle fill="red" cx="24" cy="8" r="8"/> <circle fill="yellow" cx="40" cy="8" r="8"/> <circle fill="green" cx="56" cy="8" r="8"/> </svg>'); background-repeat: no-repeat; background-size: auto 100%; display: inline-block; } 

But can <svg><use xlink:href="svg.svg#mySVG"></use></svg> be implemented? This is not valid CSS for me, but I can just do something wrong.

Answer 1

This will be passed in the W3C validator and A-checker without any errors. In addition, the CSS class URL will not be a problem, since we provide the CSS path, and until it is valid or correct, the browser will make it.