關於Data URLs svg圖片顯示出錯和瀏覽器URL hash #

在使用生成的svg圖做爲<img>標籤是src值時，發現有部分瀏覽器顯示異常，因此這裏記錄下

參考連接

Data URLs
http://www.faqs.org/rfcs/rfc2397.html
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/data_URIs
URL hash
http://www.ruanyifeng.com/blog/2011/03/url_hash.html
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/hash

在<img src="Data URLs">中，Data URLs格式與顯示狀況以下：

//1. 部分瀏覽器不能正常顯示
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect fill="#795548" x="0" y="0" width="100%" height="100%"></rect><text fill="#FFF" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="16" font-family="Verdana, Geneva, sans-serif">jack</text></svg>

//2. 採用base64編碼svg，正常顯示
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PHJlY3QgZmlsbD0iIzc5NTU0OCIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PC9yZWN0Pjx0ZXh0IGZpbGw9IiNGRkYiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBhbGlnbm1lbnQtYmFzZWxpbmU9ImNlbnRyYWwiIGZvbnQtc2l6ZT0iMTYiIGZvbnQtZmFtaWx5PSJWZXJkYW5hLCBHZW5ldmEsIHNhbnMtc2VyaWYiPmphY2s8L3RleHQ+PC9zdmc+

//3. 採用%23轉義#，正常顯示
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect fill="%23795548" x="0" y="0" width="100%" height="100%"></rect><text fill="%23FFF" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="16" font-family="Verdana, Geneva, sans-serif">jack</text></svg>

//4. 採用rgb代替hex color，正常顯示
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect fill="rgb(121,85,72)" x="0" y="0" width="100%" height="100%"></rect><text fill="rgb(255,255,255)" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="16" font-family="Verdana, Geneva, sans-serif">jack</text></svg>

上面給出的Data URLs中第一個與其餘的不一樣之處就是包含了URL的敏感字符#，其被做爲hash使用，用於瀏覽器網頁內部的網頁位置指定標識符，#後面出現的任何字符，都會被瀏覽器解讀爲位置標識符。

這裏我用以上連接直接使用瀏覽器訪問，73版谷歌瀏覽器和66版火狐瀏覽器對於第一個Data URLs給出的結果都是解析異常，這裏個人猜想（意淫）就是這種Data URLs實際上是瀏覽器內部識別了URL標識，其又充當了一臺服務器，對當前Data URLs進行解析，以後內部直接給出數據。而它們在處理data:image/svg+xml時將#後面的字符串當作爲位置標識符，沒有將#後數據提交至瀏覽器內部解析器（我認爲的模擬服務器）中，因此就出現了數據丟失解析異常。

以上分析純屬我的猜想。反正這裏須要注意的就是，採用Data URLs時有可能出現URL特殊字符，最好可以對其進行編碼，或者轉義。