ملفات SVG.

ما ستتعلمه.

• ما هو ملف SVG؟
  
• تاريخ ملف SVG
  
• ما استخدامات ملفات SVG؟
  
• مزايا ملفات SVG وعيوبها
  
• كيفية فتح ملف SVG
  
• كيفية إنشاء ملف SVG وتحريره
  
• ملفات SVG: الأسئلة الشائعة

ما هو ملف SVG؟

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

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

يمكنك بسهولة تحديد ملف SVG من خلال الامتداد .svg.

تاريخ ملف SVG.

يعود تاريخ ملف SVG إلى أواخر التسعينيات عندما دعت World Wide Web Consortium (W3C) المطورين لتقديم مقترحات لنوع جديد من تنسيق رسومات vector. تم تقديم ستة مقترحات تنافسية وساهمت فيما أصبح في النهاية تنسيق SVG من W3C.  

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

ما استخدامات ملفات SVG؟

مرت Scalable Vector Graphics بالكثير من التطوير على مدار الأعوام الأخيرة؛ لكن ما استخدامات ملفات SVG العملية؟

أيقونات موقع الويب والشعارات.

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

مخططات المعلومات والرسومات التوضيحية.

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

اكتشاف المزيد حول ملفات Vector

مزايا ملفات SVG وعيوبها.

من الجيد البحث عن مزايا ملفات SVG وعيوبها قبل حفظ صورك بتنسيق الملف هذا.

مزايا ملفات SVG.

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

عيوب ملفات SVG.

• تتسم ملفات SVG بأنها رائعة لرسومات الويب مثل الشعارات والرسومات التوضيحية والمخططات. إلا أن عدم توفر البكسل بها يجعل من عرض الصور الرقمية مرتفعة الجودة أمرًا صعبًا. وتعتبر ملفات JPEG أفضل للصور الفوتوغرافية التفصيلية.
  
• المتصفحات العصرية وحدها هي التي تدعم صور SVG. قد تواجه تحديًا لاستخدام ملفات SVG مع Internet Explorer 8 والمتصفحات الأقدم.
  
• قد يكون من الصعب قراءة التعليمة البرمجية في صور SVG إذا كنت حديث العهد بتنسيق الملف هذا. 

كيفية فتح ملف SVG.

بدءًا من Chrome وEdge وحتى Safari وFirefox، تتيح لك كل المتصفحات الرئيسية إمكانية فتح ملفات SVG حاليًا؛ سواء أكنت تعمل باستخدام نظام التشغيل Mac أو Windows. كل ما عليك هو تشغيل متصفحك والنقر فوق File (ملف) > Open (فتح) لاختيار الملف الذي تريد عرضه. بعد هذا سيتم عرضه في متصفحك.

ويعتبر فتح صورة SVG باستخدام برنامج مضمن في جهاز الكمبيوتر لديك بنفس القدر من السهولة. انقر نقرًا مزدوجًا فوق اسم الملف وستظهر لك قائمة بالبرامج التي ستفتحه؛ أو سيتم فتحه تلقائيًا في برنامج متوافق.

كيفية إنشاء ملف SVG وتحريره.

اتبع هذه الخطوات عند استخدام Adobe Photoshop:

1. بمجرد تجميع صورة في Photoshop، انقر فوق File (ملف) > Export (تصدير) > Export As (تصدير باسم).
   
2. انقر فوق القائمة المنسدلة Format (تنسيق) ضمن المربع الذي يظهر، ثم حدد SVG.
   
3. حدد Export All (تصدير الكل) واحفظ الملف. 

ملاحظة مفيدة: نظرًا لأن Photoshop هو محرر رسومات نقطية، يفضل الكثير إنشاء ملفات SVG وتحريرها في Adobe Illustrator، محرر رسومات vector.

ملفات SVG: الأسئلة الشائعة.

هل تدعم ملفات SVG الرسوم المتحركة؟

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

كيف يمكن التعرف على ملف SVG؟

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

هل تستخدم ملفات SVG على الإنترنت فقط؟

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

ما مقدار كبر ملفات SVG؟

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

ما الفرق بين ملفات SVG وPNG؟

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