I've tried the below HTML on Firefox. Both .case-1
and .case-2
work. But in Chrome, neither background image is visible:
.case-1 {
width: 100px;
height: 100px;
border: 1px solid black;
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20style%3D%22fill%3A%23000%3B%22%20height%3D%22%22%20width%3D%22%22%3E%20%3Cpath%20d%3D%22M17.316%206.246c.008.162.01.326.01.488%200%204.99-3.796%2010.742-10.74%2010.742-2.132%200-4.115-.625-5.786-1.697.296.033.596.05.9.05%201.77%200%203.397-.603%204.688-1.614-1.65-.03-3.046-1.12-3.526-2.62.23.042.467.065.71.065.345%200%20.68-.044.995-.13C2.84%2011.18%201.54%209.658%201.54%207.828V7.78c.508.284%201.09.454%201.71.474-1.014-.678-1.68-1.832-1.68-3.143%200-.69.185-1.34.51-1.896C3.943%205.498%206.726%207%209.863%207.158c-.064-.277-.097-.564-.097-.86%200-2.085%201.69-3.774%203.774-3.774%201.085%200%202.066.457%202.755%201.19.86-.17%201.667-.483%202.397-.915-.282.88-.88%201.62-1.66%202.086.764-.092%201.49-.293%202.168-.594-.506.758-1.146%201.422-1.884%201.953z%22%2F%3E%3C%2Fsvg%3E);
}
.case-2 {
width: 100px;
height: 100px;
border: 1px solid black;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImZpbGw6IzAwMDsiIGhlaWdodD0iIiB3aWR0aD0iIj4gPHBhdGggZD0iTTE3LjMxNiA2LjI0NmMuMDA4LjE2Mi4wMS4zMjYuMDEuNDg4IDAgNC45OS0zLjc5NiAxMC43NDItMTAuNzQgMTAuNzQyLTIuMTMyIDAtNC4xMTUtLjYyNS01Ljc4Ni0xLjY5Ny4yOTYuMDMzLjU5Ni4wNS45LjA1IDEuNzcgMCAzLjM5Ny0uNjAzIDQuNjg4LTEuNjE0LTEuNjUtLjAzLTMuMDQ2LTEuMTItMy41MjYtMi42Mi4yMy4wNDIuNDY3LjA2NS43MS4wNjUuMzQ1IDAgLjY4LS4wNDQuOTk1LS4xM0MyLjg0IDExLjE4IDEuNTQgOS42NTggMS41NCA3LjgyOFY3Ljc4Yy41MDguMjg0IDEuMDkuNDU0IDEuNzEuNDc0LTEuMDE0LS42NzgtMS42OC0xLjgzMi0xLjY4LTMuMTQzIDAtLjY5LjE4NS0xLjM0LjUxLTEuODk2QzMuOTQzIDUuNDk4IDYuNzI2IDcgOS44NjMgNy4xNThjLS4wNjQtLjI3Ny0uMDk3LS41NjQtLjA5Ny0uODYgMC0yLjA4NSAxLjY5LTMuNzc0IDMuNzc0LTMuNzc0IDEuMDg1IDAgMi4wNjYuNDU3IDIuNzU1IDEuMTkuODYtLjE3IDEuNjY3LS40ODMgMi4zOTctLjkxNS0uMjgyLjg4LS44OCAxLjYyLTEuNjYgMi4wODYuNzY0LS4wOTIgMS40OS0uMjkzIDIuMTY4LS41OTQtLjUwNi43NTgtMS4xNDYgMS40MjItMS44ODQgMS45NTN6Ii8+PC9zdmc+);
}
<div class="case-1"></div>
<div class="case-2"></div>
FYI, the background image is a Twitter logo with this SVG source code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill:#000;" height="" width="">
<path d="M17.316 6.246c.008.162.01.326.01.488 0 4.99-3.796 10.742-10.74 10.742-2.132 0-4.115-.625-5.786-1.697.296.033.596.05.9.05 1.77 0 3.397-.603 4.688-1.614-1.65-.03-3.046-1.12-3.526-2.62.23.042.467.065.71.065.345 0 .68-.044.995-.13C2.84 11.18 1.54 9.658 1.54 7.828V7.78c.508.284 1.09.454 1.71.474-1.014-.678-1.68-1.832-1.68-3.143 0-.69.185-1.34.51-1.896C3.943 5.498 6.726 7 9.863 7.158c-.064-.277-.097-.564-.097-.86 0-2.085 1.69-3.774 3.774-3.774 1.085 0 2.066.457 2.755 1.19.86-.17 1.667-.483 2.397-.915-.282.88-.88 1.62-1.66 2.086.764-.092 1.49-.293 2.168-.594-.506.758-1.146 1.422-1.884 1.953z"/>
</svg>
I have checked this against the w3c validator and its valid.
Any advice?