متى وأين استخدم صور بصيغة SVG

إن صيغة SVG (Scalable Vector Graphics) هي بالفعل صيغة جيدة بل ممتازة لاستخدامها في صفحات الويب وهي حاليا الخيار الأفضل ويتم إستخدامها بكثرة في أغلب المواقع حتى الآن مكتبات ال icons أصبحت تستخدم ال svg بدلا من تنسيقات css السابقة.

وذلك لأن ملفات SVG تكون أصغر حجمًا مقارنة بالصيغ الأخرى مثل PNG أو JPEG وغيرها و لأنها تعتمد على الرسوميات المتجهية (Vector Graphics) مما يعني أن الصورة تكون معتمدة على الأشكال الرياضية مثل الخطوط والمنحنيات بدلا من النقاط حيث يمكنك رسم أى شكل تريده من خلالها و هذا يجعلها أكثر كفاءة في استخدام المساحة.

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

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

 أما بخصوص استخدامها في اللوغو و غلاف الصفحة الأمامية فنعم بالطبع يمكنك استخدامها .حيث الللوجو سيكون في صورة متجهة (vector) مما يضمن وضوحه في جميع الأحجام حتى لو قمت بتكبيره أو تصغيره الدقة ستكون واحدة.

أما بالنسبة للأمان فلا توجد مشكلة إذا قمت أنت بإنشاء ملف SVG ولكن إذا قمت بإستخدام ملفات من مصادر غير موثوقة من الممكن أن يتم وضع سكريبتات ضارة بداخلها ويتم تنفيذها لدى المستخدم عند تحميل الصورة في المتصفح . ويمكنك إستخدام أدوات SVG Sanitizer لفحص الصورة إذا كانت تحتوي على <script> أم لا .

ويمكنك قراء الإجابات التالية لمميزات SVG و كيفية إنشاءها :

مناسبة للأيقونات والشعارات، أو الرسومات vector art style كالتالي:

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

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

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

أو هجمات DoS، من خلال كود JavaScript بإنشاء حلقات لا نهائية أو استهلاك موارد النظام بشكل كبير، وذلك يؤدي إلى تباطؤ أو تعطل النظام.

تستطيع تفادي ذلك بتنفيذ Sanitization أي إزالة أي كود JavaScript أو عناصر خارجية محتملة الخطورة من ملفات SVG قبل استخدامها، وهناك مكتبات وأدوات تطهير SVG متاحة للقيام بذلك تلقائيًا، كالتالي:

• https://svg.enshrined.co.uk

أو تحميل صور svg من مصادر موثوقة، وتستطيع تجاهل الـ Sanitization.

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

نعم، صيغة SVG (Scalable Vector Graphics) مفيدة جدًا لصفحات الويب، ويمكن أن تكون خيارًا ممتازًا لاستخدامها في اللوجو وغلاف الصفحة الأمامية. نتيجة العديد من المميزات

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

وبالنسبة للأمان فهي آمنة تماماً ولكن إذا

• إذا كنت تستخدم ملفات SVG أنشأتها بنفسك أو حصلت عليها من مصادر موثوقة، فهي آمنة تمامًا.
• وفي حالة كنت تسمح للمستخدمين بتحميل ملفات SVG إلى موقعك، استخدم أدوات مثل "SVG Sanitizer" لإزالة أي تعليمات برمجية ضارة محتملة.
• كما أنه عند إضافتها إلى صفحة الويب، استخدم علامة <img> بدلاً من <object> أو <embed>، لأن <img> لا تسمح بتنفيذ التعليمات البرمجية داخل SVG.

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

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