التعامل مع الرسومات الفيكتورية SVG في HTML

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

بناء الوسم <svg>

تبدأ كل رسومات SVG بوسم <svg>. يُحدد هذا الوسم مساحة العمل التي ستحتوي على الرسومات. في الواقع، يعمل بمثابة حاوية للرسومات الفيكتورية.

<svg>
  <!-- يتم إدراج الرسومات SVG هنا -->
</svg>

عندما تُضيف وسم <svg> إلى صفحة HTML، ستلاحظ أنه لا يظهر شيئًا. هذا لأن الوسم <svg> بحد ذاته لا يحتوي على أي شكل. يجب أن تضيف أشكالاً، مثل الدوائر والمستطيلات والأضلاع، داخل وسم <svg> لتظهر الرسومات.

الخاصيتين width & height

تتحكم الخاصيتان width و height في أبعاد مساحة العمل لوسم <svg>. بإمكانك تحديد هذه الأبعاد بأي وحدة قياس ترغب بها، سواء كانت بكسل أو نسب مئوية أو غيرها.

الرمز التالي يُعرض رسم فيكتوري بعرض 500 بكسل وارتفاع 300 بكسل:

<svg width="500" height="300">
  <!-- يتم إدراج الرسومات SVG هنا -->
</svg>

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

الأشكال الأساسية في SVG

SVG توفر عدة أشكال أساسية يمكنك استخدامها لإنشاء الرسومات. في هذا القسم، سوف نناقش كيف يمكنك استخدام هذه الأشكال.

SVG circle

لإنشاء دائرة، يمكنك استخدام الوسم <circle>. هذا الوسم يقبل ثلاث خصائص: cx، cy، وr. cx و cy تحدد النقطة الوسطى للدائرة، بينما r يحدد نصف قطر الدائرة.

<svg width="120" height="120">
   <circle cx="60" cy="60" r="50" />
</svg>

هذا الرمز البرمجي ينشئ دائرة بنصف قطر 50 بكسل، ومركزها يقع في النقطة (60, 60).

SVG ellipse

الوسم <ellipse> يشبه وسم <circle>، لكنه يستخدم لإنشاء الأشكال البيضوية. يقبل خصائص cx، cy، rx و ry، حيث rx و ry تحدد طول نصف المحور الأفقي والعمودي على التوالي.

<svg width="200" height="100">
   <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>

هذا الرمز البرمجي ينشئ شكل بيضوي بطول نصف المحور الأفقي 100 بكسل وطول نصف المحور العمودي 50 بكسل، ومركزه في النقطة (100, 50).

SVG rectangle

يتم استخدام الوسم <rect> لإنشاء المستطيلات والمربعات. يقبل خصائص x، y، width، وheight، بالإضافة إلى rx و ry الاختياريتين التي تحدد الزوايا المستديرة.

<svg width="120" height="120">
   <rect x="10" y="10" width="100" height="100" />
</svg>

هذا الرمز البرمجي ينشئ مستطيل بعرض 100 بكسل وارتفاع 100 بكسل، ويبدأ من النقطة (10, 10).

SVG line

إنشاء خط في SVG يتطلب استخدام الوسم <line>. يقبل هذا الوسم أربع خصائص: x1, y1, x2, y2. هذه الخصائص تحدد نقاط البداية والنهاية للخط.

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

في هذا الرمز البرمجي، يتم رسم خط من النقطة (0, 0) إلى النقطة (200, 200).

SVG polygon

الوسم <polygon> يستخدم لإنشاء الأشكال المتعددة الأضلاع. يحتوي على خاصية points والتي تحدد الأعداد الزوجية للإحداثيات X و Y لكل نقطة في الشكل.

<svg height="210" width="400">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

هذا الرمز البرمجي ينشئ شكل ثلاثي الأضلاع، مع نقاط الرؤوس في الإحداثيات (200,10)، (250,190)، و(160,210).

SVG text

لإضافة نص في SVG، يمكن استخدام الوسم <text>.

<svg height="300" width="500">
  <text x="10" y="50" style="fill:blue;">Hello, SVG!</text>
</svg>

في هذا المثال، النص “Hello, SVG!” سيظهر باللون الأزرق وسيكون موضعه بناءً على الإحداثيات x و y المحددة.

الخاتمة

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

الأسئلة المتكررة