我需要在CSS数据URI中编码哪些字符？

Question

Chrome似乎支持将SVG直接插入到CSS网址中，以避免对其进行base64编码并将大小扩大33％，这有点酷/方便。然而，IE会对这些事情感到窒息，希望数据URI是URL编码的（例如<→%3C）。因为一些字符的大小增加了200％，所以任何节省都会很快消失，所以不妨使用base64。

对于一个小SVG文件：

• Raw，289 B：url('data:image/svg+xml,<svg xmlns="http://www.w3.org/" [...] </svg>')
• Base64,386 B：url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaH5vcm [...] dmc+')
• 网址编码，397 B：url('data:image/svg+xml,%3Csvg%20xmlns%3D%22ht [...] svg%3E')

然而，随着一些人的吵架，我发现ol＆＃39; IE CSS数据URI中的空格实际上并不需要%20，因此对于SVG中的每个空间，您可以将大小减去2个字节。我实际需要编码哪些字符？

Answer 1

如果每个quick script to skip encoding字符应进行网址编码（! \"#$%&'(),:;<=>?[\]^``{|}~）和Browserstack screenshots，则最低公分母（IE）似乎只需要"'#%<>[]^``{|}被转义（当数据URI用引号括起来时）

Windows 7，IE 9

许多最小化的SVG文件最终比base64编码小，并且跨浏览器的兼容性相同

• 无编码（URI： 289 B ）

  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.9 31"><path fill="#000" d="M10.9 0C4.9 0 0 5.5 0 10.9 0 20.1 10.9 31 10.9 31s10.9-10.9 10.9-20.1C21.9 5.5 17 0 10.9 0zM6.1 10.9c0-2.7 2.2-4.8 4.8-4.8s4.8 2.2 4.8 4.8c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8z"/></svg>')
  

• Base64编码（URI： 386 B ）

  url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMS45IDMxIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTAuOSAwQzQuOSAwIDAgNS41IDAgMTAuOSAwIDIwLjEgMTAuOSAzMSAxMC45IDMxczEwLjktMTAuOSAxMC45LTIwLjFDMjEuOSA1LjUgMTcgMCAxMC45IDB6TTYuMSAxMC45YzAtMi43IDIuMi00LjggNC44LTQuOHM0LjggMi4yIDQuOCA0LjhjMCAyLjctMi4yIDQuOC00LjggNC44cy00LjgtMi4xLTQuOC00Ljh6Ii8+PC9zdmc+');
  

• 网址编码默认值（URI： 397 B ）

  url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2021.9%2031%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M10.9%200C4.9%200%200%205.5%200%2010.9%200%2020.1%2010.9%2031%2010.9%2031s10.9-10.9%2010.9-20.1C21.9%205.5%2017%200%2010.9%200zM6.1%2010.9c0-2.7%202.2-4.8%204.8-4.8s4.8%202.2%204.8%204.8c0%202.7-2.2%204.8-4.8%204.8s-4.8-2.1-4.8-4.8z%22/%3E%3C/svg%3E');
  

• 仅编码"#%<>[]^``{|}的网址（URI： 319 B ）

  url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 21.9 31%22%3E%3Cpath fill=%22%23000%22 d=%22M10.9 0C4.9 0 0 5.5 0 10.9 0 20.1 10.9 31 10.9 31s10.9-10.9 10.9-20.1C21.9 5.5 17 0 10.9 0zM6.1 10.9c0-2.7 2.2-4.8 4.8-4.8s4.8 2.2 4.8 4.8c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8z%22/%3E%3C/svg%3E');