透過 DataURI 產生 SVG 圖片

※ 注意,這部份的技術疑似到「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 內容結構

SVG 1.1

<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>

其他參考


工具

Img2DataURI

  • 這是由男丁格爾寫的轉換程式,可以雙向轉換 DataURI 與圖檔,可以透過得到的 DataURI 組合成 SVG 格式圖檔。
    • 接受輸入圖片格式:JPG、GIF、PNG、BMP
    • Data URI 產生圖片:皆以 PNG 格式產生,並會直接產生在「主程式」的所在資料夾內。(無法選擇)


線上轉換

上傳即時轉換

直接換轉成 SVG 格式
圖片轉成 DataURI 的工具網站
  1. Image To DataURI Convertor - webSemantics
    • 允許轉換「PNG、JPG、GIF」,上傳檔案容量限制「約32KB(32768 Bytes)」。
      他下面有副「CSS 寫法」。
  2. The data: URI kitchen

連線即時轉換

※ 「連線」指可以將任何網路上可以及時連接取得的檔案,提供網址給他。就能直接分析獲取檔案的「DataURI」。

  這部份,也適合用來取得檔案較大而無法使用上傳解析的情況。
轉成 DataURI 的工具網站
  1. [JavaScript] dataスキームURI生成(画像データのBase64変換)
    • 有副原圖預覽功能,以及日本語說明。
  2. Binary / Image File to Base64 Encoder Translator
    • 頁面下方有附帶幾個比較常用的使用方式,可以做不錯的參考。


特殊應用

  • 拿來搭配 QR Code,可以編碼 → 圖 → 編碼 → 圖互相循環,以圖傳圖又傳圖XDDDD


特殊關係(?)

SVG(DataURI(base64))!?(括號代表包含)

  1. SVG 可用純文字的模式開啟,裡面的內容包含「DataURI」。
  2. 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>
  • 像上面這樣,平常我們引入某個 *.js 文件網址就需要注意標籤內後面的「charset='utf-8'」了。但這屬於網頁呈現方面的。
  • 而這邊說的重點是
    data:text/javascript;charset=UTF-8;base64,
    因為 Data URIs 本身就視為一個檔案,如果不指定要如何讀取其本文文件的編碼,這會影響到讀取出來的文字出現亂碼或其他不正常的介面文字現象。


リンク

W3C

特殊參考

その他



以下為 atwiki.jp 平台自動加入的其他廠商贊助廣告

タグ:

Data URI
最終更新:2011年11月14日 16:37
添付ファイル