SVG في HTML
سابقاً طلب المشروع المصغر موقعاً شخصياً صغيراً. هذا الدرس يبدأ مساراً اختيارياً للرسوم. SVG يتيح لـ HTML رسم أيقونات وأشكال حادة بالرياضيات لا بالبكسل. النطاق عملي: كيف تضع SVG في الصفحة — لا دورة تصميم كاملة.
لماذا SVG في دورة HTML
صور الرستر تتلاشى عند التكبير. SVG يصف مسارات وأشكالاً فتبقى حادة. المبتدئ يقابل SVG كأيقونة رأس أو شارة بسيطة. معرفة التضمين المضمّن مقابل الملف تبقي الصفحات خفيفة ومتاحة.
إجابة مباشرة
1) مضمّن: ضع شجرة svg في HTML. 2) ملف: احفظ .svg وحمّله بـ img مع alt. 3) فضّل المضمّن لتنسيق CSS/JS أو تسمية دقيقة. 4) فضّل img للشعارات الثابتة. 5) سمِّ الرسوم ذات المعنى. 6) هذه الدورة للتضمين فقط.
📊 SVG embedding beginners use
| Choice | What it does | Beginner tip |
|---|---|---|
| Inline svg | Shapes live in the HTML tree | Easy to style and label in-page |
| img to .svg | Treats SVG like an image file | Simple for static logos |
| viewBox | Maps SVG coords to the viewport | Keep width/height + viewBox aligned |
| Accessible name | alt or aria-label on meaningful art | Empty name only if truly decorative |
| Scales cleanly | Vectors stay sharp when resized | Great for icons and UI marks |
| Not a photo format | Photos stay JPEG/PNG/WebP | Use SVG for shapes/icons, not camera shots |
SVG مضمّن صغير
SVG المضمّن مجرد وسم. دائرة مع viewBox واسم متاح تُظهر مهمة HTML: المتصفح يرسم؛ أنت تتحكم بالحجم والمعنى.
<svg width="80" height="80" viewBox="0 0 80 80" role="img" aria-label="Green circle">
<circle cx="40" cy="40" r="32" fill="#2a7"></circle>
</svg>
قراءة المثال المضمّن
- svg جذر الرسم
- width/height صندوق التخطيط؛ viewBox الإحداثيات
- circle شكل ابن
- role=img مع aria-label يسمّي الرسم
- تغيير الحجم يبقى حاداً
- المشروع المصغر استخدم img للصور؛ هنا يمكن أن تكون الصورة وسماً
SVG كملف صورة
عندما يوجد logo.svg عامله كوسائط: src وalt مفيد. يجب أن يطابق المسار مجلدك.
<img src="images/logo.svg" alt="Site logo" width="120">
قراءة نمط الملف
- src يشير إلى ملف svg
- alt يحمل الاسم المتاح
- width يتحكم بالحجم؛ المتجهات تتحجم نظيفاً
- CSS ينسّق صندوق img بسهولة أقل من المضمّن
- أعد استخدام ملف واحد عبر الصفحات
- الدرس التالي canvas يرسم ببكسل JS — أداة مختلفة
اختيار مضمّن مقابل ملف
- أيقونة تريد تلوينها بـ CSS: غالباً مضمّن
- شعار ثابت متعدد الصفحات: img
- صور الكاميرا: رستر لا SVG
- رسم ضخم مضمّن: فضّل ملفاً
- رسم ذو معنى: سمِّه دائماً
- تأليف SVG العميق: لمسار لاحق
تمرين — SVG في الصفحة
- الصق الدائرة؛ تأكد من الظهور.
- غيّر width/height — تبقى حادة.
- حمّل .svg بـ img+alt.
- أزل aria-label/alt مؤقتاً.
- أضف الأيقونة بجانب عنوان في نسخة الصفحة الرئيسية.
- جملة: SVG وسم أو ملف متجه — ليس بديلاً للصور.
- التالي canvas للرسم بالسكربت.
أخطاء سهلة
- نسيان الأسماء المتاحة على SVG ذي المعنى
- لصق أشجار SVG ضخمة مضمّنة
- استخدام SVG للصور الفوتوغرافية
- حذف viewBox ثم الارتباك عند التحجيم
- خلط SVG مع canvas
- اعتبار المقدمة دورة تصميم كاملة
- إهمال عادات المشروع المصغر
ملخص
- SVG يرسم أشكالاً وأيقونات مستقلة عن الدقة
- ضمّن بـ svg أو حمّل ملفاً بـ img
- سمِّ الرسوم ذات المعنى
- المتجهات تتحجم؛ الصور تبقى رستر
- المشروع المصغر كان بناء موقع؛ هنا يبدأ مسار الرسوم
- التالي: canvas في HTML
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى