إتاحة رسوميات SVG وتنسيقها | عناصر Picture وSVG في لغة HTML

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

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

نظراً لأن وسم <svg> المباشر لا يمتلك خاصية alt بطبيعته، فإن تحقيق معايير الإتاحة يعتمد على العناصر الوصفية الداخلية. يتم ذلك بوضع عنصري <title> و <desc> في مطلع كود الرسم مباشرة داخل وسم <svg> لتتعرف قارئات الشاشة على عنوان الشكل ووصفه بدقة.

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

HTML

<svg width="48" height="48" viewBox="0 0 24 24">
  <title>Shield Protection</title>
  <desc>An active security shield</desc>
  <path d="M12 2L3 7v6c0 5 9 9 9 9s9-4 9-9V7l-9-5z"
        fill="currentColor"/>
</svg>

جرّب بنفسك

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

يُمثل استخدام القيمة الذكية fill="currentColor" في أشكال SVG ممارسة احترافية كبرى؛ حيث تجعل الرسم يرث لونه تلقائياً من لون النص المحيط به في CSS (Color Inheritance). يتيح ذلك توافقاً فورياً مع الوضعين الفاتح والداكن دون الحاجة لكتابة كود إضافي.

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

SVG Accessibility and CSS Styling إتاحة رسوميات SVG وتنسيقها

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

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