Bermigrasi dari URL data di elemen SVG

Kokatsu Jun
Jun Kokatsu
Twitter

Spesifikasi SVG baru-baru ini diperbarui guna menghapus dukungan untuk URL data: dalam elemen <use> SVG. Perubahan ini meningkatkan keamanan platform Web serta kompatibilitas antar-browser karena Webkit tidak mendukung URL data: di elemen <use> SVG.

Alasan penghapusan

Elemen <use> SVG dapat mengambil gambar SVG eksternal dan meng-clone-nya ke dokumen saat ini. Ini adalah kemampuan yang kuat, sehingga terbatas untuk gambar SVG asal yang sama. Namun, URL data: diperlakukan sebagai resource origin yang sama yang menyebabkan beberapa bug keamanan, seperti pengabaian Jenis Tepercaya dan Sanitizer API. Bug keamanan ini mengarah pada diskusi tentang pendekatan terbaik untuk mengatasinya. Dan kami mencapai konsensus di antara vendor browser (dari Mozilla dan Apple) bahwa cara terbaik untuk ke depan adalah dengan menghapus dukungan untuk URL data: di elemen <use> SVG.

Untuk situs yang menggunakan URL data: dalam elemen <use> SVG, ada beberapa alternatif.

Menggunakan gambar SVG origin yang sama

Anda dapat memuat gambar SVG asal yang sama menggunakan elemen <use>.

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

Menggunakan gambar SVG inline

Anda dapat mereferensikan gambar SVG inline menggunakan elemen <use>.

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

Menggunakan gambar SVG dengan blob: URL

Jika tidak memiliki kontrol atas HTML halaman atau resource origin yang sama (seperti library JavaScript), Anda dapat memuat gambar SVG menggunakan URL blob: dalam elemen <use>.

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

Contoh langsung

Anda dapat menemukan contoh langsung untuk alternatif ini di GitHub.