SVG للمطورين: فهم الأساسيات والفوائد والعيوب

تجلب الرسومات تعبيرات فريدة على مواقع الويب وتساعد المطورين أيضًا على توصيل الأفكار والمفاهيم العميقة للمستخدمين دون عناء. إنه عنصر أساسي على الإنترنت وأصبح منذ عام 1999 قابلاً للنصوص ، مما يسمح بعرض أكثر تعقيدًا للصور على الويب.

قد تكون معتادًا على استخدام أنواع ملفات الصور النقطية المختلفة: JPG و PNG و GIF. دعونا نتذكر قليلا. مع دعم 256 لونًا (8 بت) ، يعد تنسيق GIF (تنسيق تبادل الرسوم) تنسيقًا رائعًا للرسوم المتحركة والشفافية ، ولا يشمل شفافية ألفا. يعد تنسيق PNG (Portable Network Graphic) أفضل بكثير مع دعم لأكثر من 16 مليون لون (24 بت) وجميع أنواع الشفافية ، بشرط ألا تحتاج إلى رسوم متحركة.

تنسيق الصور الأكثر استخدامًا على الويب JPG أو JPEG (مجموعة خبراء التصوير المشتركة) ، ويرجع ذلك أساسًا إلى أنه قابل للضغط ، ويدعم أكثر من 16 مليون لون ؛ 24 بت أو 8 بت لكل بكسل لتدرج الرمادي ، لكن لا يوجد دعم للرسوم المتحركة أو الشفافية. ومن ثم ، فإن JPG هو مطورو تنسيق الرسومات الرئيسي الذي يستخدمه مطورو الصور الثابتة. لم أذكر الصورة النقطية (BMP) لأنها عادة ليست تنسيق صورة للويب. يخزن BMP بيانات دقيقة لكل بكسل في الصورة ، مما يجعل الملفات كبيرة حقًا (أكثر من 150 ضعف حجم ملفات JPG بنفس الدقة) وغير مثالية لرسومات مواقع الويب.

تعد تنسيقات الرسومات المعتمدة على الدقة رائعة ، في الغالب عند استخدامها بشكل مناسب. ومع ذلك ، فإنهم جميعًا يشتركون في عيب مشترك ، مما أدى إلى إدخال SVG - تنسيق الصورة المتجه الوحيد للويب.

ما هو SVG؟

Scalar Vector Graphics (SVG) هو تنسيق صورة يستند إلى لغة التوصيف الموسعة (XML) يصف رسومات ثنائية الأبعاد مثل المسارات والخطوط والدوائر والأنماط وألوان النص وما إلى ذلك. في تعريف أبسط ، يشير إلى تنسيق صورة مع دعم ثنائي الأبعاد ، الذي يتحكم ملف نصي بتنسيق XML في سلوكه ووجوده بالكامل.

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

دعونا نرى كيف يمكنك إنشاء صور SVG وبعض الأسباب التي تجعلك تفكر في استخدام SVG في مشاريعك.

كيفية إنشاء صور SVG

يمكنك إنشاء صور SVG باستخدام أي محرر نصوص ، على الرغم من أن العملية تقنية إلى حد ما وتتطلب بعض المعرفة بالتصميم والرياضيات ، خاصة إذا كنت تقوم بإنشاء بعض الأشكال المعقدة. تخيل رسم طائرة على قماش باستخدام سطور من الرموز فقط. هناك طريقة أسهل ، ولكن دعونا نستخدمها لفهم المفاهيم الأساسية لـ SVG.

نستخدم عناصر SVG الرسومية لإنشاء صور SVG في محرر نصوص. تتمثل العملية ببساطة في إدراج العناصر الرسومية داخل علامتي <svg> و </svg> ، وتحديد إحداثياتها ، وأبعادها ، ولونها ، وما إلى ذلك ، على سبيل المثال ، يمكن استخدام عنصر <rect> لرسم مستطيل كما هو موضح في المثال التالي.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

سيرسم الكود أعلاه مستطيلًا أزرقًا بحجم 300 × 300 بكسل في الزاوية العلوية اليسرى من المتصفح إذا تم حفظه كملف .svg وفتحه باستخدام مستعرض. الآن ، قد تتساءل عن سبب وجود ارتفاعين وعرضين في المستند. دعونا نفهم الكود بالكامل لنرى السبب. كما ذكرنا سابقًا ، يجب كتابة شفرة SVG داخل عنصر الجذر (<svg> و </ svg>) لإعلام متصفحك بكيفية تفسير هذه الأسطر.

تمامًا كما هو الحال في HTML ، يتطلب SVG إعلانًا عن مساحة الاسم في عنصر الجذر. في المثال أعلاه ، قدمنا ​​معلمة xmlns "http://www.w3.org/2000/svg" وأوصى W3C بإصدار SVG 1.1 داخل عنصر الجذر. يُطلق على البعد الموجود داخل عنصر الجذر وجهة نظر SVG ، وهي النافذة أو اللوحة القماشية التي تظهر من خلالها صورة SVG المرسومة داخل علامة الجذر. يجب أن تحتوي نقطة العرض على نفس البعد على الأقل مع كائنات SVG بأكملها قبل أن تظهر في المستعرض الخاص بك.

