كيفية دمج عدة صور SVG في ملف واحد لتقليل عدد طلبات HTTP عبر الشبكة وتسريع تحميل الصفحة

إن SVG هي عبارة عن ملفات صور يتم ترميزها باستخدام لغة XML أي تختلف عن أنواع الصور الأخرى.

ما المشكلة في وجود عدد كبير من الصور؟ هو أن كل صورة تتطلب اتصال HTTP فريد لتحميل ملفها (موارد)

الحل هو تجميع بيانات جميع الصور ضمن ملف XML واحد، مما يقلل من عدد اتصالات HTTP ويحفظ اتصال الشبكة ويسرع تحميل الصفحة..

لاحظ الصورة التالية:

• الجزء الأيمن يتم تحميل صورة واحدة (مجمعة)
• الجزء الأيسر يتم تحميل كل ملف صورة بشكل ملف منفصل

لاحظ وجود تأخير في انتهاء تحميل الصفحة عند استخدام العديد من الصور.

أحد الحلول هو استخدام أدوات تعمل على تجميع بيانات الصور في ملف واحد ثم استخلاص بيانات كل صورة حسب مكان استخدامها..

مثلاً أداة: Climenty / svg-join التي يمكن تحميلها من npm

ستقوم الأداة بتوليد ملفين الأول هو تجميع ملفات SVG

"svg-bundle.svg":

<svg ...>
  <symbol id="svg1" ...>
  <symbol id="svg2" ...>
</svg>
    
كل symbol يمثل SVG file.

وملف تنسيقات

"svg-bundle.css":

.svg_svg1,
.svg_svg2 {
  width: 20px; // for example
  height: 20px;
}

طريقة الاستخدام في HTML

head
تضمين ملف التنسيق
<link rel="stylesheet" type="text/css" href="svg-bundle.css" />


body
تضمين الصور بشكل منفصل في الصفحة
<svg class="svg_svg1"><use xlink:href="svg-bundle.svg#svg1"></svg>
<svg class="svg_svg2"><use xlink:href="svg-bundle.svg#svg2"></svg>

لاحظ أن استدعاء صورة منفصلة يتم من خلال xlink ونضع # في نهاية ملف الصورة لتحديد الصورة الجزئية

• مثال: svg-bundle.svg#svg1

التعليمات البرمجية موجودة في توثيق المكتبة