موقع «OnePassApps» يستخدم أيقونات SVG بذكاء لجعل واجهته سريعة وواضحة على أي جهاز، من خلال إعادة استخدام الرسومات الأساسية وتضمينها مباشرة في الكود.
هل لاحظت يوماً كم تبدو الأيقونات على مواقع الويب واضحة تماماً، بغض النظر عن حجم شاشتك؟ حسناً، الخبر الذي نتناوله اليوم من «app.onepassapps.com» يمنحنا لمحة رائعة عن السبب. يمتلئ موقعهم بـ 491 أيقونة، ولكن المثير للدهشة هو أنها مبنية على 27 رسماً مميزاً فقط! هذا لا يحدث بالصدفة، بل بفضل تقنية تسمى SVG (الرسومات المتجهة القابلة للتطوير).
تخيل لو أنك تريد رسم دائرة. هناك طريقتان: إما أن تلتقط صورة لدائرة، أو أن تكتب وصفة لكيفية رسمها (مثل: 'ارسم دائرة بقطر 10 سم في المنتصف'). SVG هو مثل 'الوصفة'. بدلاً من تخزين الأيقونات كصور بكسل (مثل صور JPG أو PNG التي تصبح ضبابية عند تكبيرها)، تخزن SVG الأيقونات كتعليمات رياضية. هذا يعني أن المتصفح يمكنه إعادة رسم الدائرة أو المربع أو أي شكل آخر بدقة متناهية بأي حجم تختاره. لن تراها أبداً مشوشة أو 'مبكسلة'.
لماذا هذا مفيد جداً للمواقع مثل «OnePassApps»؟
1. **الوضوح المطلق**: سواء كنت تستخدم هاتفاً صغيراً أو شاشة عملاقة بدقة 4K، ستبدو الأيقونات حادة تماماً لأنها تُعاد رسمها لكل حجم. هذا هو معنى 'القابلة للتطوير'.
2. **أحجام ملفات أصغر**: في كثير من الأحيان، تكون هذه 'الوصفات' أصغر بكثير من صور البكسل، مما يعني أن صفحات الويب تُحمّل بشكل أسرع. وهذا ما يشار إليه الخبر بقوله إن الخادم يرسل الرسوم قبل تشغيل كود التطبيق.
3. **سهولة التعديل وإعادة الاستخدام**: بما أن SVG هو مجرد كود، يمكن للمطورين تغيير لون الأيقونة أو حجمها أو حتى اتجاهها باستخدام بضعة أسطر من التعليمات البرمجية، تماماً كما ذكر الخبر أنهم يغيرون الحجم والـ 'class'. هذا يفسر كيف يمكنهم استخدام 27 رسماً فقط لإنشاء 491 أيقونة مختلفة. إنها مثل أن يكون لديك عدد قليل من قوالب الطوابع، ولكن يمكنك استخدامها لإنتاج الكثير من الطوابع المختلفة ببساطة عن طريق تغيير لون الحبر أو حجم الورقة.
4. **تضمين مباشر**: يذكر الخبر 'inline SVG' أو 'SVG مضمن'. هذا يعني أن كود SVG يتم وضعه مباشرة داخل ملف HTML للصفحة. وهذا يجعل التحميل أسرع لأنه لا يحتاج إلى طلب ملفات صور إضافية من الخادم.
وحتى عندما يذكرون إخفاء 154 أيقونة على الشاشات الصغيرة، فهذا جزء من تصميم الويب سريع الاستجابة. لا تحتاج كل أيقونة إلى الظهور على شاشة هاتف صغيرة، مما يحسن تجربة المستخدم وأداء الصفحة.
تخيل لو أنك تريد رسم دائرة. هناك طريقتان: إما أن تلتقط صورة لدائرة، أو أن تكتب وصفة لكيفية رسمها (مثل: 'ارسم دائرة بقطر 10 سم في المنتصف'). SVG هو مثل 'الوصفة'. بدلاً من تخزين الأيقونات كصور بكسل (مثل صور JPG أو PNG التي تصبح ضبابية عند تكبيرها)، تخزن SVG الأيقونات كتعليمات رياضية. هذا يعني أن المتصفح يمكنه إعادة رسم الدائرة أو المربع أو أي شكل آخر بدقة متناهية بأي حجم تختاره. لن تراها أبداً مشوشة أو 'مبكسلة'.
لماذا هذا مفيد جداً للمواقع مثل «OnePassApps»؟
1. **الوضوح المطلق**: سواء كنت تستخدم هاتفاً صغيراً أو شاشة عملاقة بدقة 4K، ستبدو الأيقونات حادة تماماً لأنها تُعاد رسمها لكل حجم. هذا هو معنى 'القابلة للتطوير'.
2. **أحجام ملفات أصغر**: في كثير من الأحيان، تكون هذه 'الوصفات' أصغر بكثير من صور البكسل، مما يعني أن صفحات الويب تُحمّل بشكل أسرع. وهذا ما يشار إليه الخبر بقوله إن الخادم يرسل الرسوم قبل تشغيل كود التطبيق.
3. **سهولة التعديل وإعادة الاستخدام**: بما أن SVG هو مجرد كود، يمكن للمطورين تغيير لون الأيقونة أو حجمها أو حتى اتجاهها باستخدام بضعة أسطر من التعليمات البرمجية، تماماً كما ذكر الخبر أنهم يغيرون الحجم والـ 'class'. هذا يفسر كيف يمكنهم استخدام 27 رسماً فقط لإنشاء 491 أيقونة مختلفة. إنها مثل أن يكون لديك عدد قليل من قوالب الطوابع، ولكن يمكنك استخدامها لإنتاج الكثير من الطوابع المختلفة ببساطة عن طريق تغيير لون الحبر أو حجم الورقة.
4. **تضمين مباشر**: يذكر الخبر 'inline SVG' أو 'SVG مضمن'. هذا يعني أن كود SVG يتم وضعه مباشرة داخل ملف HTML للصفحة. وهذا يجعل التحميل أسرع لأنه لا يحتاج إلى طلب ملفات صور إضافية من الخادم.
وحتى عندما يذكرون إخفاء 154 أيقونة على الشاشات الصغيرة، فهذا جزء من تصميم الويب سريع الاستجابة. لا تحتاج كل أيقونة إلى الظهور على شاشة هاتف صغيرة، مما يحسن تجربة المستخدم وأداء الصفحة.
