SVG एलिमेंट में डेटा यूआरएल से माइग्रेट करना

जुन कोकात्सु
जून कोकात्सु
Twitter

SVG <use> एलिमेंट में data: यूआरएल इस्तेमाल करने की सुविधा हटाने के लिए, SVG स्पेसिफ़िकेशन को हाल ही में अपडेट किया गया था. इससे वेब प्लैटफ़ॉर्म की सुरक्षा बेहतर होती है. साथ ही, यह अलग-अलग ब्राउज़र के साथ भी काम करती है. ऐसा इसलिए, क्योंकि 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>

ब्लॉब के साथ SVG इमेज का इस्तेमाल करें: यूआरएल

अगर आपके पास किसी पेज के एचटीएमएल या एक जैसे ऑरिजिन वाले रिसॉर्स (जैसे कि 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 पर इन विकल्पों के लाइव उदाहरण मिल सकते हैं.