24

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

For this purpose, I am following this question: Is there a way to use SVG as content in a pseudo element :before or :after but I cannot make it 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 have tried:

Example 1: Inserting the svg on the 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>

Example 2: With base64 encoding

#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>

As you can see, any of those examples does not work so I am sure that I am missing something.

What I am doing wrong?

Thanks in advance!

Francisco Romero
  • 12,787
  • 22
  • 92
  • 167
  • It might need to be an actual URL. In chrome it complains saying its not a valid URL. Make that content a SVG file like content.svg and link to that in URL and it should work. – Deckerz Aug 15 '17 at 10:37
  • @Deckerz I have tried using `content: url("data:image/svg+xml;charset=UTF-8,content.svg");` and also `content: url("content.svg");` but none of those methods worked. – Francisco Romero Aug 15 '17 at 10:42
  • @Deckerz Ok, Niloct gave me the clue of what I was missing. It seems that I was missing mandatory attributes. – Francisco Romero Aug 15 '17 at 10:45
  • @LGSon Why is this question duplicate? I mention the other question here and I have a specific problem that Niloct pointed out so I do not think this is really a duplicate because in the other question anyone mention about those attributes that are needed. – Francisco Romero Aug 15 '17 at 12:45
  • The accepted answer clearly show the structure of the SVG, hence it qualifies as a dupe. Also, in that same answer they didn't mention the lack of using `url()` with `content: ...`, which were what the dupe question asked, they simply used it in their sample. So the here given answer, together with the dupe link, complements each other. – Asons Aug 15 '17 at 12:55
  • 1
    @LGSon It is ok, now I see what you mean. I did not notice that those attributes were needed. Thanks for the explanation about why you marked it as duplicate :) – Francisco Romero Aug 15 '17 at 12:58
  • Thanks, upvoted your question ... and a dupe link draws attention to both this and the other post, which is great :) – Asons Aug 15 '17 at 13:00

1 Answers1

44

Seems like the SVG tag needed more attributes.

#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>
Niloct
  • 9,491
  • 3
  • 44
  • 57