كيفية إنشاء أشكال بسيطة باستخدام SVG
تعتبر الرسوم البيانية الموجهة بواسطة أكواد البرمجة أحد أقوى أدوات تصميم وتطوير واجهات المستخدم الحديثة، وأكثر هذه الأدوات شهرة هو SVG (Scalable Vector Graphics). يتيح SVG للمطورين والمصممين إنشاء رسومات متجهة قابلة للتوسع بدون فقدان الجودة، وهو يضمن عرض هذه الرسومات بكفاءة على جميع أنواع الشاشات. في هذا المقال، سنتناول كيفية إنشاء أشكال بسيطة باستخدام SVG، مع شرح جميع الأساسيات اللازمة لفهم وتطبيق هذا التقنية.
1. ما هو SVG؟
SVG هو صيغة لتخزين الرسومات التي تعتمد على المتجهات بدلاً من البكسلات، مما يعني أنه يمكن تكبيرها وتصغيرها بدون التأثير على جودتها. يعتمد SVG على XML (لغة التوصيف القابلة للامتداد) لتمثيل الرسومات، مما يتيح سهولة تعديل الكود بشكل يدوي أو من خلال البرمجة.
السبب في شهرة SVG يعود إلى أنها تتيح للمطورين إمكانية دمج الرسومات مع صفحات الويب بطريقة مرنة وتفاعلية. يمكن استخدام SVG لإنشاء أي نوع من الأشكال، من الأشكال الأساسية مثل الدوائر والمستطيلات إلى الرسومات الأكثر تعقيدًا.
2. بنية SVG الأساسية
كل مستند SVG يبدأ بوسم ويحتوي على خصائص تحدد العرض والطول. عادةً ما تكون هيكلية SVG بسيطة للغاية وتتألف من سلسلة من الأوامر التي تحدد الأشكال المتنوعة التي سيتم رسمها داخل المستند.
في هذا المثال، حددنا مستند SVG بعرض 500 بكسل وارتفاع 500 بكسل. وسم xmlns="http://www.w3.org/2000/svg" هو موجه لاستخدام SVG في المستند.
3. إنشاء الأشكال البسيطة باستخدام SVG
أ. المستطيل (Rectangle)
يُعد المستطيل من أبسط الأشكال التي يمكن إنشاؤها باستخدام SVG. يمكن إنشاء مستطيل باستخدام الوسم
في هذا المثال، يتم رسم مستطيل يبدأ من النقطة (50، 50) بعرض 200 بكسل وارتفاع 100 بكسل، ولونه الأزرق. خاصية fill تُستخدم لتحديد لون التعبئة داخل المستطيل.
ب. الدائرة (Circle)
الرسم البياني الآخر الذي غالباً ما يُستخدم هو الدائرة. يتم رسم الدائرة باستخدام الوسم
في هذا المثال، يتم رسم دائرة بمركزها في النقطة (250، 250) ونصف قطر 100 بكسل. اللون المستخدم في الدائرة هو الأحمر.
ج. الخط (Line)
الخطوط هي واحدة من الأشكال البسيطة الأخرى التي يمكن رسمها باستخدام SVG. يمكن رسم خط باستخدام الوسم x1, y1, x2, و y2.
هذا الخط يبدأ من النقطة (50، 50) وينتهي عند النقطة (450، 450)، لونه أخضر وسمكه 5 بكسل. خاصية stroke تُستخدم لتحديد لون الخط، بينما تحدد خاصية stroke-width سمك الخط.
د. متعددة الأضلاع (Polygon)
يمكن أيضًا رسم أشكال متعددة الأضلاع باستخدام SVG. يتم ذلك باستخدام الوسم points.
في هذا المثال، يتم رسم شكل خماسي الأضلاع باستخدام النقاط التي تحدد رؤوسه. اللون المستخدم هو الأصفر.
هـ. الخط المنحني (Path)
يمكن رسم الأشكال الأكثر تعقيدًا باستخدام الوسم
في هذا المثال، نستخدم الأمر M للانتقال إلى النقطة (150، 0)، ثم نرسم خطًا باستخدام الأمر L إلى النقطة (75، 200) و (225، 200) ثم نغلق الشكل باستخدام Z.
4. تنسيق الأشكال باستخدام خصائص CSS
يمكنك أيضًا تنسيق الأشكال باستخدام CSS، مما يسهل تخصيص الألوان، الحدود، الظلال، وغيرها من الأنماط.
هنا، نستخدم CSS لتحديد خصائص التنسيق للمستطيل، مثل اللون البرتقالي للتعبئة، اللون الأسود للحدود، وسمك الحدود 2 بكسل.
5. إضافة تأثيرات الرسوم المتحركة باستخدام SVG
من المزايا المدهشة لـ SVG هو القدرة على إضافة تأثيرات الرسوم المتحركة باستخدام الوسم
في هذا المثال، نقوم بإنشاء دائرة تتغير بشكل دوري في الحجم من 50 بكسل إلى 100 بكسل باستخدام الرسوم المتحركة. الخاصية dur="2s" تحدد مدة الرسوم المتحركة، بينما repeatCount="indefinite" تجعل الرسوم المتحركة تتكرر بلا نهاية.
6. استخدام SVG في تطبيقات الويب
يمكن تضمين SVG داخل صفحات الويب بسهولة عبر HTML باستخدام الوسم . كما يمكن أيضًا تضمين ملفات SVG الخارجية باستخدام وسم
يمكنك أيضًا إضافة SVG إلى تطبيقات JavaScript باستخدام مكتبات مثل D3.js أو Snap.svg، مما يتيح لك إنشاء رسومات تفاعلية وديناميكية.
7. استنتاج
تعد SVG واحدة من أكثر الأدوات قوة ومرونة لإنشاء الرسوم البيانية المتجهة على الويب. بفضل سهولة استخدامها وتكاملها مع HTML وCSS وJavaScript، يمكنك إنشاء أي شكل بسيط أو معقد، بالإضافة إلى إضافة تأثيرات الرسوم المتحركة والرسومات التفاعلية.
