Can SVG <use xlink> be used in a CSS background-image?

Question

Here we can see that SVGs 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? It is invalid CSS for me, but I might just be doing something wrong.

Stationer

images must be complete in a single file so the <use> reference would have to be internal to the image and not to an external file as you have it. – Hathcock

Answer 1

As @Robert Longson already commented:
No, you can't access external <use> references in images

This applies to:

• css background-image
• html <img> elements
• svg <image> elements
• css pseudo elements using Data URLs within content property

From mdn web docs: Data URLs

Note: Data URLs are treated as unique opaque origins by modern browsers, rather than inheriting the origin of the settings object responsible for the navigation.

Data URLs can't contain external file references – they will be omitted.

So you can only render self contained elements:

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="16" viewBox="0 0 64 16">
  <defs>
    <circle id="circle" cx="8" cy="8" r="8" />
  </defs>
  <use href="#circle" fill="blue" />
  <use x="16" href="#circle" fill="red" />
  <use x="32" href="#circle" fill="yellow" />
  <use x="48" href="#circle" fill="green" />
</svg>

Converted to

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' viewBox='0 0 64 16'%3E%3Cdefs%3E%3Ccircle id='circle' cx='8' cy='8' r='8' /%3E%3C/defs%3E%3Cuse href='%23circle' fill='blue' /%3E%3Cuse x='16' href='%23circle' fill='red' /%3E%3Cuse x='32' href='%23circle' fill='yellow' /%3E%3Cuse x='48' href='%23circle' fill='green' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: auto 100%;
  display: block;
  width: 4em;
  height: 1em;
  outline: 1px solid #ccc;
}

would work. However, you won't be able to select or style elements as you can with inlined svgs.

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' viewBox='0 0 64 16'%3E%3Cdefs%3E%3Ccircle id='circle' cx='8' cy='8' r='8' /%3E%3C/defs%3E%3Cuse href='%23circle' fill='blue' /%3E%3Cuse x='16' href='%23circle' fill='red' /%3E%3Cuse x='32' href='%23circle' fill='yellow' /%3E%3Cuse x='48' href='%23circle' fill='green' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: auto 100%;
  display: block;
  width: 4em;
  height: 1em;
}

<div class="icon"></div>

Leekgreen

Answer 2

Tag <use> with attribute xlink:href is deprecated according to mdn *

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Ebbarta

Yes xlink:href is classified as deprecated but it's still used and also required by a lot of applications (like graphic editors, or pdf converters). Browser Support is also complete. So it rarely the real cause of referencing problems. – Leekgreen

Answer 3

that's right, you can use SVG into CSS background-image.

.img{
  background-image: url('background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cpath d='M10 10h123v123H10z'/%3E%3C/svg%3E" );
   background-repeat: no-repeat;
   background-size: 100vh;
}

Bryozoan

@M Naufal Helmi: Sorry, but the OP's answer was about external file references within a Data-URL and not about whether they work for background-images. Besides, your code snippet has errors (you've repeated 'background-image' in 'url()'). – Leekgreen

ohh im sorry for about that sir, i replace my code background-image to snippet. im newbie actually and i want to help for this problem. forgive me about my problem sir – Bryozoan

Answer 4

This will be passed in W3C validator and A-checker without any errors. Also, the url of the CSS class won't be an issue as we are specifyig a path to CSS, and until it is valid or correct, the browser will render it.

Judenberg