بحب أستخدم صور الـSVG بدل الـPNG، في الغالب لو مفيهاش تفاصيل كتير بتبقى حجمها أقل ومش بتبكسل مع مختلف أحجام الشاشات، فـ في الـImage Element بدل ما بضيف صورة PNG بضيف صورة SVG وبارك الله فيما رزق
ولكن من المميزات التانية للـSVG، هي إمكانية التعديل عليها والتلاعب فيها من خلال الـCSS والـJS، ولما بتضيفها للـImage Attribute حرفيًا انت بتموت كل الإمكانيات دي! الصورة بتتعامل زي أي صورة PNG عادية جدًا من ناحية التعديل أو الـManipulation.
وهنا كان الحل، استخدام الـObject Element، اللي من خلاله تقدر تحدد نوع الـObject ده ايه، وتطبق عليه Attributes مهمة تقدر تساعدك في الوصول للشكل المطلوب، والأهم من ده كله هو انك هنا تقدر تعدل على الـSVG بحرية تامة!
من الحاجات الجديرة بالذكر إنه من الـBest Practice تحديد الـWidth والـHeight سواء على الـImage Element أو الـObject Element، لأن الـSVG بطبيعته Scalable وممكن ياخد معاك عرض الشاشة كلها عادي جدًا 😂
وبس كدة، ده الموضوع ببساطة.
الجينيص
HTML5 Notes
الجينيص