كيفية إنشاء ملف SVG

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

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

المعالجات باستخدام ملفات SVG ، يتزايد من قبل المتخصصين وليسوا محترفين في عالم التصميم.

ما هو ملف SVG؟

SVG هو اختصار باللغة الإنجليزية لـ Scalabe Vector Graphics ، باللغة الإسبانية ، Scalable Vector Graphics. إنه يقع في حوالي أ تنسيق مفتوح وحر التي يمكن من خلالها إنشاء رسومات ثنائية الأبعاد ، ذات بعدين.

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

لماذا يجب علينا استخدام SVG؟

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

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

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

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

كيفية إنشاء ملفات SVG بسهولة

ربما تكون أسهل طريقة لإنشاء ملفات SVG ، إذا كنت معتادًا عليها ، هي من خلال برنامج تصميم الرسوم ، مثل Illustrator و Corel Draw وغيرها.

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

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

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

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

عند تحديد نوع SVG ، يظهر مربع حوار يعرض لنا خيارات مختلفة يجب أخذها في الاعتبار.

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

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

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

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

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

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

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