More

[ دورة HTML5 ] الدرس التاسع – الرسم من خلال SVG

What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()

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


 تدعم لغة HTML5 طريقة الرسم باستخدام SVG . ماهو SVG ؟ ان 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 : نجمة خماسية

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

<!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

<svg height="200">

<g>

<ellipse cx="100" cy="100" rx="90" ry="50"
stroke="black" stroke-width="3" fill="orange">
</g>
</svg>
اكتب الكود بنفسك

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

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

<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>
اكتب الكود بنفسك
You may also like  فيلم حلاوة روح بجودة HDRIP
What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()


Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker
Inline
Inline