بنية ملفات SVG وأهميتها في أداء الويب
تتكون ملفات الرسومات المتجهة القابلة للتمدد (SVG) من صيغة XML نصية تصف الأشكال والمسارات والألوان. وبخلاف صيغ الصور النقطية، تتيح هذه البنية البرمجية للمتصفحات رندرة الرسومات بدقة عالية عند أي مستوى تكبير. ومع ذلك، فإن البرامج التي تنشئ هذه الملفات غالبًا ما تضيف بيانات زائدة لا تؤثر على مظهر الرسم النهائي.
يؤثر حجم ملف SVG بشكل مباشر على سرعة تحميل صفحات الويب وتجربة المستخدم. عندما تُستخدم ملفات SVG كرموز أو رسوم توضيحية مضمنة (Inline SVG) داخل مستند HTML، فإن أي بايت إضافي غير ضروري يزيد من حجم الصفحة الإجمالي ويبطئ من عملية تحليل المتصفح للرمز. يساعد تقليل حجم هذه الملفات في تحسين أداء الموقع وتقليل استهلاك البيانات.
العناصر التي يمكن إزالتها بأمان من رمز SVG
يحتوي رمز SVG الناتج عن برامج التصميم على عناصر برمجية متعددة يمكن التخلص منها دون التأثير على جودة الرسم أو مظهره. تتبع هذه الأداة قواعد تنظيف آمنة ومحددة تشمل ما يلي:
- التعليقات والبيانات الوصفية: إزالة التعليقات البرمجية وبيانات الميتا (Metadata) التي تضيفها برامج التصميم.
- مساحات الأسماء الخاصة بالمحرر: التخلص من مساحات الأسماء (Namespaces) غير المستخدمة وتلك التي تخص برامج تحرير الرسومات.
- التباعد الزائد: إزالة المسافات والتباعد الإضافي بين السمات (Attributes) داخل الوسوم.
- تبسيط الألوان: استبدال قيم الألوان بصيغ مكافئة تؤدي نفس الغرض البصري ولكن بعدد أحرف أقل.
في المقابل، يحافظ المحسّن تمامًا على العناصر الهيكلية الأساسية لضمان سلامة التصميم. حيث تظل السمة viewBox والمعرّفات (IDs) والتسميات والهندسة الأصلية دون أي تغيير. كما يتجنب المحسّن إعادة كتابة المسارات، وتغيير أسماء المعرّفات، وإزالة viewBox، وتقريب الدقة لتفادي أي تشويه في الرسم.
معالجة البيانات والخصوصية
تتم عملية تحسين رمز SVG بالكامل داخل متصفح الويب الخاص بك. لا يتم رفع أي جزء من الرمز أو البيانات إلى خوادم BroBroGo. تضمن آلية المعالجة المحلية هذه بقاء بياناتك ورموزك البرمجية داخل جهازك دون أي نقل خارجي عبر شبكة الإنترنت.
قيود المدخلات والتعامل مع الأخطاء
تتطلب الأداة معايير محددة لضمان معالجة برمجية آمنة وسريعة. يتم حظر ملفات SVG التي تتضمن تعريف نوع مستند (Document Type) أو كيانات مخصصة (Custom Entities) لأسباب تتعلق بالأمان البرمجي.
عند حدوث أي مشكلة أثناء المعالجة، تعرض الأداة رسائل خطأ واضحة تحدد سبب المشكلة:
- ألصق رمز SVG أولًا.: تظهر إذا تم تفعيل التحسين والحقل فارغ.
- لم يُعثر على عنصر <svg>.: تظهر إذا كان النص المدخل لا يحتوي على عنصر SVG.
- يستخدم SVG هذا نوع مستند أو كيانًا مخصصًا. أزله قبل التحسين.: تظهر عند اكتشاف إعلانات نوع المستند أو الكيانات المخصصة المحظورة.
- SVG هذا كبير جدًا لهذه الأداة. اجعله أقل من
{max}حرفًا.: تظهر إذا تجاوز طول الرمز الحد الأقصى المسموح به من الأحرف. - استغرق ذلك وقتًا طويلًا فتوقّف — جرّب SVG أصغر.: تظهر إذا استغرقت عملية التحسين أكثر من 15 ثانية.
- تم التحسين. لم ينخفض الحجم باستخدام مجموعة التنظيف الآمن.: تظهر إذا كان الرمز محسنًا بالفعل ولم تنجح عملية التنظيف في تقليل أي بايت إضافي.
ملاحظة: يؤدي مسح حقل الإدخال أو تغيير المحتوى أثناء المعالجة إلى إنهاء عملية التحسين الجارية فورًا.
كيفية استخدام الأداة وقراءة النتائج
لاستخدام المحسّن، اتبع الخطوات التالية:
- ألصق رمز SVG المضمن في حقل الإدخال الذي يحمل العنوان إدخال SVG.
- انقر على زر تحسين لبدء المعالجة.
- بعد اكتمال العملية بنجاح، ستظهر رسالة النتيجة في الأعلى بصيغة: تم التحسين — أصغر بنسبة
{pct}% (تم توفير{saved}). - يمكنك مقارنة حجم البيانات من خلال جدول الإحصاءات الذي يعرض القيم التالية بالبايت:
- الأصلي: حجم الرمز قبل المعالجة.
- الناتج: حجم الرمز بعد التحسين.
- المقدار الموفَّر: حجم المساحة التي تم تقليصها.
- استخدم زر تنزيل لحفظ الملف الجديد، أو انسخ الرمز مباشرة لاستخدامه في مشروعك.
الأسئلة الشائعة
ما الذي يزيله؟
يزيل التعليقات والبيانات الوصفية ومساحات أسماء المحرر والتباعد الزائد في السمات ومساحات الأسماء غير المستخدمة، ويستبدل الألوان بصيغ مكافئة أقصر. ويحافظ على viewBox والمعرّفات والتسميات والهندسة دون تغيير.
هل يمكنه تحسين كل ملفات SVG؟
يعالج رمز SVG المضمّن العادي. تُحظر ملفات SVG التي تتضمن تعريف نوع مستند أو كيانات مخصصة لأن ذلك قد يجعل التحليل غير آمن. أزل هذه التعريفات وحاول مجددًا.
هل سيغيّر مظهر الرسم؟
يتجنب المحسّن إعادة كتابة المسارات، وتغيير أسماء المعرّفات، وإزالة viewBox، وتقريب الدقة. إذا كان SVG يعتمد على التعليقات أو البيانات الوصفية ضمن سير عمل التصميم، فاحتفظ بنسخة من الأصل.