How to add svg as content: before element pseudo-element?

Question

I am trying to use svg content inside a pseudo element :before.

For this, I follow this question: Is there a way to use SVG as content in a pseudo-element: before or: after , but I can't do this work.

I just have a simple SVG:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

And here is what I tried:

Example 1: Insert svg into a content attribute

#square{
   background-color: green;
   width: 100px;
   height: 100px;
}

#square:before{
   display: block;
   content: url("data:image/svg+xml;charset=UTF-8,<svg height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>");
   background-size: 28px 28px;
   height: 28px;
   width: 28px;
}

<div id="square"></div>

Run codeHide result

Example 2: base64 encoded

#square{
   background-color: green;
   width: 100px;
   height: 100px;
}

#square:before{
   display: block;
   content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMCIgd2lkdGg9IjEwMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0icmVkIiAvPjwvc3ZnPg==");
   background-size: 28px 28px;
   height: 28px;
   width: 28px;
}

<div id="square"></div>

Run codeHide result

As you can see, any of these examples does not work, so I'm sure something is missing.

What am I doing wrong?

Thanks in advance!

Answer 1

, SVG .

#square{
   background-color: green;
   width: 100px;
   height: 100px;
}

#square:before{
   display: block;
   content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>");
   background-size: 28px 28px;
   height: 28px;
   width: 28px;
}

<div id="square"></div>

Hide result