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

Question

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

Can you please provide a [mcve]? We need the actual files so that we can see the issue ourselves. — Enigmativity, Nov 05 '21 at 06:27
Here's a [codepen](https://codepen.io/harshdeepme/pen/gOLOZrj) illustrating my issue. — harsh deep singh, Nov 05 '21 at 06:37
It may be a cloudinary thing. If I'm using a different svg image I have no problem. — enxaneta, Nov 05 '21 at 08:01
@enxaneta I see the same problem if the svg is loaded onto my webserver, and if it is used as a src in an img element, but the image shows OK if just look at it in the browser (Edge/Chrome) — A Haworth, Nov 05 '21 at 08:15
Tried it by providing file path in directory intead of a cloudinary link. Still won't work — harsh deep singh, Nov 05 '21 at 10:50

herrstrietzel · Answer 1 · 2021-11-07T23:47:52.237

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>

Recommendation
Use Id or class names you would also use for selectors in html/css/js.

See also Why do colons in linearGradient IDs break them when the SVG is used in an tag?

score 1 · Answer 2 · answered Nov 05 '21 at 08:06

1

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

answered Nov 05 '21 at 08:06

Harutyun Harutyunyan

94
5

Tried it with the local file path and it still won't work. What's interesting is that with a simpler SVG (with a single shape and color) works just fine. – harsh deep singh Nov 05 '21 at 10:53

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

2 Answers2