Bermigrasi dari URL data di elemen SVG

Jun Kokatsu

Spesifikasi SVG baru-baru ini diperbarui untuk menghapus dukungan URL data: di 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 dalam dokumen saat ini. Ini adalah kemampuan yang canggih, sehingga dibatasi untuk gambar SVG dengan origin yang sama. Namun, URL data: diperlakukan sebagai resource dengan origin yang sama yang menyebabkan beberapa bug keamanan, seperti pengabaian Trusted Types dan Sanitizer API. Bug keamanan ini memicu diskusi tentang pendekatan terbaik untuk mengatasinya. Kami juga mencapai konsensus di antara vendor browser (dari Mozilla dan Apple) bahwa cara terbaik untuk melanjutkan adalah menghapus dukungan untuk URL data: di elemen <use> SVG.

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

Menggunakan gambar SVG dengan origin yang sama

Anda dapat memuat gambar SVG dengan origin 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 URL blob:

Jika tidak memiliki kontrol atas HTML halaman atau resource dengan origin yang sama (seperti library JavaScript), Anda dapat memuat gambar SVG menggunakan URL blob: di 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 live

Anda dapat menemukan contoh langsung untuk alternatif ini di GitHub.