SVG öğesindeki veri URL'lerinden taşı

Jun Kokatsu
Jun Kokatsu
X

SVG özelliği, SVG <use> öğesinde data: URL desteğini kaldırmak için yakın zamanda güncellenmiştir. Webkit, SVG <use> öğesindeki 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 mevcut dokümana kopyalayabilir. Bu güçlü bir özellik olduğundan aynı kaynaktan SVG resimleriyle sınırlıdır. Ancak data: URL'leri, aynı kaynak kaynaklar olarak değerlendirilir. Bu durum, Trusted Types ve Sanitizer API'nin atlanması gibi çeşitli güvenlik hatalarına neden olur. Bu güvenlik hataları, bunları çözmenin en iyi yaklaşımı hakkında bir tartışmaya yol açtı. Tarayıcı tedarikçileri (Mozilla ve Apple) arasında, SVG <use> öğesindeki data: URL'leri için desteği kaldırmanın en iyi yol olduğu konusunda 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ı kaynaktan SVG resimleri 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 referans verebilirsiniz.

<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: URL'leriyle kullanma

Bir sayfanın HTML'si veya aynı kaynaktaki kaynakları (JavaScript kitaplıkları gibi) üzerinde kontrol sahibi değilseniz <use> öğesinde blob: URL'lerini kullanarak SVG resimleri 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

Bu alternatiflerle ilgili canlı örnekleri GitHub'da bulabilirsiniz.