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

Question

Chrome似乎支持将SVG直接插入CSS URL，以避免必须对base64进行编码，并将大小增加33％，这很酷/很方便。IE在这种情况下令人窒息，希望数据URI是URL编码的（例如<→ %3C）。因为某些字符的大小增加了200％，所以所有节省的字符都会很快消失，因此最好只使用base64。

对于一个小的SVG文件：

• 原始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+')
• URL编码，397 B： url('data:image/svg+xml,%3Csvg%20xmlns%3D%22ht [...] svg%3E')

但是，由于四处游荡，我发现%20IE CSS数据URI中的空格实际上并不需要ol' ，因此对于SVG中的每个空格，您可以将大小减小2个字节。我实际上必须编码什么字符？

Answer 1

通过一个快速脚本来跳过每个应进行URL编码的字符（! \"#$%&'(),:;<=>?[\]^``{|}~）和Browserstack屏幕截图的编码，似乎最低的公分母（IE）仅需要"'#%<>[]^``{|}转义（当数据URI用引号引起来时）

Windows 7，IE 9

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

• 没有编码（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+');
  

• URL编码的默认值（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');