SVG स्पेसिफ़िकेशन को हाल ही में अपडेट किया गया था, ताकि SVG <use> एलिमेंट में data: यूआरएल के लिए सहायता हटाई जा सके.
इससे वेब प्लैटफ़ॉर्म की सुरक्षा बेहतर होती है. साथ ही, ब्राउज़र के बीच काम करने की सुविधा भी बेहतर होती है, क्योंकि Webkit, SVG <use> एलिमेंट में data: यूआरएल के साथ काम नहीं करता.
हटाए जाने की वजह
SVG <use> एलिमेंट, बाहरी SVG इमेज को फ़ेच कर सकता है और उन्हें मौजूदा दस्तावेज़ में क्लोन कर सकता है. यह एक बेहतरीन सुविधा है. इसलिए, इसे एक ही ऑरिजिन वाली SVG इमेज के लिए ही इस्तेमाल किया जा सकता है.
हालांकि, data: यूआरएल को एक ही ऑरिजिन के रिसॉर्स के तौर पर माना जाता है. इस वजह से, सुरक्षा से जुड़े कई गड़बड़ियां होती हैं. जैसे, भरोसेमंद टाइप और Sanitizer API को बायपास करना.
सुरक्षा से जुड़े इन गड़बड़ियों को ठीक करने के लिए, सबसे सही तरीके के बारे में चर्चा की गई. हमने ब्राउज़र वेंडर (Mozilla और Apple) के साथ मिलकर यह फ़ैसला लिया है कि SVG <use> एलिमेंट में data: यूआरएल के लिए सहायता हटाना सबसे सही तरीका है.
SVG <use> एलिमेंट में data: यूआरएल का इस्तेमाल करने वाली साइटों के लिए, कई विकल्प उपलब्ध हैं.
सेम-ऑरिजिन वाली SVG इमेज का इस्तेमाल करना
<use> एलिमेंट का इस्तेमाल करके, एक ही ऑरिजिन वाली एसवीजी इमेज लोड की जा सकती हैं.
<div class="icon">
<svg width="1em" height="1em">
<use xlink:href="svgicons.svg#user-icon"></use>
</svg>
</div>
इनलाइन एसवीजी इमेज का इस्तेमाल करना
<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: यूआरएल का इस्तेमाल करके एसवीजी इमेज लोड की जा सकती हैं.
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);