ডেটার জন্য সমর্থন সরাতে SVG স্পেক সম্প্রতি আপডেট করা হয়েছে data: SVG <use> উপাদানে URLs। এটি ওয়েব প্ল্যাটফর্মের নিরাপত্তার পাশাপাশি ব্রাউজারগুলির মধ্যে সামঞ্জস্যতা উন্নত করে কারণ ওয়েবকিট data: SVG <use> উপাদানে URLs।
অপসারণের কারণ
SVG <use> উপাদানটি বাহ্যিক SVG ছবি আনতে পারে এবং বর্তমান নথিতে ক্লোন করতে পারে। এটি একটি শক্তিশালী ক্ষমতা, এবং তাই এটি একই-অরিজিন SVG চিত্রগুলিতে সীমাবদ্ধ৷ যাইহোক, data: ইউআরএলগুলিকে একই-উৎস সম্পদ হিসাবে বিবেচনা করা হয় যা বেশ কয়েকটি নিরাপত্তা বাগ সৃষ্টি করে, যেমন বিশ্বস্ত প্রকার এবং স্যানিটাইজার API এর বাইপাস। এই নিরাপত্তা বাগগুলি সমাধান করার জন্য সর্বোত্তম পদ্ধতির আলোচনার দিকে পরিচালিত করে৷ এবং আমরা ব্রাউজার বিক্রেতাদের মধ্যে ( মোজিলা এবং অ্যাপল থেকে) একটি ঐকমত্যে পৌঁছেছি যে এগিয়ে যাওয়ার সর্বোত্তম উপায় হ'ল data: SVG <use> উপাদানের URLs।
data: SVG <use> উপাদানে URL, বিভিন্ন বিকল্প রয়েছে।
একই-অরিজিন 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>
ব্লব: URL এর সাথে SVG ছবি ব্যবহার করুন
আপনার যদি কোনো পৃষ্ঠার HTML বা একই-উৎস সম্পদের উপর নিয়ন্ত্রণ না থাকে (যেমন জাভাস্ক্রিপ্ট লাইব্রেরি), আপনি blob: <use> উপাদানে URLs।
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 এ এই বিকল্পগুলির জন্য লাইভ উদাহরণ খুঁজে পেতে পারেন।