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

Jun Kokatsu
Jun Kokatsu
X

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

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

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

بالنسبة إلى المواقع الإلكترونية التي تستخدم data: عناوين URL في عنصر 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.