متى أستخدم Vector؟
- الشعارات.
- الأيقونات.
- الرسوم التوضيحية البسيطة.
- الأشكال الهندسية.
- العناصر التي تحتاج أكثر من مقاس.
أما الصور الفوتوغرافية فتبقى أفضل بصيغ مثل WebP أو AVIF أو JPEG، لأن تحويل صورة مليئة بالتفاصيل إلى Vector ينتج ملفا معقدا بلا فائدة.
SVG هو الخيار الشائع للمواقع
SVG صيغة Vector يمكن للمتصفح عرضها مباشرة. ميزتها أنها تظل حادة على الشاشات عالية الدقة، ويمكن أن يكون حجمها صغيرا جدا عندما تكون الرسمة بسيطة.
كيف تنشئ رسمة ملونة؟
- ارسم الأشكال الأساسية في برنامج يدعم Vector مثل Illustrator أو Inkscape.
- استخدم طبقات وألوانا واضحة بدل تفاصيل دقيقة غير ضرورية.
- حوّل النص إلى مسارات فقط عند الحاجة.
- نظف المسارات والنقاط الزائدة.
- صدّر نسخة SVG للموقع ونسخة احتياطية من الملف الأصلي.
انتبه عند رفع SVG إلى ووردبريس
ملف SVG يحتوي على كود XML، لذلك لا تتعامل معه كصورة عادية تماما. ارفع ملفات من مصدر موثوق ونظفها من أي سكربت أو عناصر غير ضرورية.
الألوان داخل SVG
يمكن تثبيت اللون داخل الملف، أو استخدام currentColor في الأيقونات حتى تأخذ لون العنصر من CSS. هذا مفيد للأزرار والقوائم لأنه يمنع إنشاء نسخة جديدة من الأيقونة لكل لون.
ولو كان هدفك تحسين صور الموقع عموما، راجع تحسين الصور لنتائج Google والسرعة.
Vector وRaster: الفرق الذي يهمك
PNG وJPEG مبنيان على بكسلات. عند تكبيرهما أكثر من حجمها الأصلي تبدأ الحواف في الظهور. أما الفيكتور فيعاد رسمه رياضيا عند كل مقاس، لذلك يظل الشعار حادا على شاشة صغيرة ولوحة كبيرة.
تنظيف الملف قبل التصدير
الملف قد يبدو بسيطا لكنه يحتوي مئات النقاط غير الضرورية. قلل نقاط المسار، احذف الطبقات المخفية ونظف metadata التي لا تحتاجها. كل ذلك يصنع SVG أخف وأسهل في التعديل.
ViewBox مهم
في SVG يحدد viewBox مساحة الرسم ونظام الإحداثيات. لو كان خاطئا قد يظهر الرسم صغيرا أو مقصوصا. اجعله يحيط بالرسمة نفسها، ثم دع CSS يحدد العرض والارتفاع في الموقع.
الأيقونات داخل الواجهة
بدل رفع ملف منفصل لكل لون، يمكن استخدام SVG inline مع currentColor. عندها يتغير لون الأيقونة مع لون الرابط أو الزر، ويصبح الـ hover أسهل بدون صور إضافية.
متى لا أستخدم SVG؟
لو الرسمة معقدة جدا وبها آلاف المسارات، قد يصبح SVG أثقل من صورة عادية. الصور الفوتوغرافية والمشاهد الواقعية ليست مكانه. اختر الصيغة على حسب طبيعة المحتوى، لا لأنها تبدو أكثر تقنية.
الوصول
الأيقونة الزخرفية لا تحتاج وصفا يكرر النص بجوارها. أما الرسم الذي يحمل معلومة فيحتاج title أو وصفا مناسبا حسب طريقة دمجه. الهدف أن لا يخسر مستخدم قارئ الشاشة معنى مهما.
تصدير نسخة PNG عند الحاجة
بعض المنصات أو تطبيقات المشاركة لا تتعامل مع SVG. احتفظ بنسخة PNG بخلفية شفافة للشعار أو الأيقونة عند الحاجة. هذا لا يلغي ملف الفيكتور الأصلي؛ هو نسخة استخدام.
الشعارات الداكنة والفاتحة
لو الشعار يستخدم على خلفيات مختلفة، جهز نسخة فاتحة وأخرى داكنة أو ابن SVG يعتمد على currentColor إذا كانت الهوية تسمح. لا تعتمد على فلتر CSS يعكس الألوان بشكل عشوائي.
الـ stroke عند التصغير
خط يبدو مناسبا على لوحة كبيرة قد يصبح سميكا في أيقونة 20px. اختبر الرسم في أصغر مقاس فعلي. أحيانا تحتاج تبسيط التفاصيل أو تعديل سمك الخطوط لنسخة الأيقونة.
أسماء الطبقات
في الملف القابل للتعديل سمّ الطبقات والمجموعات بوضوح. هذا لا يؤثر على المستخدم النهائي، لكنه يوفر وقتا كبيرا عند تعديل لون أو عنصر بعد أشهر.