SVG öğesindeki veri URL'lerinden taşı

Haziran Kokatsu
Jun Kokatsu
Twitter

SVG spesifikasyonu, SVG <use> öğesinde data: URL'lere yönelik desteği kaldırmak için kısa süre önce güncellendi. Webkit, SVG <use> öğesinde data: URL'lerini desteklemediğinden bu, Web platformunun güvenliğini ve tarayıcılar arasındaki uyumluluğu artırır.

Kaldırma nedeni

SVG <use> öğesi, harici SVG resimlerini getirip geçerli dokümana klonlayabilir. Bu güçlü bir özelliktir ve bu nedenle aynı kaynaklı SVG resimleriyle sınırlıdır. Bununla birlikte, data: URL'leri aynı kaynak kaynakları olarak ele alınır. Bu durum, Trusted Types ve Sanitizer API'nin atlamaları gibi çeşitli güvenlik hatalarına neden olur. Bu güvenlik hataları, bunları çözmek için en iyi yaklaşımın tartışılmasını sağladı. Tarayıcı tedarikçileri (Mozilla ve Apple'dan) arasında, en iyi yolun SVG <use> öğesinde data: URL'ler için sağladığı desteği kaldırmak olduğu konusunda bir fikir birliğine vardık.

SVG <use> öğesinde data: URL'leri kullanan siteler için birkaç alternatif vardır.

Aynı kaynaklı SVG resimlerini kullan

<use> öğesini kullanarak aynı kaynaklı SVG resimlerini yükleyebilirsiniz.

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

Satır içi SVG resimleri kullanma

<use> öğesini kullanarak satır içi SVG resimlerine başvurabilirsiniz.

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

SVG resimlerini blob ile kullanma: URL'ler

Bir sayfanın HTML'si veya aynı kaynak kaynakları (JavaScript kitaplıkları gibi) üzerinde kontrolünüz yoksa <use> öğesindeki blob: URL'lerini kullanarak SVG resimlerini yükleyebilirsiniz.

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

Canlı örnekler

GitHub'da bu alternatifler için canlı örnekler bulabilirsiniz.