السطر الثاني أسهل في الفهم. يجسد العنصر <rect> ، الذي يستخدم لرسم المستطيلات ، معلمات المستطيل المقترح بدءًا من البعد. يصف عرض الحد سماكة الخط بينما يخبر نموذجا ألوان RGB المستعرض باللون الذي يملأ المستطيل والخط على التوالي. هذا بسيط للغاية ، أليس كذلك؟

الآن ، يمكننا تحريك المستطيل داخل الصفحة من خلال إعلان قيمة لـ x و y على النحو التالي:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

بالطبع ، لن ننسى زيادة بُعد وجهة النظر لاستيعاب المساحة الإضافية التي سيستغرقها ذلك.

أسهل طريقة لإنشاء صور SVG هي استخدام أدوات الرسم مثل Adobe Illustrator و Inskape و Sketch. بدلاً من البناء من البداية ، تعد بعض مكتبات JavaScript مثل Bonsai.js و D3.js مصادر جيدة لصور SVG إذا كنت تبحث عن رموز وأشكال معقدة وما إلى ذلك.

إضافة صور SVG

تتمثل إحدى مزايا استخدام صور SVG في سهولة دمجها مع تصميمك. يمكنك ببساطة الرجوع إليها في السمة src لعلامة img. يجب أن يشير هذا إلى ملف .svg المحفوظ في مجلد موقع الويب الخاص بك مثل هذا:

<img src='example.svg'>

بدلاً من ذلك ، يمكنك إدراج أكواد SVG في مستند HTML الخاص بك ، مع بدء العلامات <svg> </svg> في التعليمات البرمجية وتنتهيها كما ذكرنا سابقًا.

يمكنك أيضًا الرجوع إلى صورة SVG في CSS للحصول على صورة الخلفية مثل هذا:

.main-header {
background-image: url(example.svg);
}

فوائد استخدام SVG للمطورين

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

تشمل بعض الفوائد ما يلي:

قابلية التوسع والاستجابة

كتنسيق صورة غير معتمد على الدقة ، يمكن تحجيم SVGs إلى أجل غير مسمى ، دون أن تصبح منقطة. يتيح لك هذا ، بصفتك مطورًا ، تقديم صور رسومية عالية الجودة لكل مستخدم بغض النظر عن قوة الدقة وحجم الشاشة لأجهزتهم. يمكنك الجمع بين مسارات وأشكال وعناصر نصية مختلفة لإنشاء مرئيات مذهلة ستكون حادة وواضحة في جميع الأحجام.

لا يتوفر هذا في أي من تنسيقات الصور النقطية ذات الأبعاد الثابتة ، وذلك ببساطة لأنه لن يكون لديهم بيانات كافية لملء كل مساحة عندما يتم توسيع نطاقها بشكل كبير. يحسب SVG المسافة بين النقاط لإبقاء المسارات متصلة باستمرار بحيث تظل الصورة حادة بأي مقياس.

مرن للغاية ويدعم الرسوم المتحركة

على عكس الصور النقطية ، التي تقدم النسخة النهائية من الصورة ، فإن صور SVG قابلة للتحرير تمامًا عن طريق ضبط الرموز باستخدام محرر نصوص أو أدوات رسم خاصة. باستخدام أسماء الفئات أو معرّفات عناصر SVG ، يمكنك تصميم أو تحريك صور SVG باستخدام CSS. الرسوم المتحركة لصور SVG ممكنة أيضًا باستخدام Web Animation API أو SMIL أو WebGL.

الأهم من ذلك ، يمكنك دمج صور SVG مع مستندات وتقنيات منصات الويب المفتوحة الأخرى البارزة. يمكن برمجة ملفات SVG باستخدام JavaScript وتصميمها باستخدام CSS مثل HTML.

صديقة للسيو وحجم الملف الصغير

تعمل صور SVG الموجودة في تنسيق نصي على تحسين إمكانية الوصول إلى موقع الويب ، والتي تعد ميزة كبيرة في تصنيف الصفحات. علاوة على ذلك ، يمكن لمحركات البحث فهرسة نص عنصر SVG والذي يسمح للمستخدمين بالعثور على موقع الويب الخاص بك باستخدام الكلمات الرئيسية في ملف SVG الخاص بك.

يتم تحميل SVG بشكل أسرع نظرًا لعدم وجود ملف لتنزيله ودون الحاجة إلى طلب HTTP. يعني تحسين دقة ملف الصورة النقطية زيادة عدد النقاط (وحدات البكسل). سيؤدي ذلك إلى زيادة حجم الصورة ، مما يؤدي إلى سحب وقت تحميل موقع الويب الخاص بك. هذا أبعد ما يكون عن الحالة عند استخدام SVG. كصورة تم إنشاؤها باستخدام مجموعة من الإرشادات والإحداثيات ، تكون أحجام ملفات SVG صغيرة للغاية (عند تحسينها) مقارنة بأي نوع ملف صورة آخر. ينتج عن هذا وقت تحميل أسرع وأداء متزايد للصفحة وترتيب محرك بحث أعلى مع الاستمرار في تحسين تجربة المستخدم. لمزيد من المعلومات حول هذا الأمر ، قم بزيارة SEO Consultant London

