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

By


تدعم لغة 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>



ليست هناك تعليقات:

إرسال تعليق