從 SVG 元素中的資料網址遷移

Jun Kokatsu
Jun Kokatsu
X

可擴充向量圖形規格 (SVG) 規格最近更新，已停止支援 SVG <use> 元素中的 data: 網址。這項功能可提升網路平台的安全性，以及瀏覽器之間的相容性，因為 Webkit 不支援 SVG <use> 元素中的 data: 網址。

移除原因

SVG <use> 元素可以擷取外部 SVG 圖片，並複製到目前的文件中。這項功能非常強大，因此只限於同源 SVG 圖片。不過，data: 網址會視為同源資源，這會導致多個安全性錯誤，例如繞過信任類型和Sanitizer API。這些安全性錯誤導致我們討論解決這些問題的最佳方法。我們與瀏覽器供應商 (Mozilla 和 Apple) 達成共識，認為最佳做法是移除 SVG <use> 元素中 data: 網址的支援。

如果網站是在 SVG <use> 元素中使用 data: 網址，可以採用下列幾種替代方式。

使用同源 SVG 圖片

您可以使用 <use> 元素載入相同來源的 SVG 圖片。

<div class="icon">
  <svg width="1em" height="1em">
    <use xlink:href="svgicons.svg#user-icon"></use>
  </svg>
</div>

使用內嵌 SVG 圖片

您可以使用 <use> 元素參照內嵌 SVG 圖片。

<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="user-icon" viewBox="0 0 32 32">
      <path d="M25.333 9.335c0 5.153-4.179 9.333-9.333 9.333s-9.333-4.18-9.333-9.333c0-5.156 4.179-9.335 9.333-9.335s9.333 4.179 9.333 9.335zM23.203 18.908c-2.008 1.516-4.499 2.427-7.203 2.427-2.707 0-5.199-0.913-7.209-2.429-5.429 2.391-8.791 9.835-8.791 13.095h32c0-3.231-3.467-10.675-8.797-13.092z">
    </symbol>
    <!-- And potentially many more icons -->
  </defs>
</svg>

<div class="icon">
  <svg width="1em" height="1em">
    <use xlink:href="#user-icon"></use>
  </svg>
</div>

使用含有 blob: 網址的可擴充向量圖形圖片

如果您無法控制網頁的 HTML 或同源資源 (例如 JavaScript 程式庫)，您可以使用 <use> 元素中的 blob: 網址載入 SVG 圖片。

const svg_content = `<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="user-icon" viewBox="0 0 32 32">
        <path d="M25.333 9.335c0 5.153-4.179 9.333-9.333 9.333s-9.333-4.18-9.333-9.333c0-5.156 4.179-9.335 9.333-9.335s9.333 4.179 9.333 9.335zM23.203 18.908c-2.008 1.516-4.499 2.427-7.203 2.427-2.707 0-5.199-0.913-7.209-2.429-5.429 2.391-8.791 9.835-8.791 13.095h32c0-3.231-3.467-10.675-8.797-13.092z">
      </symbol>
      <!-- And potentially many more icons -->
    </defs>
  </svg>`;
const blob = new Blob([svg_content], {type: 'image/svg+xml'});
const url = URL.createObjectURL(blob);
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttribute('href', url + '#user-icon');
svg.appendChild(use);
document.body.appendChild(svg);

實例

您可以在 GitHub 上找到這些替代方案的實際範例。