كيفية استخدام ايقونات svg في صفحات الويب

للأيقونات أهمية كبيرة في تصميم مواقع الويب، واستخدام الأيقونات في مواقع الويب أصبح شيء أساسي لا يمكن تجاهله، وتوجد العديد من الطرق لتضمين الأيقونات في صفحات الويب، ومنها الصور العادية ولكن حجمها يؤثر على أداء الموقع وسرعته، وكذلك خطوط الأيقونات ولكن لا يمكن استخدام أكثر من لون واحد في الأيقونة، لهذا البديل الرائع هو استخدام ايقونات SVG.

ايقونات وصور SVG هي عبارة عن ملفات رسومية متجهة ، وهي اختصار للمصطلح (Scalable Vector Graphics) مبنية بصيغة XML ، بمعنى اخر هي عبارة عن مجموعة من الاشكال الهندسية ، وكل شكل يحتوي على مجموعة من الخصائص التي تتحكم بتنسيق الشكل كالعرض والإرتفاع والألون وغيرها من الخصائص ، وعدد من الفلاتر وعناصر تأثيرات الحركة ، بالإضافة الى ذلك يتم تنسيقها بواسطة اكواد CSS ، ويمكن تعديلها بشكل آني بواسطة الجافا سكريبت ، وتتمتع بمرونة عالية ، وتدعم جميع المتصفحات الحديثة ، حيث استخدام صور SVG في الويب له مستقبل كبير ، وذلك لاعتماده كمعيار رسمي للرسوم المتجهة في صفحات الويب من قبل اتحاد الويب W3C.

تتميز ايقونات وصور SVG عن الصور العادية (jpg, png, gif) انها خفيفة جدا وصغيرة الحجم مع إمكانية تكبيرها الى ما لانهاية دون التأثير على جودة الصورة او حجمها ، بعكس الصور العادية التي تعتمد على عدد البكسلات الموجودة في الصورة وهذا يحد من إمكانية تكبير الصورة ، بالإضافة الى ذلك يمكن تغيير شكلها والوانها بشكل آني باستخدام الجافا سكربت و CSS ، لهذا استخدامها في صفحات الويب يوفر الكثير من البيانات ، وهذا ما يحقق اهم عامل من عوامل هندسة البرمجيات والسيو وهو أداء وسرعة الموقع ، أيضا يمكن عمل تأثيرات الحركة عليها ، كالصور المتحركة و الفلاش.

حيث يمكن رسم الصور المتجهة SVG بواسطة اكواد XML ، ولمعرفة المزيد عن كيفية انشاءها بالأكواد من هنا SVG Tutorial  على موقع w3schools.com ، أيضا توجد العديد من البرامج لرسمها والتي منها الإليستراتور وبديله البرنامج المجاني Inkscape ، بالإضافة الى ذلك توجد العديد من الأيقونات المجانية على الانترنت ، وهذا موقع يحتوي على كم هائل من الأيقونات freepik.com

لنفرض ان لدينا شعار الفيسبوك وهذه أكواد SVG الخاصة به :
<svg enable-background='new 0 0 28 28' height='100px' id='fbicon' version='1.1' viewBox='0 0 28 28' width='100px' x='0px' xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0px'>
<path d='M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434
c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726
c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z'/>
</svg>

حيث توجد طريقتين لاستخدامها في صفحات الويب :
الطريقة الأولى : استخدامها كصورة في اكواد HTML ، ضع اكواد SVG بملف منفصل بإمتداد svg ، وقم بإستدعاءه كصورة عادية كالتالي:
<img src="svgimg.svg"/>
ولكن من عيوب هذه الطريقة عدم القدرة على التحكم الكامل بخصائص الصورة.

الطريقة الثانية : وهي تضمين الأيقونة بين اكواد HTML ، واسناد id لها ، والتحكم الكامل بخصائص الأيقونة سواءا لونها او غيره من الخصائص ، بواسطة جافا سكريبت و CSS وهذا مثال بسيط على ذلك ، حيث يتم تغيير لون الأيقونة عند مرور الماوس عليها ايضا يتم تغيير اللون الى الأسود عند النقر عليها:
<!DOCTYPE html>
<html>
<head>
<style>
#fbicon{
height:400px;
width:400px;
fill:#0777bb;
}
#fbicon:hover{fill:#b7d1d7}
</style>
</head>
<body>
<svg enable-background='new 0 0 28 28' height='100px' id='fbicon' version='1.1' viewBox='0 0 28 28' width='100px' x='0px' xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0px'>
<path d='M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434
c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726
c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z'/>
</svg>
<script>
document.getElementById("fbicon").onclick =  function(){this.style.fill= "#000";}
</script>
</body>
</html>


كانت هذه نبذه تعريفية بسيطة عن تضمين ملفات svg في صفحات الويب ، وان شاء الله سيتم شرح طريقة انشاء صور وايقونات svg بالاكواد في تدوينة أخرى.
مواضيع ذات صلة

0 اترك تعليقاً...