HTML5 SVG Graphics

يُعرّف الـ SVG بالرسوم المتجهية بتنسيق XML.

ما هو الـ SVG؟

SVG إختصار لـ Scalable Vector Graphics هو تنسيق صورة مستند إلى XML يتم استخدامه لتعريف رسومات متجهة ثنائية الأبعاد للويب.

في الأساس الـ SVG، ما تعمل به في Adobe Illustrator لكن يمكنك استخدامة على الويب بسهولة كبيرة.

كيف يتم رسم صورة SVG؟

يتم رسم صورة SVG باستخدام سلسلة من العبارات التي تتبع مخطط XML وهذا يعني أنه يمكن إنشاء صور SVG وتحريرها باستخدام أي محرر نصوص ، مثل Visual Studio Code.

أشهر مميزات SVG؟

هناك العديد من المميزات لاستخدام SVG:

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

عنصر <svg>

عنصر svg عبارة عن حاوية لرسومات SVG، يتم استخدامه كعنصر خارجي لمستندات SVG ، ولكن يمكن استخدامه أيضًا لتضمين جزء SVG داخل مستند SVG أو HTML.

يحتوي SVG على عدة طرق لرسم المسارات والمربعات والدوائر والنصوص والصور الرسومية.

رسم الأشكال باستخدام SVG

رسم خط

أبسط مسار يمكنك رسمه باستخدام SVG هو خط مستقيم باستخدام عنصر <line>:

<svg width="300" height="200">
    <line x1="50" y1="50" x2="200" y2="150" stroke="blue" stroke-width="2" />
</svg>

رسم دائرة

يمكنك أيضًا إنشاء أشكال الدائرة باستخدام عنصر <circle>:

<svg width="150" height="150">
   <circle cx="60" cy="60" r="50" stroke="grey" stroke-width="5" fill="blue" />
</svg>

توضيح:

• تحدد السمات cx و cy لعنصر <circle> إحداثيات مركز الدائرة.
• تحدد السمة r نصف قطر الدائرة.

رسم مستطيل

يمكنك إنشاء أشكال مستطيلة ومربعة بسيطة باستخدام عنصر <rect>:

<svg width="300" height="200">
  <rect x="50" y="50" width="200" height="100" fill="red" stroke-width="5" stroke="grey" />
</svg>

توضيح:

• تحدد السمتان x و y لعنصر <rect> إحداثيات الزاوية العلوية اليسرى للمستطيل.
• تحدد السمات width و height عرض الشكل وارتفاعه.

رسم نص باستخدام SVG

يمكنك أيضًا رسم نص على صفحات الويب باستخدام SVG.

يتم تقديم النص في SVG على هيئة رسم بحيث يمكنك تطبيق كل التحولات الرسومية عليه ولكنه لا يزال يعمل كنص – وهذا يعني أنه يمكن تحديده ونسخه كنص بواسطة المستخدم:

<svg width="300" height="200">
    <text x="10" y="20" fill="#0088ff" style="font-size:20px;">
        Hello World!
    </text>
    <text x="10" y="20" dx="0" dy="30" fill="black" style="font-size:16px;">
        You Are Okey With Us!
    </text>
</svg>

توضيح:

• تحدد السمتان x و y لعنصر <text> موقع الزاوية العلوية اليسرى بعبارات مطلقة.
• تحدد السمتان dx و dy الموقع النسبي.

رسم نجمة

يمكنك إنشاء أشكال مستطيلة ومربعة بسيطة باستخدام عنصر <polygon>:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:red;stroke:black;stroke-width:5;fill-rule:evenodd;" />
</svg>

رسومات أخرى

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

<svg height="200" width="300">
  <polygon  points = "20,10 300,20, 170,50" fill = "blue" />
</svg>

<svg height="200" width="100">
   <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill = "blue" />
</svg>

<svg height = "200" width="200">
  <defs>
    <radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%" fy = "50%">
      <stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
      <stop offset = "100%" style = "stop-color:#000; stop-opacity:1"/>
    </radialGradient>
  </defs>
  <ellipse cx = "100" cy = "50" rx = "100" ry = "50" style = "fill:url(#gradient)" />
</svg>