ما هو ملف SVG (وكيف تستخدمه)؟

يعد Scalable Vector Graphic (SVG) نوعًا فريدًا من تنسيق الصور. على عكس الأنواع الأخرى ، لا تعتمد SVGs على وحدات البكسل الفريدة لتكوين الصور التي تراها. بدلاً من ذلك ، يستخدمون بيانات "المتجه".

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

دعنا نذهب اليها!

اشترك في قناتنا على اليوتيوب

ما هو ملف SVG؟

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

هذا نوع آخر من ملفات الصور يسمى Portable Network Graphic (PNG) ، ويستخدم في الرسوم التوضيحية والرسومات. إذا كنت ترغب في نسخ شيء مشابه باستخدام الرسومات المتجهة ، فستحتاج إلى إنشائه باستخدام رمز XML (نفس الشيء الموجود في ملفات Sitemap.) يمكن أن تحقق الشفرة التالية نفس النتيجة:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

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

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

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

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

يعد تنسيق SVG خيارًا رائعًا لمجموعة كاملة من السيناريوهات الأخرى ، على الرغم من:

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

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

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

كيفية إنشاء ملف SVG (طريقتان)

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

1. قم بإنشاء ملف SVG يدويًا

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

• Adobe Illustrator و Photoshop و Animate و InDesign
• مايكروسوفت فيزيو
• إنكسكيب
• جيمب

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

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

2. تحويل الصور الموجودة إلى SVGs

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

إذا كنت لا ترغب في تنزيل أي برنامج ، فيمكنك أيضًا استخدام أدوات التحويل عبر الإنترنت - وهناك الكثير من الخدمات التي يمكنك اللجوء إليها. أحد الأمثلة على ذلك هو Vector Magic ، والذي يمكنك استخدامه لتحويل جميع أنواع أنواع الملفات إلى SVGs:

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

بالطبع ، هذا مجرد خيار واحد. تشمل خدمات تحويل PNG و JPG إلى SVG الأخرى Convertio و Img2Go. سترغب في إجراء بعض الأبحاث للعثور على الحل الأنسب لاحتياجاتك.

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

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

كيفية استخدام ملف SVG (داخل وخارج WordPress)

ليس من الصعب استخدام SVGs. تعد إضافة ملف SVG إلى موقع الويب الخاص بك أمرًا سهلاً مثل أخذ الكود الخاص به ولصقه في مستند HTML أينما تريد أن تذهب الصورة.

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

تتغير العملية إذا كنت تستخدم WordPress. لا يدعم نظام إدارة المحتوى (CMS) SVGs خارج الصندوق. إذا كنت ترغب في تمكين دعم SVG حتى تتمكن من تحميل الملفات مباشرة إلى موقع الويب الخاص بك ، فستحتاج إلى استخدام مكون إضافي مثل Safe SVG:

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

استنتاج

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

تتضمن بعض الخيارات الرائعة Adobe Illustrator و InDesign و GIMP. باستخدام هذه الأدوات ، يمكنك إنشاء وتحويل الصور الموجودة إلى SVGs. إذا كنت تستخدم WordPress ، فيمكنك تحميل SVGs باستخدام المكون الإضافي Safe SVG ، ثم الاستمتاع بتحريكها.

هل لديك أي أسئلة حول كيفية استخدام ملفات SVG؟ دعنا نتحدث عنها في قسم التعليقات أدناه!

الصورة المصغرة للمادة من VectorsMarket / shutterstock.com