تعتبر SVG من افضل الحلول المقدمة لمطوري الويب لكي تظهر الايقونات المستعملة في التصاميم بدقة عالية على مختلف الاجهزة ، تلفاز حاسوب لوحي ،هاتف ... ، لكن المشكل الذي يواجهه معضم المطورين هو التخوف من عدم ظهور الايقونات في المتصفحات القديمة و بالتالي عدم رضى فئة لا بأس بها من العملاء الذين لا زالو في العصور الوسطى ( ارجو ان اتلقى نقدا على هاته النقطة ههه) .
لحل هاته المشكل توجد مجموعة من الطرق كاستعمال Modernizer للتأكد من دعم المتصفح للSVG و في حالة عدم وجوده يتم اظهار تغيير الرابط الى ايقونة اخرى
بصيغة PNG بالاضافة الى مجموعة من الطرق الاخرى .
الطريقة التي سأقدم لكم هي طريقة سهلة وبسيطة و لاتحتاج الى اي مكتبات برمجية ، وتعمل فقط بواسطة CSS ،ليس عليك سوى استعمال الكود التالي :
.my-element {
background-image: url(fallback.png);
background-image: url(image.svg), none;
}
كما تلاحظون قمنا باضافة الصورة كخلفية مرتين الأولى يصيغة PNG و الثانية بصيغة SVG ، سبب قيامنا بذلك هو ان المتصفحات التي لا تدعم SVG لحسن حظنا لا تدعم خاصية خلفيات CSS المتعددة وبالتالي لن يقوم المتصفح سوى بتحميل الصورة الاولى بصيغة PNG ، أما في حالة دعم SVG ستظهر الصورة الثانية بصيغة SVG.
التعليقات