انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: عناصر Picture وSVG في لغة HTML

Inline SVG vs Image Element تضمين رسوميات SVG المباشرة والمدمجة

احترف عناصر Picture و SVG في HTML: التوجيه الفني للصور المتجاوبة، استعلامات media، تبديل الصيغ AVIF و WebP، رسم أشكال SVG وتنسيقها بالـ CSS والتعقيم الأمني ضد ثغرات XSS.
5 صفوف تعليمية
لغة HTML
0 مشاهدة

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

الصف 1 شرح توضيحي
يمكن إدراج رسوميات SVG في مستندات HTML بطريقتين هندسيتين مختلفتين تماماً: الطريقة الأولى هي تضمين ملف خارجي عبر وسم الصور المعتاد <img>، والطريقة الثانية هي التضمين المباشر لشفرة SVG داخل شفرة صفحة HTML نفسها (Inline SVG Markup).
الصف 2 شرح توضيحي
المعيار والمقارنة تضمين SVG المباشر (Inline SVG) استدعاء خارجي عبر وسم img
طلبات الشبكة HTTP 0 طلبات إضافية (مدمج في كود الصفحة) طلب HTTP منفصل لتنزيل ملف SVG
التحكم والتلوين عبر CSS تحكم كامل بالألوان والحدود والتأثيرات محدود جداً ولا يمكن تلوين العناصر الداخلية
كاش المتصفح Browser Cache يُعاد تنزيله مع كود الصفحة دائماً يُخزن مؤقتاً في الكاش ويسهل إعادة استخدامه
العزل الأمني والتنفيذ يعمل في سياق الصفحة ويتطلب تعقيماً أمنياً معزول في صندوق آمن ويعطل السكربتات تلقائياً
الصف 3 كود برمجي
HTML 
<svg width="120" height="40" viewBox="0 0 120 40">
  <rect width="120" height="40" rx="8"
        fill="#7750b2"/>
  <text x="60" y="25" text-anchor="middle"
        fill="#ffffff" font-size="14">
    CloseTag
  </text>
</svg>
جرّب بنفسك
الصف 4 معاينة حية
الصف 5 ملاحظة هامة

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