SVG in 'background-image:url(background.svg)' not displaying-CodePudding

I want to use an svg image as a background for a div but it is not displaying on any browser.

Attaching a snipped below :

HTML :

<div class="landing></div>

CSS :

background-image : url(bg.svg);
width:100vw;
height:100vh;
background-repeat: no-repeat;
background-size: contain;

Please Note that the svg I'm using is fairly complex. Upon using an svg with a simple shape and a single color it seems to be working. Attaching a screenshot of the svg for your reference.enter image description here

Minimal Reproducible Example : Codepen

CodePudding user response：

Problem is coming from the cloudinary file path. You can use the fl_sanitize flag in cloudinary or you can set local file path for background URL.

Here is detailed about SVG files in Cloudinary https://support.cloudinary.com/hc/en-us/community/posts/115000752672/comments/115000145951

CodePudding user response：

You are using id's containing non-compliant characters – in your case it's the colon ':'

<g clip-path="url(#clip0_32:2)">

Viewing svg files directly in chrome will show the image. In an html context chrome will refuse to render it.

So you could easily replace all occurrences by e.g a hyphen like so:

<svg width="1440" height="810" viewBox="0 0 1440 810" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_32-2)">
<rect width="1440" height="810" fill="white"/>
<g style="mix-blend-mode:darken" filter="url(#filter0_f_32-2)">
<ellipse cx="336" cy="473" rx="481" ry="288" fill="url(#paint0_radial_32-2)" fill-opacity="0.4" style="mix-blend-mode:multiply"/>
</g>
<g style="mix-blend-mode:darken" filter="url(#filter1_f_32-2)">
<ellipse cx="2068.5" cy="661" rx="474.5" ry="215" fill="url(#paint1_radial_32-2)" fill-opacity="0.2" style="mix-blend-mode:multiply"/>
</g>
</g>
<defs>
<filter id="filter0_f_32-2" x="-310.91" y="19.09" width="1293.82" height="907.82" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="82.955" result="effect1_foregroundBlur_32-2"/>
</filter>
<filter id="filter1_f_32-2" x="1428.09" y="280.09" width="1280.82" height="761.82" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="82.955" result="effect1_foregroundBlur_32-2"/>
</filter>
<radialGradient id="paint0_radial_32-2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-56.305 490.702) rotate(1.378) scale(1048.6 628.503)">
<stop stop-color="#217AE2"/>
<stop offset="0.419491" stop-color="#181FCE"/>
<stop offset="1" stop-color="#00B6DE"/>
</radialGradient>
<radialGradient id="paint1_radial_32-2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1681.5 674.215) rotate(1.0429) scale(1034.3 469.253)">
<stop stop-color="#217AE2"/>
<stop offset="0.419491" stop-color="#181FCE"/>
<stop offset="1" stop-color="#00B6DE"/>
</radialGradient>
<clipPath id="clip0_32-2">
<rect width="1440" height="810" fill="white"/>
</clipPath>
</defs>
</svg>