Using SVG tag as background image?

HTML-CSS
1

On this website I actually say that I can do that but whenever I try to use their code nothing shows up…
https://www.quora.com/Can-I-use-inline-SVG-with-HTML5-as-a-background-in-a-DIV-element

That’s the code I want to use

<svg width="50%" height="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(11.8555 50 50)">
  <animateTransform attributeName="transform" type="rotate" values="0 50 50;90 50 50" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform><circle cx="50" cy="50" r="40" stroke="#eb5e1a" fill="none" stroke-dasharray="31.41592653589793 251.32741228718345" stroke-linecap="round" stroke-width="5" transform="rotate(0 50 50)" class="">
  <animate attributeName="stroke" values="#eb5e1a;#fc1969" keyTimes="0;1" dur="1s" repeatCount="indefinite" class=""></animate>
</circle><circle cx="50" cy="50" r="40" stroke="#fc1969" fill="none" stroke-dasharray="31.41592653589793 251.32741228718345" stroke-linecap="round" stroke-width="5" transform="rotate(90 50 50)" class="">
  <animate attributeName="stroke" values="#fc1969;#41b9e6" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animate>
</circle><circle cx="50" cy="50" r="40" stroke="#41b9e6" fill="none" stroke-dasharray="31.41592653589793 251.32741228718345" stroke-linecap="round" stroke-width="5" transform="rotate(180 50 50)">
  <animate attributeName="stroke" values="#41b9e6;#55be5a" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animate>
</circle><circle cx="50" cy="50" r="40" stroke="#55be5a" fill="none" stroke-dasharray="31.41592653589793 251.32741228718345" stroke-linecap="round" stroke-width="5" transform="rotate(270 50 50)">
  <animate attributeName="stroke" values="#55be5a;#eb5e1a" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animate>
</circle></g></svg>
2

Just paste it into the HTML and it should show up. If you actually mean as a background image in CSS, then just save it as an SVG and use background-image: url(my-image.svg). What are you trying to do? That quora thread has multiple not-very-well-explained answers, but an SVG can either be dumped into the HTML as is or it can be saved as an .svg file and it’ll just work the same as any other image (though you normally have to specify height/width)

1 Like
3

I didn’t know I could save it directly as a svg file.
Thank you, that solved my problem. It doen’t matter that it’s not coded inside of css honestly.