我需要对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') 然而，通过一些调整，我发现在IE CSS数据URI中实际上不需要旧的%20来表示空格，因此对于SVG中的每个空格，您可以将大小减少2个字节。哪些字符实际上需要编码？

- Nick T

Answer 1

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

Windows 7，IE 9

许多被最小化的SVG文件最终比base64编码还要小，并且在各种浏览器中的兼容性相同

• No encoding (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 encoded (URI: 386 B)

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

• URL encoded default (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');
  

• URL encoded only "#%<>[]^``{|} (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');
  

- Nick T