Use svg from markup as background

Well, if the option of inserting from an external svg file background: url(../img/name.svg); , the svg can be inserted inline as an example

  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>") no-repeat; 

You only need to declare the svg struct via the xmlns attribute: xmlns='http://www.w3.org/2000/svg'

At the expense of inserting a DOM element as a background, I could be wrong, but it seems that the css specification doesn’t allow doing so yet. If you wish, you can crutch like this:

 var section = document.querySelector("section"); value = "url('data:image/svg+xml;utf8," + document.querySelector("svg").outerHTML.replace(/\r|\n/g, '') + "')"; section.style.background = value; 

 div { width: 4em; } section { outline: 1px dotted red; width: 8em; height: 8em; /* background: url(#bg); устанавливается через js */ } 

 <div> <svg viewBox="-4 -4 8 8" xmlns="http://www.w3.org/2000/svg" id="bg"> <circle r="4" /> </svg> </div> <section class="section"></section> 

Well, or even abandon this idea and absolutely position the svg and section in the same parent.