مولد ورقة سبرايت SVG

ورقة سبرايت SVG هي ملف SVG واحد يحتوي على أيقونات متعددة معرفة كعناصر رمز. بدلاً من تحميل 20 ملف SVG منفصل (20 طلب HTTP)، تقوم بتحميل ملف سبرايت واحد والإشارة إلى الأيقونات الفردية باستخدام عنصر الاستخدام. هذا يقلل من طلبات HTTP، ويحسن أداء تحميل الصفحة، ويسهل إدارة الأيقونات. كل رمز يحافظ على viewBox الخاص به بحيث يتم عرض الأيقونات بالنسب الصحيحة. تعتبر أوراق السبرايت ذات قيمة خاصة للمواقع التي تحتوي على العديد من الأيقونات عبر صفحات متعددة.

يستخدم المرجع الخارجي ملف SVG سبرايت منفصل ويشير إلى الأيقونات باستخدام href يشير إلى مسار الملف بالإضافة إلى معرف الرمز، مثل sprite.svg#icon-name. يقوم المتصفح بتحميل ملف السبرايت مرة واحدة ويقوم بتخزينه مؤقتًا. يقوم المرجع المضمن بتضمين ملف SVG السبرايت بالكامل مباشرة في صفحة HTML (عادةً ما يكون مخفيًا) ويشير إلى الأيقونات باستخدام علامة التصنيف والمعرف فقط. تعمل سبرايتات المضمنة فورًا بدون طلب ملف إضافي ولكنها تزيد من حجم HTML ولا يمكن تخزينها مؤقتًا بشكل منفصل. سبرايتات الخارجية أفضل للمواقع متعددة الصفحات بينما تعمل سبرايتات المضمنة بشكل جيد لتطبيقات الصفحة الواحدة.

تسمح لك إزالة سمات التعبئة والخط من أيقونات SVG بالتحكم في لونها بالكامل باستخدام CSS. هذا ضروري لأنظمة الأيقونات حيث تحتاج الأيقونات إلى تغيير اللون عند التحويم، أو في الوضع الداكن، أو عبر سياقات واجهة المستخدم المختلفة. بدون إزالة السمات الأصلية، قد لا تعمل تغييرات ألوان CSS لأن سمات SVG المضمنة لها خصوصية أعلى من قواعد CSS. يقوم خيار إزالة التعبئة/الخط في هذه الأداة بتجريد هذه السمات حتى تتمكن من تعيين الألوان باستخدام خصائص تعبئة وخط CSS أو الكلمة المفتاحية currentColor.

تقوم الأداة بتحويل كل اسم ملف إلى معرف رمز آمن للاستخدام في عناوين URL عن طريق إزالة امتداد .svg، والتحويل إلى أحرف صغيرة، واستبدال المسافات والأحرف الخاصة بشرطات، وإزالة الشرطات المتتالية. على سبيل المثال، My Icon (v2).svg يصبح my-icon-v2. يمكنك تحرير أي معرف تم إنشاؤه قبل الدمج. يجب أن يكون كل معرف فريدًا داخل ورقة السبرايت لأنه يعمل كمعرف مرجع عند استخدام الأيقونة. معرفات ذات معنى مثل icon-arrow-right أو icon-close تجعل الكود الخاص بك أكثر قابلية للقراءة من الأسماء العامة.