[tw5] Css, before: and svg

[FrD]

Hi,

I'm trying to use an svg element directly as an image in a before: 
pseudoclass.

The code below works in an html page, but not in a tiddler. I can't see why.
The image inside the url is just the same red circle that is drawn below.
Any hint ?

<style>
.square{
   background-color: Lightgreen;
   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;
}
</style>
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" 
/>
</svg>


<div class="square"></div>


Thanks
Regards

FrD

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/c613a506-494a-41f8-9e97-11f83fcc501e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.