title: Svg data image as css background?
body: <p>How to make svg data image as a div background in css? If in html <code>&lt;img src="data:image/svg+xml;base64,[data]"&gt;</code> it works just fine but as a css background it does not show. I createtd a sample on code pen so you can see. So i was investigating this problem and found that some other svg data images work just fine. </p>
  
  <pre><code>.frame__wrapper {
  background: transparent url('data:image/svg+xml;base64,[data]') center top no-repeat;
  background-size: 100% auto;
  width: 310px;
  height: 272px;
  margin: 0 auto;
  padding: 26px 10px;
  }
  </code></pre>
  
  <p><a href="https://codepen.io/migors/pen/LxPNYP" rel="noreferrer">codepen working sample with svg image</a>
  I can not paste here encoded svg.</p>
  
  <p>Using data uri from this tuttorial <a href="https://css-tricks.com/lodge/svg/09-svg-data-uris/" rel="noreferrer">svg data uris</a> i managed to set css backgkround. So base64 does not show yet.</p>