مشخصات SVG اخیراً برای حذف پشتیبانی از data: URL ها در عنصر SVG <use> . این امر امنیت پلت فرم وب و همچنین سازگاری بین مرورگرها را بهبود می بخشد زیرا Webkit data: URL ها در عنصر SVG <use> .
دلیل حذف
عنصر <use> SVG می تواند تصاویر SVG خارجی را واکشی کند و آن را در سند فعلی کلون کند. این یک قابلیت قدرتمند است و به همین دلیل به تصاویر SVG با همان منبع محدود می شود. با این حال، data: نشانی‌های وب به‌عنوان منابعی با منشأ مشابه در نظر گرفته می‌شوند که باعث ایجاد چندین باگ امنیتی، مانند دور زدن Trusted Types و Sanitizer API می‌شوند. این اشکالات امنیتی منجر به بحث در مورد بهترین رویکرد برای حل آنها شد. و ما در میان فروشندگان مرورگر (از موزیلا و اپل ) به اجماع رسیدیم که بهترین راه، حذف پشتیبانی از data: URL ها در عنصر <use> SVG.
برای سایت‌هایی که data: آدرس‌های اینترنتی در عنصر SVG <use> ، چندین جایگزین وجود دارد.
از تصاویر 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 با URL های blob: استفاده کنید
اگر کنترلی روی HTML یا منابع یک صفحه (مانند کتابخانه های جاوا اسکریپت) ندارید، می توانید تصاویر SVG را با استفاده از blob: URL ها در عنصر <use> بارگیری کنید.
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 پیدا کنید.