دروس HTML5 الأساسية

API HTML5

وسائط HTML5

رسومات HTML5

MathML في HTML5 كائن الرسوم البيانية في HTML5

SVG المدمج في HTML5

يدعم HTML5 SVG المدمج. يمكن تضمين ملفات SVG في مستند HTML باستخدام العلامات التالية: <embed>, <object> أو <iframe> (تعتبر embed وiframe أنواعاً من إطارات التضمين)، يمكن من خلال هذه العلامات تضمين كود SVG مباشرة في صفحة HTML، أو يمكننا أيضًا ربط مباشرة إلى ملف SVG.

ما هو SVG؟

SVG هو اختصار لـ Scalable Vector Graphics (مجسمات متجهية قابلة للتعديل)
يستخدم SVG لتحديد الرسومات المتجهية القائمة على الشبكة.
يستخدم SVG تنسيق XML لتحديد الرسومات.
لا تتأثر جودة صور SVG عند تكبيرها أو تغيير حجمها.
SVG هو معيار من قبل تحالف الويب العالمي.

مزايا SVG

مقارنة بالأنماط الأخرى للصور (مثل JPEG وGIF)، يوجد مزايا استخدام SVG هي:

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

دعم المتصفح

يستند Internet Explorer 9+، Firefox، Opera، Chrome، وSafari على دعم SVG المدمج.

تضمين SVG مباشرة في صفحة HTML

في HTML5، يمكنك تضمين عنصر SVG مباشرة في صفحة HTML:

مثال

<!DOCTYPE html><html>
<head>　
<meta　charset="utf-8">　
<title>موقع دروس الأساس (oldtoolbag.com)</title>　
</head>
<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="ملء:لون الزمرد;إطار:لون البنفسجي;عرض الإطار:5;قاعدة الملء:الغير متناوبة">
</svg>
　
</body>
</html>

اختبار لرؤية ‹/›

نتيجة التنفيذ كما يلي:

استخدام SVG لرسم الدوائر

مثال

!doctype　html
<html>
<head>
<meta　charset="utf-8">
<title>استخدام SVG لرسم الدوائر oldtoolbag.com</title>
</head>
<body>
　　　　<svg　xmlns="http://www.w3.org/2000/svg"　height="500px"　width="500px"　version="1.1">
　　　　　　<circle　cx="200"　cy="100"　r="100"　stroke="#afeedd"
　　　　　　stroke-width="5"　fill="#f0ddff"　/>
　　　　</svg>
</body>
</html>

اختبار لرؤية ‹/›

في علامة <svg>،الارتفاعوعرضالخصائص تضبط العرض والارتفاع للوثيقة SVG،versionالخصائص يمكن استخدامها لتحديد إصدار SVG المستخدم،xmlns الخصائص يمكن استخدامها لتحديد اسم النطاق SVG؛
<circle> هو علامة SVG تستخدم لإنشاء دوائر،cx و cy إعداد يحدد مركز الدائرة، x و y المواضع، إذا تم تجاهل هذين الخصائص، فإن نقطة الدائرة ستكون في (0, 0)،القطرإعداد يحدد قطر الدائرة؛
رسم و عرض خط إعداد يتحكم في كيفية عرض حواف الشكل،ملء إعداد الألوان داخل الشكل؛
لننظر في شكل العرض المميز:

رسم المثلثات باستخدام SVG

مثال

!doctype　html
<html>
<head>
<meta　charset="utf-8">
<title>رسم المثلثات باستخدام SVG　oldtoolbag.com</title>
</head>
<body>
　　　　<svg　xmlns="http://www.w3.org/2000/svg"　width="500px"　height="500px"　version="1.1">
　　　　　　<rect　x="50"　y="100"　width="300"　height="150"
　　　　　　style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/>
　　　　</svg>
</body>
</html>

اختبار لرؤية ‹/›

الفرق بين SVG و Canvas

SVG هو لغة يستخدم XML لوصف الرسوم ثنائية الأبعاد.

يتم رسم الرسوم ثنائية الأبعاد باستخدام JavaScript في Canvas.

SVG مبني على XML، مما يعني أن كل عنصر في DOM SVG متاح. يمكنك ربط معالج أحداث JavaScript مع عنصر معين.

في SVG، كل شكل مُرسم يُعتبر كائنًا. إذا تغيرت خصائص كائن SVG، فإن المتصفح يمكنه إعادة إنشاء الشكل تلقائيًا.

يتم الرسم في Canvas بشكل بكسلي. بمجرد انتهاء رسم الشكل في Canvas، فإنه لا يتم متابعته من قبل المتصفح. إذا تغير موقع الشكل، فإنه يجب إعادة رسم المشهد بأكمله، بما في ذلك أي عنصر قد يكون مغطى بالشكل.

مقارنة بين Canvas و SVG

في الجدول أدناه، يُظهر بعض الاختلافات بين Canvas و SVG.

Canvas	SVG
يعتمد على الدقة لا يدعم معالج الأحداث قدرة ضعيفة في رسم النصوص يمكن حفظ الصور الناتجة بصيغة .png أو .jpg أكثر ملاءمة للعبة التي تحتوي على العديد من الأجسام التي يتم رسمها بشكل متكرر	لا يعتمد على الدقة دعم معالج الأحداث أكثر ملاءمة للتطبيقات التي تحتوي على منطقة كبيرة للرسم (مثل Google Maps) ارتفاع التعقيد يؤدي إلى بطء التشغيل (لا يستخدم أي تطبيق DOM بشكل كبير) غير مناسب للعبة

MathML في HTML5 كائن الرسوم البيانية في HTML5