※ 注意,這部份的技術疑似到「IE8」才支援。(其他先進瀏覽器大部分都有支援,無需特別擔心。)
詳細可參考下方的瀏覽器支援說明。
另外,本頁中的所有敘述都是個人觀點與用法。不保證在任何環境都有效,僅供參考。請自行測試後,試出最適合自己或該環境的方法。
緣由
- 由於 SVG 圖片格式實際上是由純文字組成,其結構中本身就允許使用「DataURI」來呈現。(但這只是其中一種方法,也有其他方法不透過 DataURI。)
- 所以,透過專門產生「DataURI」的軟體取得「DataURI」,在加工一下純文字格式結構,也可以產生 SVG 格式圖檔。
-
- 實際上 SVG 也是 XML 的其中一種屬於本文檔案,所以可以用純文字編輯。
- 釐清一點,SVG 是允許透過 href (類似普通超連結的用法)來使用 Data URIs 的檔案資料格式。並非 SVG 全都是這樣做。
- 另外,Data URIs 裡面包含「透過二進制編碼分析取得檔案的 base64 code、MIME type」等敘述。
Data URIs 只是一種檔案保存的方法、格式之ㄧ,應該與 SVG 分開來看。
SVG 用純文字編輯器開啟
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="圖寬px" height="圖高px"
viewBox="0 0 174 174" preserveAspectRatio="none">
<g>
<image width="圖寬" height="圖高" xlink:href="這裡放產生的 DataURI 代碼"/>
</g>
</svg>
其他參考
工具
- 這是由男丁格爾寫的轉換程式,可以雙向轉換 DataURI 與圖檔,可以透過得到的 DataURI 組合成 SVG 格式圖檔。
- 接受輸入圖片格式:JPG、GIF、PNG、BMP
- 由 Data URI 產生圖片:皆以 PNG 格式產生,並會直接產生在「主程式」的所在資料夾內。(無法選擇)
線上轉換
上傳即時轉換
直接換轉成 SVG 格式
圖片轉成 DataURI 的工具網站
- Image To DataURI Convertor - webSemantics
- 允許轉換「PNG、JPG、GIF」,上傳檔案容量限制「約32KB(32768 Bytes)」。
他下面有副「CSS 寫法」。
- The data: URI kitchen
連線即時轉換
※ 「連線」指可以將任何網路上可以及時連接取得的檔案,提供網址給他。就能直接分析獲取檔案的「DataURI」。
這部份,也適合用來取得檔案較大而無法使用上傳解析的情況。
轉成 DataURI 的工具網站
- [JavaScript] dataスキームURI生成(画像データのBase64変換)
- Binary / Image File to Base64 Encoder Translator
- 頁面下方有附帶幾個比較常用的使用方式,可以做不錯的參考。
特殊應用
- 拿來搭配 QR Code,可以編碼 → 圖 → 編碼 → 圖互相循環,以圖傳圖又傳圖XDDDD
特殊關係(?)
SVG(DataURI(base64))!?(括號代表包含)
- SVG 可用純文字的模式開啟,裡面的內容包含「DataURI」。
- DataURI 裡面記述了「檔案類型」、「base64」。
瀏覽器支援(Browser support)
※ 相關資訊情報來源:這裡、Data URIs explained 的 Browser support
- Chrome:所有版本都支援
- Safari:所有版本都支援
- Firefox 2 以上才有
- Opera 7.2 以上才支援:其中 DataURI 必須少於 4100 個字元,超過無法解析。
- Internet Explorer 8 以上才支援:其中 DataURI 的解析支援度,最大只能解析 32K Bytes。
其他本文格式使用 Data URI 需給指定編碼(2011/Nov 14th+)
舉例
data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
解說
- 其中的「charset=UTF-8;」就是負責讓讀取的時候使用「UTF-8」下來解讀。
用途
- 比方說某個以UTF-8 編碼寫的 JavaScript *.js 文件被編碼成 Base64 code 準備以 Data URIs 的方式來呈現。
但文件中有中文、日文或其他語言文字。如果沒有指定讀取時的編碼,那讀進來的時候就像普通網頁選擇錯誤語言編碼時的亂碼一樣。
<script src='data:text/javascript;charset=UTF-8;base64,LyoKCUphdmFTY3JpcHQgRW5jcnlwdGl.....(你自己*.js檔案轉出來的 base64 code)' type='text/javascript' charset='utf-8'></script>
リンク
W3C
特殊參考
その他
以下為 atwiki.jp 平台自動加入的其他廠商贊助廣告
最終更新:2011年11月14日 16:37