🎨 مقدمة إلى SVG في HTML: عالم الرسومات المتجهة الرائع

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

SVG هي اختصار لـ Scalable Vector Graphics، وتعني الرسومات المتجهية القابلة للتكبير. الفكرة الأساسية بسيطة وجميلة: بدلاً من تخزين الصورة كنقاط (بكسل) مثل الصور العادية (JPG, PNG)، يتم تخزينها كمجموعة من الأوامر الرياضية التي تصف الأشكال والخطوط. هذا يعني أنه يمكنك تكبيرها أو تصغيرها كما تشاء دون أن تفقد جودتها أو تصبح ضبابية! ✨

🔧 لماذا نستخدم SVG في HTML؟

قبل أن نتعلم كيفية استخدام SVG، من المهم أن نفهم لماذا نستخدمها. إليك بعض المزايا الرائعة:

  1. الجودة غير القابلة للكسر 🏆: كما ذكرنا، التكبير لا يؤثر على وضوحها.
  2. حجم ملف صغير 📦: غالباً ما تكون ملفات SVG أصغر حجماً من نظيراتها من الصور النقطية، خاصة للشعارات والأيقونات والرسوم البيانية البسيطة.
  3. القدرة على التحكم بالكود 👨‍💻: يمكنك تعديل لون الشكل أو حجمه مباشرة من خلال كود CSS أو JavaScript، دون الحاجة إلى برنامج تحرير صور.
  4. التوافق مع محركات البحث 🔍: نظراً لأن SVG هو نص (كود)، يمكن لمحركات البحث فهرسة النص الموجود داخل الرسومات، مما يفيد في تحسين السيو (SEO).

📝 كيفية إضافة SVG إلى صفحة HTML

هناك طريقتان رئيسيتان لإضافة رسومات SVG إلى مستند HTML الخاص بك. سنتعلم كليهما خطوة بخطوة.

الطريقة الأولى: استخدام وسم <img>

هذه هي أبسط طريقة، وتشبه تماماً إضافة أي صورة عادية. نستخدم الوسم <img> ونشير إلى ملف .svg في السمة src.

<!DOCTYPE html>
<html>
<head>
    <title>مثال SVG</title>
</head>
<body>
    <h1>شعار باستخدام وسم img</h1>
    <!-- إضافة صورة SVG من ملف خارجي -->
    <img src="logo.svg" alt="شعار الشركة" width="200">
</body>
</html>
  • src="logo.svg": مسار ملف SVG.
  • alt="شعار الشركة": نص بديل يصف الصورة (مهم للسيو وإمكانية الوصول).
  • width="200": تحديد عرض الصورة بالبكسل.

محدودية هذه الطريقة: لا يمكنك تغيير ألوان أو تفاصيل الشكل الداخلية باستخدام CSS إذا أضفت SVG بهذه الطريقة.

الطريقة الثانية: كتابة كود SVG مباشرة داخل HTML (Inline SVG) 🎯

هذه هي الطريقة الأقوى والأكثر مرونة. هنا نكتب كود SVG نفسه مباشرة بين وسوم <svg> و </svg> داخل ملف HTML.

<!DOCTYPE html>
<html>
<head>
    <title>SVG مباشر في HTML</title>
</head>
<body>
    <h2>رسم مباشر باستخدام SVG</h2>
    
    <!-- بداية كتلة SVG -->
    <svg width="200" height="200" style="border: 1px solid #ccc;">
        سوف نضع هنا أوامر رسم الأشكال
    </svg>
    <!-- نهاية كتلة SVG -->
    
</body>
</html>
  • <svg>: الوسم الرئيسي الذي يحدد بداية منطقة الرسم.
  • width="200" height="200": يحددان عرض وارتفاع منطقة الرسم (Viewport).
  • style="border: 1px solid #ccc;": إضافة إطار رمادي فاتح فقط لرؤية حدود منطقة الرسم بوضوح.

🟢 🟦 🟥 رسم الأشكال الأساسية داخل وسم <svg>

الآن، لنملأ منطقة الرسم الفارغة تلك بأشكال! سنتعلم ثلاثة أشكال أساسية.

1. رسم المستطيل <rect>

يستخدم لرسم المستطيلات والمربعات.

<svg width="200" height="200">
    <!-- رسم مستطيل -->
    <rect x="50" y="30" width="100" height="60" fill="blue" stroke="black" stroke-width="2"/>
</svg>
  • x="50": المسافة الأفقية من حافة منطقة SVG اليسرى إلى بداية المستطيل.
  • y="30": المسافة الرأسية من حافة منطقة SVG العلوية إلى بداية المستطيل.
  • width="100": عرض المستطيل.
  • height="60": ارتفاع المستطيل.
  • fill="blue": لون تعبئة الشكل من الداخل.
  • stroke="black": لون حدود (حدود) الشكل.
  • stroke-width="2": سماكة حدود الشكل.

