Mehrad
Mehrad

Reputation: 1543

inline SVG not working in Firefox Quantum

I've tried everything and I can't get the inline style background svg to work with Firefox, this works on chrome but not firefox.

<div style="display:flex;align-items: center;justify-content:space-between;height:100%;padding:1.25em;background-repeat: no-repeat;background-size: 100%;background-image: 
        url('data:image/svg+xml;utf8,<svg version=&quot;1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;1024&quot; height=&quot;79&quot;><defs><path id=&quot;a&quot; d=&quot;M0 0h1024v79H0z&quot;/></defs><clipPath id=&quot;b&quot;><use xlink:href=&quot;#a&quot; overflow=&quot;visible&quot;/></clipPath><linearGradient id=&quot;c&quot; gradientUnits=&quot;userSpaceOnUse&quot; x1=&quot;-4&quot; y1=&quot;35&quot; x2=&quot;1024&quot; y2=&quot;35&quot;><stop offset=&quot;0&quot; stop-color=&quot;#2377b8&quot;/><stop offset=&quot;1&quot; stop-color=&quot;#2e378e&quot;/></linearGradient><path clip-path=&quot;url(#b)&quot; fill=&quot;url(#c)&quot; d=&quot;M-4-9h1028v88H-4z&quot;/></svg>');">
<div style="display:flex;align-items:center;">
	<h1 style="margin:0;color:white;font-weight:bold;font-size:1.8em;line-height:1;">
    Title
    </h1>
    <h2 style="font-size:1.2em;line-height:1.5;color:white">
    &nbsp;| Dashboard
    </h2>
</div>
<div style="display:flex;align-items:center;">
	<h1 style="margin:0;color:white;font-weight:bold;font-size:1.8em;line-height:1;margin-right:15px;">Location</h1>
    <svg version="1" xmlns="http://www.w3.org/2000/svg" width="44" height="44"><circle cx="22" cy="22" r="22" fill="#fff"/>
        <circle cx="22" cy="22" r="19" fill="#0b694f"/><circle cx="23" cy="22" r="9" fill="#f02e46"/></svg>
</div>
</div>

I've looked at everything online, and nothing is working--

Thanks in advance.

Upvotes: 0

Views: 808

Answers (1)

Robert Longson
Robert Longson

Reputation: 124099

You can't put the # character in a URL as part of the path because it is reserved to be the start of a fragment identifier. I've encoded it as %23 below.

<div style="display:flex;align-items: center;justify-content:space-between;height:100%;padding:1.25em;background-repeat: no-repeat;background-size: 100%;background-image: 
        url('data:image/svg+xml;utf8,<svg version=&quot;1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;1024&quot; height=&quot;79&quot;><defs><path id=&quot;a&quot; d=&quot;M0 0h1024v79H0z&quot;/></defs><clipPath id=&quot;b&quot;><use xlink:href=&quot;%23a&quot; overflow=&quot;visible&quot;/></clipPath><linearGradient id=&quot;c&quot; gradientUnits=&quot;userSpaceOnUse&quot; x1=&quot;-4&quot; y1=&quot;35&quot; x2=&quot;1024&quot; y2=&quot;35&quot;><stop offset=&quot;0&quot; stop-color=&quot;%232377b8&quot;/><stop offset=&quot;1&quot; stop-color=&quot;%232e378e&quot;/></linearGradient><path clip-path=&quot;url(%23b)&quot; fill=&quot;url(%23c)&quot; d=&quot;M-4-9h1028v88H-4z&quot;/></svg>');">
<div style="display:flex;align-items:center;">
	<h1 style="margin:0;color:white;font-weight:bold;font-size:1.8em;line-height:1;">
    Title
    </h1>
    <h2 style="font-size:1.2em;line-height:1.5;color:white">
    &nbsp;| Dashboard
    </h2>
</div>
<div style="display:flex;align-items:center;">
	<h1 style="margin:0;color:white;font-weight:bold;font-size:1.8em;line-height:1;margin-right:15px;">Location</h1>
    <svg version="1" xmlns="http://www.w3.org/2000/svg" width="44" height="44"><circle cx="22" cy="22" r="22" fill="#fff"/>
        <circle cx="22" cy="22" r="19" fill="#0b694f"/><circle cx="23" cy="22" r="9" fill="#f02e46"/></svg>
</div>
</div>

Upvotes: 4

Related Questions