ومنها الصور العادية ولكن حجمها يؤثر على أداء الموقع وسرعته، وكذلك خطوط الأيقونات ولكن لا يمكن استخدام أكثر من لون واحد في الأيقونة، لهذا البديل الرائع هو استخدام ايقونات SVG.
ماهي ايقونات وصور SVG؟
ايقونات وصور SVG هي عبارة عن ملفات رسومية متجهة ، وهي اختصار للمصطلح (Scalable Vector Graphics) مبنية بصيغة XML ، بمعنى اخر هي عبارة عن مجموعة من الاشكال الهندسية.
وكل شكل يحتوي على مجموعة من الخصائص التي تتحكم بتنسيق الشكل كالعرض والإرتفاع والألون وغيرها من الخصائص ، وعدد من الفلاتر وعناصر تأثيرات الحركة ، بالإضافة الى ذلك يتم تنسيقها بواسطة اكواد CSS ، ويمكن تعديلها بشكل آني بواسطة الجافا سكريبت ، وتتمتع بمرونة عالية ، وتدعم جميع المتصفحات الحديثة.
حيث استخدام صور SVG في الويب له مستقبل كبير ، وذلك لاعتماده كمعيار رسمي للرسوم المتجهة في صفحات الويب من قبل اتحاد الويب W3C.
ماهي مميزات ايقونات وصور SVG؟
تتميز ايقونات وصور SVG عن الصور العادية (jpg, png, gif) انها خفيفة جدا وصغيرة الحجم مع إمكانية تكبيرها الى ما لانهاية دون التأثير على جودة الصورة او حجمها.
بعكس الصور العادية التي تعتمد على عدد البكسلات الموجودة في الصورة وهذا يحد من إمكانية تكبير الصورة ، بالإضافة الى ذلك يمكن تغيير شكلها والوانها بشكل آني باستخدام الجافا سكربت و CSS ، لهذا استخدامها في صفحات الويب يوفر الكثير من البيانات ، وهذا ما يحقق اهم عامل من عوامل هندسة البرمجيات والسيو وهو أداء وسرعة الموقع.
أيضا يمكن عمل تأثيرات الحركة عليها ، كالصور المتحركة و الفلاش.
حيث يمكن رسم الصور المتجهة SVG بواسطة اكواد XML ، ولمعرفة المزيد عن كيفية انشاءها بالأكواد من هنا SVG Tutorial على موقع w3schools.com.
حيث يمكن رسم الصور المتجهة SVG بواسطة اكواد XML ، ولمعرفة المزيد عن كيفية انشاءها بالأكواد من هنا SVG Tutorial على موقع w3schools.com.
أيضا توجد العديد من البرامج لرسمها والتي منها الإليستراتور وبديله البرنامج المجاني
Inkscape
، بالإضافة الى ذلك توجد العديد من الأيقونات المجانية على الانترنت ، وهذا موقع يحتوي على كم هائل من الأيقونات
freepik.com
لنفرض ان لدينا شعار الفيسبوك وهذه أكواد SVG الخاصة به :
لنفرض ان لدينا شعار الفيسبوك وهذه أكواد 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>اقرأ ايضاً: افضل المواقع لتحميل قوالب وتصاميم مواقع HTML5 وCSS3 جاهزة مجانا
طريقتين لاستخدام ايقونات وصور SVG في صفحات الويب
الطريقة الأولى : استخدامها كصورة في اكواد HTML
ضع اكواد SVG بملف منفصل بإمتداد svg ، وقم بإستدعاءه كصورة عادية كالتالي:
<img src="svgimg.svg"/>الطريقة الثانية : وهي تضمين الأيقونة بين اكواد HTML
واسناد id لها او كلاس ، والتحكم الكامل بخصائص الأيقونة سواءا لونها او غيره من الخصائص ، بواسطة جافا سكريبت و CSS وهذا مثال بسيط على ذلك ، حيث يتم تغيير لون الأيقونة عند مرور الماوس عليها ايضا يتم تغيير اللون الى الأسود عند النقر عليها:
اقرأ ايضا:
اضف ايقونات رائعة الى موقعك بواسطة Font-Awesome
كانت هذه نبذه تعريفية بسيطة عن تضمين ملفات svg في صفحات الويب ، وان شاء الله سيتم شرح طريقة انشاء صور وايقونات svg بالاكواد في تدوينة أخرى.
<!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 بالاكواد في تدوينة أخرى.