html – How to use built-in SVG as Background Image?-ThrowExceptions

Exception or error:
<div class="svg-background"></div>

<svg id="svg-source" viewBox="0 0 24 16" fill="none">
    	<path d="M23.8475 7.18155C23.6331 6.88825 18.5245 0 11.9999 0C5.4753 0 0.36647 6.88826 0.152297 7.18127C-0.0507658 7.45952 -0.0507658 7.83691 0.152297 8.11517C0.36647 8.40846 5.4753 15.2967 11.9999 15.2967C18.5245 15.2967 23.6331 8.40842 23.8475 8.1154C24.0508 7.8372 24.0508 7.45952 23.8475 7.18155ZM11.9999 13.7143C7.19383 13.7143 3.03127 9.14243 1.79907 7.64782C3.02968 6.15189 7.18352 1.58241 11.9999 1.58241C16.8057 1.58241 20.968 6.15349 22.2007 7.6489C20.9701 9.14478 16.8163 13.7143 11.9999 13.7143Z" fill="#073255"/>
    </svg>

<style>
  .svg-background {
    height: 2em;
    width: 2em;
    background-image: url(#svg-source);
  }
</style>

I’ve tried with # sign – but no result.
I want to use built-in SVG file as background pattern.

I need to achieve 2 purposes

  1. Avoid duplication SVG element on the page

  2. Avoid having external SVG image.

Any ideas?

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *