دليل إلى تنسيق صورة رسومات موجهة قابلة للتطوير (SVG)

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

سنشرح أكثر لاحقًا ، لكن SVG عبارة عن مجموعة من البيانات التي يتم تقديمها كصورة في الواجهة الأمامية. هذا يعني أنه يمكنك استخدام Cascading StyleSheets (CSS) لمعالجة الصورة. علاوة على ذلك ، يمكنك تغيير حجمه حسب الحاجة دون فقدان الجودة.

في هذا المنشور ، سنتحدث أكثر عن Scalable Vector Graphics وكيف يمكنها مساعدتك. سنناقش أيضًا كيفية تضمينها على موقع WordPress الخاص بك.

كتاب تمهيدي سريع حول تنسيقات صور الويب الأكثر شيوعًا

قبل أن ننتقل إلى SVGs وكيفية استخدامها ، يجدر التحدث عن تنسيقات الصور الأساسية التي نستخدمها للويب. هناك ثلاثة ما يجب ملاحظته:

• مجموعة خبراء التصوير المشتركة (JPEG). كما يوحي الاسم ، إذا كنت تريد عرض الصور الملتقطة بكاميرا رقمية ، فهذا هو التنسيق المناسب لك.
• رسومات الشبكة المحمولة (PNG). ستحتاج إلى استخدام تنسيق PNG لعرض أي رسومات تم إنشاؤها ، مثل تلك الموجودة في Adobe Illustrator.
• تنسيق تبادل الرسومات (GIF). مرحبًا ، يحب الجميع مقاطع مضحكة من البرامج التلفزيونية لاستخدامها كرد فعل على وسائل التواصل الاجتماعي! GIF هو التنسيق المثالي للرسومات المتحركة القابلة للنقل أيضًا.

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

ما هو تنسيق رسومات موجهة قابلة للتحجيم

سترغب في التعامل معنا في هذا القسم ، لأننا سنتعرف على الأمور التقنية في بعض المجالات. أيضًا ، قد يكون مفهوم SVGs محيرًا.

لا توجد رسومات متجهة قابلة للتحجيم (نوعًا ما). في الواقع ، إنها ليست رسمًا أو صورة على الإطلاق ، ولكنها شكل من أشكال لغة التوصيف الموسعة (XML). بالنسبة لغير المدركين ، يعد هذا شقيقًا قريبًا من HTML ولكن بدون بعض جوانب تلك اللغة (مثل العلامات المحددة مسبقًا).

كمقارنة قد تفهمها بالفعل ، ضع في اعتبارك كيف يمكنك إنشاء أشكال باستخدام CSS. هذا شيء سنتحدث عنه أكثر بعد قليل. حسنًا ، تخيل أن CSS مخبوزًا في غلاف مستندات تستدعيه باستخدام تنسيق وبنية ملف قياسيين ( image.svg ، على سبيل المثال).

من الأكثر دقة أن نقول إنه نظرًا لأن HTML يوفر إطارًا لتحديد الرؤوس والفقرات والأقسام والقوائم والمزيد ، فإن SVG يوفر إطارًا لتعريف الأشكال مثل الدوائر والمستطيلات. ومع ذلك ، لا يزال هذا لا يفسر سبب وجود (وأحيانًا نحتاج) تنسيق SVG. سنتحدث عن هذا بعد ذلك.

لماذا لدينا SVGs

قبل استخدام SVGs ، يمكنك استخدام PNGs لعرض الرسومات. قد تكون الصور القديمة على الويب عبارة عن ملفات GIF ، ولكن بشكل عام ، تعد PNGs هي تنسيق الصور السائد. السؤال ليس كثيرًا: "لماذا لدينا SVGs؟" ، المزيد "ما الذي تفتقر إليه تنسيقات الصور الحالية والذي ستحله SVG؟" الجواب: الدينامية.

إذا نظرت إلى الوراء إلى تنسيقات صور الويب الأساسية ، فإن اثنين لا يتناسبان حقًا مع الرسومات التي تم إنشاؤها (JPEG و GIF). هذا يترك PNGs لتحمل الضغط. ومع ذلك ، فإن PNGs تعاني من بعض المشكلات التي تظهر الآن فقط للويب الحديث:

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

بالإضافة إلى ذلك ، تملأ PNGs جزءًا من الفجوة في وقت كان هناك عدد قليل من الخيارات التي يمكن أن توفر جودة صورة عالية بما يكفي. في ذلك الوقت ، كانت CSS في مهدها ، ولم يكن لدينا نطاق التصميم والتطوير الذي نمتلكه الآن.

على سبيل المثال ، تمكنا فقط من استخدام خاصية border-radius منذ عام 2010. وهذا يتيح لك تحديد الحواف الدائرية وحتى الدوائر. ستراه في العمل على الأزرار كثيرًا:

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

إيجابيات رسومات المتجهات القابلة للتطوير

مثل كل تنسيق صورة آخر ، فإن Scalable Vector Graphics ليست مثالية. هناك الكثير من الإيجابيات بالطبع:

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

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

عيوب رسومات المتجهات القابلة للتحجيم

ومع ذلك ، ليس كل شيء وردية. لا تزال تواجه SVG بعض المشكلات التي تريد أن تكون على دراية بها:

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

قد نقول أيضًا أنه من الصعب إنشاء SVGs دون معرفة الترميز في بعض الحالات أيضًا. يوجد دعم أفضل بكثير في برامج الرسومات مثل Affinity Designer و Adobe Illustrator. هناك أيضًا دعم لتصدير SVG في تطبيقات مثل Google Drawing:

هذه منطقة محسنة ، لكنها لا تزال متأخرة قليلاً مقارنة بتنسيقات الصور الأخرى.

على الرغم من هذه العيوب ، يمكنك التخفيف منها. بالتأكيد ، بالنسبة للاستخدام الأساسي ، يمكنك تنفيذها على الفور تقريبًا. في الواقع ، يقدم WordPress هذا الدعم في ضوء بضع خطوات ، وسنناقش هذا بعد ذلك.

كيفية استخدام SVGs على موقع WordPress الخاص بك

الأخبار السيئة هي أنك إذا كنت تريد تحميل SVG إلى WordPress دون أي عمل ، فلن تكون قادرًا على ذلك. هناك مشكلة إضافية تتعلق بدعم Scalable Vector Graphics الحالي وهي أن WordPress لا يسمح لك بتحميل هذه الصور كمعيار لأسباب أمنية:

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

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

بمجرد تثبيت المكون الإضافي وتنشيطه ، توجه إلى الإعدادات> شاشة دعم SVG داخل WordPress. سيُظهر لك هذا بعض الشاشات ، لكنك تحتاج فقط إلى تحديد خيار التقييد للمسؤولين؟ مربع الاختيار في لوحة الإعدادات.

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

باختصار

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

خلال هذا المنشور ، قدمنا ​​الكثير من المعلومات حول Scalable Vector Graphics. ستستخدم CSS لتكييف الصورة مع احتياجاتك ، ونطاق المعالجة أكبر بكثير من ملفات PNG و JPEG. كما أنها خفيفة الوزن - لذا فهي مثالية للشاشات الصغيرة واتصالات الإنترنت الضعيفة.

هل تريد استخدام Scalable Vector Graphics على موقع الويب الخاص بك ، وإذا كان الأمر كذلك ، فهل ستساعدك هذه المقالة؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!

رصيد الصورة: GDJ.