رسم الأشكال الأساسية في SVG | عناصر Picture وSVG في لغة HTML

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يتضمن معيار SVG وسوماً متجهة بديهية ومرنة لبناء الأشكال الهندسية الأساسية: وسم <rect> لرسم المستطيلات والمربعات، ووسم <circle> لرسم الدوائر، ووسم <line> لرسم الخطوط المستقيمة، ووسم <path> لرسم المنحنيات المعقدة والمسارات الحرة.

الصف 2 كود برمجي

HTML

<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- Rounded rectangle -->
  <rect x="10" y="10" width="80" height="80"
        rx="8" fill="#2563eb"/>
  <!-- Circle with center and radius -->
  <circle cx="150" cy="50" r="40"
          fill="#0f766e"/>
</svg>

جرّب بنفسك

الصف 3 شرح توضيحي

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

الصف 4 ملاحظة هامة

Basic Shapes in SVG Graphics رسم الأشكال الأساسية في SVG

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (عناصر Picture وSVG في لغة HTML)