網頁使用 SVG using-svg css-tricks

https://css-tricks.com/using-svg/

• 如同 img 使用： <img src="kiwi.svg" alt="Kiwi standing on oval">
  • 不能使用 css 控制 svg 內部元素
  • 需考慮如何 fallbacks
  • 如同 img tag，也可用 css background-image 引入 svg 圖片。
• "inline" SVG 標籤： <svg>...</svg>
  • 可以用 css 控制 svg 內部元素，可使用 svg 濾鏡
  • svg 編碼、數值...需要優化
  • 難緩存 code 多
  • 需考慮如何 fallbacks
• <object> 鏈接到一個 SVG 文件
  • <object type="image/svg+xml" data="kiwi.svg" class="logo"></object>
  • 可以用 CSS 控制 svg 內容
    • 需在 svg 元素中定義 <svg> <style> ... </style> </svg>，區塊內需有 css 宣告
  • 方便緩存
  • fallbacks：用 Modernizr 可以用 .no-svg .logo {...} 來做整個 <object> 的 fallbacks
  • Modernizr 是一套 JavaScript 函式庫，用來偵測瀏覽器是否支援 HTML5 與 CSS3 等規格。

• data URI 嵌入屬性

  • <img src="data:image/svg+xml;base64,[data]">
  • background: url("data:image/svg+xml;base64,[data]");
  • <object type="image/svg+xml" data="data:image/svg+xml;base64,[data]"> fallback </object>
    • SVG 中的 <style> 區塊，在 base64 編碼後，仍然有效！
  • data URI 不一定以 base64 編碼
    • 一種是串接「 XML 內容」，即後接 <svg> tag，如：data:image/svg+xml;utf8,<svg>...</svg>
    • 一種是串接「 Base64 編碼」，將<svg> 轉 Base64 如：data:image/svg+xml;base64,......
    • SVG 的原生格式比 base64 重複得多，將它壓縮 (gzip) 後使用更好。

  • e.g.

    • img src 內嵌 data URI
    • css 與 img src 內嵌 data URI

    <!-- base64 -->
    data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...
    
    <!-- UTF-8, not encoded -->
    data:image/svg+xml;charset=UTF-8,<svg ...> ... </svg>
    
    <!-- UTF-8, optimized 優化 encoding for compatibility 兼容性 -->
    data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://...'
    
    <!-- Fully URL encoded ASCII -->
    data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//...
    

Data URI：

資源連結路徑為嵌入的 Base64 編碼，可減少 html Request。

淺嚐 Data URI 好處壞處特性

• IE 不支援用 Data URI 串接來的 svg。
• base64 會增加資料量 (3 Bytes 變成 4 Bytes，外加 0-3 個填充字元)、失去可讀、可編輯性。
• 例子 SVG with Data URIs