مدونة إحترف برمجة المواقع مع الأخ برحاب زكرياء

الأحد، 1 أكتوبر 2017

الدرس 09 : الرسم من خلال SVG

الدرس 09 : الرسم من خلال SVG

الرسم من خلال SVG



تدعم لغة HTML5 طريقة الرسم باستخدام SVG .



ماهو SVG ؟


  • ان SVG هو اختصار لرسومات فيكتور متغيرة الحجم .

  • تستخدم SVG لتعريف الصور و التي هي من نوع فيكور (عكس بيت ماب bitmap) المستخدمة في الويب .

  • تستخدم SVG مع تقنيات لغة XML .

  • لاتفقد صور SVG جودتها عند تكبير الصورة بعكس صور من نوع bitmap مثل jpg و png و gif .

  • كل عنصر موجود داخل ملف SVG يمكن تحريكه .

  • تعتبر لغة SVG إحدى التقنيات المطورة من خلال منظمة الويب العالمية W3C .

المزايا الخاصة عند استخدام SVG


سنقدم لكم بعض المزايا عند استخدام SVG مقارنة مع الصيغ الأخرى للصور مثل jpg وهي :

  •  يمكن إنشاء و تعديل صور SVG من خلال برنامج محرر نصوص .

  • يمكن البحث عن صور SVG و فهرستها و كتابتها بالكود فقط و ضغطها .

  • تعتبر صور SVG متغيرة الحجم .

  • يمكن طباعة صور SVG بجودة و دقة عالية .

  • يمكن تكبير صور SVG بشكل كبير دون أن يتغير دقة و جودة الصورة .

المتصفحات الداعمة



جميع المتصفحات الحديثة تدعم خاصية SVG .

إرفاق كود SVG مباشرة الى صفحات HTML


باستخدام لغة HTML5 يمكن إرفاق كود SVG مباشرة الى صفحات HTML :

مثال 1 : نجمة خماسية



<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

<polygon points="100,10 40,180 190,60 10,60 160,180"

style="fill:red;stroke:orange;stroke-width:5;fill-rule:evenodd;" />

</svg>

</body>
</html>




مثال 2 : دائرة بيضوية



<svg height="200">

<g>

<ellipse cx="100" cy="100" rx="90" ry="50"
stroke="black" stroke-width="3" fill="orange">
</g>
</svg>



مثال 3 : شكل سداسي الأضلاع



<svg width="300" height="350">

<g>

<polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"

stroke="black" stroke-width="3" fill="rgb(121,0,121)">

</g>

</svg>

بإمكانك إدراج الأكواد الغير قابلة لنشر بتحويله عبر محول الأكواد لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى" عبّر عن تعليقكالإبتسامات

التسميات

إتصل بنا
كن صديقًا لنا