يحتوي SVG على نموذج كائن المستند الخاص به

يوجد SVG كمستند منفصل ، يُعتبر أن له هيكله الخاص ويتم وضعه داخل DOM العادي. هذه السمعة مهمة لسمة viewBox ، والتي تتيح لنا إنشاء وجهة نظر من أي بُعد ، ورسم صور بأحجام مختلفة من قماش الرسم وعرضها دون تحديث خصائص SVG.

SVG هو تنسيق ملف الصور في المستقبل

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

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

قبل تقديم W3C لـ SVG 1.1 (الإصدار الثاني) في 16 أغسطس 2011 ، والذي من المحتمل أن يكون قيد المراجعة لإصدار أحدث ، كان SVG 1.0 و 1.1 (الإصدار الأول) يغيران بالفعل الطريقة التي نتعامل بها مع الصور على الإنترنت. هذا وعد بشيء يستحق أكثر من تنسيق الصور النقطية العادي ، والذي لا يزال مفيدًا جدًا في وضعنا الحالي لبرمجة الويب. إن تنسيق SVG ليس أفضل تنسيق للصورة في جميع الحالات. من المتوقع أن تعالج الإصدارات اللاحقة من SVG بعض عيوب SVG ؛ ليتم مناقشتها لاحقًا في هذه المقالة.

متى تستخدم تنسيق صورة SVG

بالطبع ، لا تزال تنسيقات الصور المعتمدة على الدقة هي الأفضل للصور الفوتوغرافية وغيرها من الصور التفصيلية جيدًا. فيما يلي قائمة بالحالات الشائعة حيث تكون تنسيقات صور SVG هي الأفضل.

1. الشعارات والرموز
2. الصور التفاعلية مثل المخططات والرسوم البيانية والخرائط والرسوم البيانية
3. الرسوم المتحركة
4. واجهات التطبيق
5. الرسوم التوضيحية والرسومات البسيطة
6. المؤثرات الخاصة مثل gooey أو تغيير الشكل
7. الأعمال الفنية منخفضة الكثافة والرسومات البسيطة

عيوب SVG للمطورين

لا تدعم جميع المتصفحات SVG: المتصفحات القديمة تتعامل مع SVGs بنفس الطريقة التي يتعامل بها نظام التشغيل Windows XP القديم مع محركات أقراص فلاش أو Canon EOS 5DSr عند محاولة توصيلهما. باختصار ، لا يعمل SVG على المتصفحات القديمة ؛ IE8 وأقل. ومع ذلك ، نظرًا لأن المتصفحات القديمة ليست جزءًا من أي سبب مستقبلي ، إلى جانب حقيقة أن عددًا قليلاً فقط من الأشخاص ما زالوا يستخدمونها ، فهذا ليس سببًا رئيسيًا لعدم استخدام SVGs.

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

فهم كود SVG: بينما يُحسب للمطورين معرفة كيفية استخدام العديد من لغات برمجة الويب ، فقد ثبت أن زيادة هذا العبء يمثل تحديًا. نمط كود SVG ليس صعبًا في الواقع أو مختلفًا تمامًا عن لغات برمجة الويب. لكن إنشاء الصور الجذابة أو معالجتها يتطلب بعض الجهد. ليس هذا ما يرغب كل مطور في استثمار الكثير من الوقت في القيام به عندما تكون الصور النقطية في متناول اليد ولا تتطلب أي جهد لتضمينها.

استنتاج

يعد سلوك الرسومات على موقع الويب استجابةً لمجموعة واسعة من المستخدمين جانبًا مهمًا من جوانب تطوير الويب اليوم. تنسيق صور SVG هو الحل الأكبر ، بدلاً من عرض أحجام صور متعددة ، كما هو معتاد في تصميماتنا الحالية. وذلك لأن المتصفحات تحسب كيفية عرض الصورة باستخدام مجموعة من الإرشادات التي تضمن صورًا واضحة ونقية بأي مقياس.

تظل الصور النقطية هي الأفضل للصور شديدة التفصيل مثل الصور الفوتوغرافية ، بينما تُستخدم صور SVG للصور الأقل تفصيلاً مثل الرموز والشعارات والمخططات والرسوم البيانية وما إلى ذلك. أنصحك بالالتزام بأدوات الرسم مثل Illustrator أو Sketch for إنشاء صور SVG ومكتبات عبر الإنترنت للرموز والأشكال الشائعة. يجب أن يكون التشفير ضروريًا فقط عندما تريد معالجة صور SVG الخاصة بك.

يرجى إخبارنا بكيفية استخدامك لـ SVG وحول النصائح الرائعة الأخرى التي لم تتم مشاركتها هنا.