يعتبر تنسيق ملف SVG أداةً شائعة لعرض الرسومات ثنائية الأبعاد والمخطات والتوضيحات على مواقع الويب. وبما أنه ملف vector، يمكن تغيير زيادة حجمه أو تقليله دون فقد دقته. تعرّف على المزيد حول سمات صور SVG الأساسية، وكذلك مميزاتها وعيوبها وكيفية تطور تنسيق SVG.
Scalable Vector Graphics (SVG) أو رسومات Vector التي يمكن تغيير حجمها هو تنسيق ملف vector ملائم للويب. على عكس الملفات النقطية المستندة إلى البكسل مثل ملفات JPEG، فإن ملفات vector تخزن الصور عبر صيغ رياضية بناءً على نقاط وخطوط على شبكة ما. وهذا يعني أن ملفات Vector مثل SVG يمكن تغيير حجمها بدرجة ملحوظة دون فقد أي من جودتها، مما يجعلها مثالية للشعارات والرسومات المعقدة عبر الإنترنت.
إلا أن إمكانات تغيير الحجم ليست فقط هي ما تجعل ملفات SVG ذائعة الصيت بين مصممي الويب. تُكتب ملفات SVG بتعليمة XML البرمجية، مما يعني أنها تخزن أي معلومات نص مثل النص الحرفي بدلاً من الأشكال. يتيح هذا لمحركات البحث مثل Google إمكانية قراءة رسومات SVG للكلمات الأساسية، مما يمكن أن يساهم بقدر كبير في ارتقاء موقع الويب في ترتيبات البحث.
يمكنك بسهولة تحديد ملف SVG من خلال الامتداد .svg.
يعود تاريخ ملف SVG إلى أواخر التسعينيات عندما دعت World Wide Web Consortium (W3C) المطورين لتقديم مقترحات لنوع جديد من تنسيق رسومات vector. تم تقديم ستة مقترحات تنافسية وساهمت فيما أصبح في النهاية تنسيق SVG من W3C.
استغرق انتشار ملفات SVG بعض الوقت. لم يكن الدعم كبيرًا نسبيًا حتى عام 2017، وذلك عندما بدأ الناس في ملاحظة فوائد استخدام ملفات SVG في متصفحات الويب العصرية. ينتشر استخدام ملفات SVG حاليًا في صور مواقع الويب ثنائية الأبعاد وذلك نظرًا لقدرة أغلب المتصفحات وتطبيقات الرسم لملفات vector على التعامل معها بسهولة.
مرت Scalable Vector Graphics بالكثير من التطوير على مدار الأعوام الأخيرة؛ لكن ما استخدامات ملفات SVG العملية؟
في الغالب يستخدم المصممون ملفات SVG لعرض أيقونات موقع الويب مثل الأزرار، هذا بالإضافة إلى شعارات الشركة. وتعني قدرة نوع الملف هذا على زيادة الحجم أو تقليله دون التأثير على الجودة أنها مثالية للرسومات المطلوب ظهورها في مواضع متعددة وبأحجام مختلفة.
بفضل استخدام XML داخل ملفات SVG، تستطيع محركات البحث مثل Google قراءة المخططات والرسوم البيانية ذات النصوص الكثيرة، مما يمكن أن يساعد في تحسين محرك البحث. بفضل قدرة Google على اكتشاف الكلمات الأساسية داخل ملفات SVG، يمكن أن يرفع من ترتيب صفحة الويب ضمن نتائج البحث. بالإضافة إلى ذلك، للمساعدة في جعل صفحات الويب أكثر جاذبية، فإن ملفات SVG تدعم الرسوم المتحركة أيضًا.
اكتشاف المزيد حول ملفات Vector
من الجيد البحث عن مزايا ملفات SVG وعيوبها قبل حفظ صورك بتنسيق الملف هذا.
بدءًا من Chrome وEdge وحتى Safari وFirefox، تتيح لك كل المتصفحات الرئيسية إمكانية فتح ملفات SVG حاليًا؛ سواء أكنت تعمل باستخدام نظام التشغيل Mac أو Windows. كل ما عليك هو تشغيل متصفحك والنقر فوق File (ملف) > Open (فتح) لاختيار الملف الذي تريد عرضه. بعد هذا سيتم عرضه في متصفحك.
ويعتبر فتح صورة SVG باستخدام برنامج مضمن في جهاز الكمبيوتر لديك بنفس القدر من السهولة. انقر نقرًا مزدوجًا فوق اسم الملف وستظهر لك قائمة بالبرامج التي ستفتحه؛ أو سيتم فتحه تلقائيًا في برنامج متوافق.
اتبع هذه الخطوات عند استخدام Adobe Photoshop:
ملاحظة مفيدة: نظرًا لأن Photoshop هو محرر رسومات نقطية، يفضل الكثير إنشاء ملفات SVG وتحريرها في Adobe Illustrator، محرر رسومات vector.
لا يُستخدم تنسيق ملف SVG للصور الثابتة فحسب. ستكتشف مجموعة من الأدوات عبر الإنترنت للمساعدة في توفير عناصر متحركة في رسومات الويب لديك. يمكن أن تتضمن رسوم SVG المتحركة عناصر أساسية نسبيًا، مثل وظيفة التمرير للتنقل بين الجوانب المختلفة من مخطط المعلومات. يمكن أيضًا تحريك الرسوم التوضيحية، مثل الأيدي ووجه الساعة.
من أسهل الطرق للتعرف على ملف SVG هو بالتحقق من رمز الامتداد. يظهر ملف SVG باسم ملف .svg. يمكنك أيضًا التعرف على صور vector مثل ملفات SVG عبر تكبيرها إلى 200% أو أعلى على شاشة الكمبيوتر. ستحتفظ صورة vector بخطوطها الواضحة وألوانها الثابتة بدلاً من بكسلتها أو تشويشها.
على الرغم من استخدام صور SVG في الأساس على الويب، تُستخدم أيضًا في مواضع أخرى بخلاف عالم الإنترنت. على سبيل المثال، نظرًا لعدم تلفها عند تغيير حجمها من الأبعاد الأصلية، تعتبر ملفات SVG مفيدة كقوالب للطباعة على الملابس، مثل التيشيرتات. لا يتم نقل ملف JPEG الذي تم تصميمه باستخدام الكثير من البكسلات بنفس درجة الوضوح.
يعتمد حجم ملف SVG على مقدار بيانات الصورة المتضمنة؛ إلا أنها في المعتاد أقل من أغلب أنواع الملفات الأخرى. ستستهلك الرسومات المعقدة التي تضم العديد من المسارات ونقاط الارتساء مساحة تخزين أكبر من التصميمات الأبسط والأكثر وضوحًا. جرّب تقليل عدد الإرشادات المعقدة في ملفك.
باختصار، ملفات SVGهي ملفات Vector بينما ملفات PNG هي ملفات نقطية. في حالة تمديد ملف PNG كثيرًا أو تصغييره جدًا، يصبح ضبابيًا ومبكسلاً. لا تتضمن ملفات SVG أي بكسلات، وبهذا لن تفقد دقتها أبدًا. بالإضافة إلى ذلك، لا تدعم ملفات PNG الرسوم المتحركة.
تعرّف على المزيد حول تنسيق شائع آخر لرسومات الويب والشعارات.
تعرّف على أسباب تصميم ملفات JPEG مع وضع الصور الرقمية المعقدة في الاعتبار.
تعرّف على هذا النوع الجديد من الملفات النقطية من وجهة نظر Apple.
اكتشف تنسيق vector عريض الاستخدام هذا الذي تم تطويره لتطبيق Adobe Illustrator.
أي تنسيقات الملفات يسود في تصميمات الويب؟
ألق نظرة متمعنة على قدرات الطباعة التي تقدمها.
تمتع بتصميم عمل فني vector ورسومات رائعة.
7 أيام مجانًا، ثم بسعر US$ 20,99/الشهر.
تمتع بتصميم تخطيطات صفحة رائعة للمطبوعات والوسائط الرقمية.
7 أيام مجانًا، ثم بسعر US$ 20,99/الشهر.
احصل على المجموعة الكاملة من التطبيقات الإبداعية والمزيد.
7 يومًا مجانًا، ثم بسعر US$ 52,99/الشهر.