我在Firefox上尝试了以下HTML。 .case-1和.case-2都有效。但在Chrome中，背景图片都不可见：
.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>
仅供参考，背景图片是带有此SVG源代码的Twitter徽标：
<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>
我已针对w3c validator及其有效。
对此进行了检查有什么建议吗？
答案 0 :(得分：2)
宽度为＆＃34;＆＃34;和＃34;＆＃34;的高度不是真的有效。 w3c验证器doesn't validate attribute values，只是元素和属性名称。
Firefox将100％替换为无效值，Chrome也应该替代，但显然会做其他事情。你可以report that as a bug。
我已经纠正了以下缺失值。
.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%22100%%22%20width%3D%22100%%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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImZpbGw6IzAwMDsiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiPiA8cGF0aCBkPSJNMTcuMzE2IDYuMjQ2Yy4wMDguMTYyLjAxLjMyNi4wMS40ODggMCA0Ljk5LTMuNzk2IDEwLjc0Mi0xMC43NCAxMC43NDItMi4xMzIgMC00LjExNS0uNjI1LTUuNzg2LTEuNjk3LjI5Ni4wMzMuNTk2LjA1LjkuMDUgMS43NyAwIDMuMzk3LS42MDMgNC42ODgtMS42MTQtMS42NS0uMDMtMy4wNDYtMS4xMi0zLjUyNi0yLjYyLjIzLjA0Mi40NjcuMDY1LjcxLjA2NS4zNDUgMCAuNjgtLjA0NC45OTUtLjEzQzIuODQgMTEuMTggMS41NCA5LjY1OCAxLjU0IDcuODI4VjcuNzhjLjUwOC4yODQgMS4wOS40NTQgMS43MS40NzQtMS4wMTQtLjY3OC0xLjY4LTEuODMyLTEuNjgtMy4xNDMgMC0uNjkuMTg1LTEuMzQuNTEtMS44OTZDMy45NDMgNS40OTggNi43MjYgNyA5Ljg2MyA3LjE1OGMtLjA2NC0uMjc3LS4wOTctLjU2NC0uMDk3LS44NiAwLTIuMDg1IDEuNjktMy43NzQgMy43NzQtMy43NzQgMS4wODUgMCAyLjA2Ni40NTcgMi43NTUgMS4xOS44Ni0uMTcgMS42NjctLjQ4MyAyLjM5Ny0uOTE1LS4yODIuODgtLjg4IDEuNjItMS42NiAyLjA4Ni43NjQtLjA5MiAxLjQ5LS4yOTMgMi4xNjgtLjU5NC0uNTA2Ljc1OC0xLjE0NiAxLjQyMi0xLjg4NCAxLjk1M3oiLz48L3N2Zz4=);
}<div class="case-1"></div>
<div class="case-2"></div>