تصميم صور SVG باستخدام CSS: نهج جديد

في هذه المقالة، سنستكشف طريقة جديدة لتضمين صور SVG ومعالجة مظهرها باستخدام CSS، دون توظيف أطر عمل JS-SVG.

بيان المشكلة

في السابق، كان دمج صور SVG مع الحفاظ على الوصول إلى عناصرها من خلال CSS يمثل تحديًا. في حين أن أطر عمل JS-SVG تقدم حلولاً، إلا أنها يمكن أن تكون معقدة بالنسبة لتطبيقات الأيقونات البسيطة مع تأثيرات التمرير.

الحل: استبدال صورة jQuery SVG

يتضمن حلنا المقترح استبدال علامة التقليدية مع فئة "svg". تقوم هذه الفئة بتشغيل برنامج نصي jQuery يجلب كود SVG المضمن من المصدر المحدد ويدرجه في HTML.

يحتفظ كود jQuery أيضًا بمعرف وفئات الصورة الأصلية، مما يضمن التوافق مع قواعد CSS.

المزايا والتنفيذ

يوفر هذا النهج العديد من المزايا:

• تصميم CSS سهل: يمكن الآن الوصول إلى عناصر SVG عبر CSS، مما يسمح بذلك تغييرات اللون والتعديلات الأخرى.
• التوافق عبر المستعرضات: الطريقة مدعومة من قبل المتصفحات الرئيسية.
• البساطة: الكود موجز و واضحة، بدون تعقيدات أطر عمل JS-SVG.

لتنفيذ هذا الحل:

1. استخدم كود HTML التالي لتضمين SVG:

2. قم بتضمين كود jQuery في مشروعك :

jQuery('img.svg').each(function() {
  // ... (jQuery code to replace the image with inline SVG) ...
});

مثال واستنتاج

يمكنك مشاهدة العرض التوضيحي على http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html. توفر هذه الطريقة طريقة مريحة وفعالة لتضمين صور SVG وتصميمها في تطبيقات الويب الخاصة بك.