تم تعديل مواصفات SVG مؤخرًا لإزالة إتاحة عناوين URL data: في عنصر <use> للرسومات الموجّهة التي يمكن تغيير حجمها (SVG).
يساعد ذلك في تحسين أمان النظام الأساسي للويب بالإضافة إلى تعزيز التوافق بين المتصفّحات، لأنّ Webkit لا يتيح عناوين URL data: في عنصر SVG <use>.
سبب إزالة المحتوى
يمكن لعنصر SVG <use> جلب صور SVG خارجية ونسخها إلى المستند الحالي. وهذه الإمكانية فعّالة، وبالتالي يقتصر استخدامها على صور SVG من المصدر نفسه.
ومع ذلك، يتم التعامل مع عناوين URL data: كموارد من المصدر نفسه تسببت في حدوث العديد من أخطاء الأمان، مثل عمليات تجاوز الأنواع الموثوق بها وواجهة برمجة تطبيقات Saanitizer.
أدت أخطاء الأمان هذه إلى مناقشة أفضل نهج لحلها. وقد توصلنا إلى توافق بين مورّدي المتصفّحات (من Mozilla وApple) بأنّ أفضل طريقة لذلك هي إلغاء التوافق مع data: عناوين URL في عنصر SVG <use>.
تتوفّر عدة بدائل للمواقع الإلكترونية التي تستخدم عناوين URL data: في عنصر SVG <use>.
استخدام صور SVG من المصدر نفسه
يمكنك تحميل صور SVG من المصدر نفسه باستخدام العنصر <use>.
<div class="icon">
<svg width="1em" height="1em">
<use xlink:href="svgicons.svg#user-icon"></use>
</svg>
</div>
استخدام صور SVG مضمَّنة
يمكنك الإشارة إلى صور SVG مضمَّنة باستخدام العنصر <use>.
<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 أو ذات المصدر نفسه للصفحة (مثل مكتبات JavaScript)، يمكنك تحميل صور SVG باستخدام عناوين URL الخاصة بـ blob: في العنصر <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.