الانتقال بعيدًا عن عناوين URL للبيانات في عنصر SVG

Jun Kokatsu
Jun Kokatsu
X

تم تعديل مواصفات SVG مؤخرًا لإزالة إمكانية استخدام عناوين URL التي تبدأ بمخطّط data: في عنصر SVG <use>. ويؤدي ذلك إلى تحسين أمان النظام الأساسي للويب وكذلك تحسين التوافق بين المتصفحات، لأنّ Webkit لا يتيح استخدام عناوين URL data: في عنصر <use> SVG (رسومات موجّهة يمكن تغيير حجمها).

سبب إزالة المحتوى

يمكن لعنصر SVG <use> جلب صور SVG خارجية واستنساخها في المستند الحالي. وهذه ميزة قوية، وبالتالي تقتصر على صور الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) المصدر نفسه. ومع ذلك، يتم التعامل مع عناوين URL التي تنتهي بـ data: على أنّها موارد من المصدر نفسه، ما أدّى إلى ظهور العديد من أخطاء الأمان، مثل عمليات التحايل على الأنواع الموثوق بها وSanitizer API. أدّت أخطاء الأمان هذه إلى مناقشة أفضل نهج لحلّها. لقد توصّلنا إلى اتفاق بين مورّدي المتصفّحات (من Mozilla وApple) بأنّ أفضل طريقة للمضي قدمًا هي إزالة إمكانية استخدام عناوين URL الخاصة بـ data: في عنصر <use> للرسومات الموجّهة التي يمكن تغيير حجمها (SVG).

تتوفّر عدة بدائل للمواقع الإلكترونية التي تستخدم عناوين URL بتنسيق data: في عنصر <use> بتنسيق SVG.

استخدام صور 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.