2. رسم الدائرة <circle>

<svg width="200" height="200">
    <!-- رسم دائرة -->
    <circle cx="100" cy="100" r="50" fill="green" />
</svg>
  • cx="100": الإحداثي الأفقي لمركز الدائرة.
  • cy="100": الإحداثي الرأسي لمركز الدائرة.
  • r="50": نصف قطر الدائرة.
  • fill="green": لون التعبئة.

3. رسم الخط <line>

<svg width="200" height="200">
    <!-- رسم خط قطري -->
    <line x1="20" y1="20" x2="180" y2="180" stroke="red" stroke-width="3"/>
</svg>
  • x1="20" y1="20": إحداثيات نقطة بداية الخط.
  • x2="180" y2="180": إحداثيات نقطة نهاية الخط.
  • stroke="red": لون الخط (الخط ليس له تعبئة fill).
  • stroke-width="3": سماكة الخط.

🎨 تخصيص SVG باستخدام CSS

إحدى أعظم ميزات كتابة SVG مباشرة في HTML هي القدرة على التحكم بمظهرها عبر CSS، تماماً كما تتحكم بعناصر HTML الأخرى.

<!DOCTYPE html>
<html>
<head>
    <title>SVG مع CSS</title>
    <style>
        /* نستهدف الدائرة باستخدام محدد CSS */
        svg circle {
            fill: gold; /* تغيير اللون إلى ذهبي */
            stroke: darkorange; /* تغيير لون الحدود */
            stroke-width: 5px; /* زيادة سماكة الحدود */
            transition: fill 0.5s; /* إضافة تأثير انتقالي سلس */
        }
        /* تغيير اللون عند تمرير الماوس */
        svg circle:hover {
            fill: coral;
        }
    </style>
</head>
<body>
    <svg width="200" height="200">
        <circle cx="100" cy="100" r="80" />
    </svg>
</body>
</html>

جرب هذا المثال! ستلاحظ كيف يتفاعل الشكل مع حركة الماوس بسلاسة. هذا ما يجعل SVG خياراً رائعاً للزر والأيقونات التفاعلية.

💡 مثال عملي متكامل: رسم وجه مبتسم بسيط

لنطبق ما تعلمناه برسم شكل بسيط ومحبب.

<svg width="200" height="200" viewBox="0 0 200 200">
    <!-- الوجه (دائرة) -->
    <circle cx="100" cy="100" r="90" fill="yellow" stroke="black" stroke-width="2"/>
    
    <!-- العين اليسرى (دائرة صغيرة) -->
    <circle cx="70" cy="80" r="10" fill="black"/>
    
    <!-- العين اليمنى (دائرة صغيرة) -->
    <circle cx="130" cy="80" r="10" fill="black"/>
    
    <!-- الفم المبتسم (قوس باستخدام path - نتعلمه لاحقاً بشكل مبسط هنا) -->
    <path d="M 60 120 Q 100 180 140 120" stroke="black" stroke-width="3" fill="transparent"/>
</svg>

في هذا المثال:

  • استخدمنا viewBox لتعريف نظام الإحداثيات الداخلي (موضوع متقدم قليلاً، لكنه يساعد في التحجيم).
  • رسمنا الوجه كدائرة صفراء كبيرة.
  • رسمنا عينين بدائرتين سوداوين صغيرتين.
  • رسمنا الفم باستخدام وسم <path> الذي يرسم مسارات معقدة. لاحظ الأمر d الذي يحتوي على أوامر الرسم. (سنتعمق في <path> في دروس متقدمة).

🧠 ملخص الدرس

تهانينا! 🎉 لقد تعلمت اليوم أساسيات قوية:

  • ما هي SVG ولماذا هي مميزة (رسومات متجهة قابلة للتكبير).
  • طريقتين لإضافة SVG: عبر <img> أو كتابة الكود مباشرة (<svg>).
  • كيفية رسم أشكال أساسية: المستطيل <rect>، الدائرة <circle>، والخط <line>.
  • كيفية تخصيص هذه الأشكال باستخدام خصائص SVG (مثل fill, stroke) وأيضاً باستخدام CSS.
  • طبقت كل ذلك في مثال عملي لرسم وجه مبتسم.

تذكر أن هذا هو مجرد البداية. عالم SVG واسع ويحتوي على المزيد من الأشكال مثل <ellipse> (بيضاوي)، <polygon> (مضلع)، والوسم القوي <path> لرسم أي شكل يمكنك تخيله!