❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <svg>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

نستخدم الوسم <svg> لإعلام المتصفح أننا سنعرض رسومات SVG ( Scalable Vector Graphics ) بداخله في الصفحة.
بداخل هذا الوسم يمكن استخدام وسوم جاهزة لعرض الرسومات الثنائية الأبعاد على إختلاف أنواعها مثل الصور العادية, الخطوط, المربعات, المثلثات, الدوائر إلخ..


مميزات رسومات SVG

  • كل جزئية بداخل الرسم يمكن إضافة مؤثرات لها.
  • الرسومات تظهر بجودة عالية مهما كان حجم الشاشة صغيراً أو كبيراً.
  • مهما قام المستخدم بتكبير الشاشة فإنها تحافظ على جودتها.
  • في حال طباعتها فإنها تظهر بجودة عالية مهما كان الحجم المراد اعتماده.
  • يمكن تعديل محتواها بواسطة محررات النصوص العادية أو بواسطة برامج الرسم.
  • محتوى الرسومات يتم كتابته بأسلوب XML و لهذا يمكن التعديل عليها بسهولة.

الوسوم المجهزة للرسم

الوسوم التالية يمكن إضافتها بداخله مع تحديد خصائصها لرسم الأشكال الهندسية التي ستشكل في النهاية الرسم الذي يتم عرضه بواسطة الوسم <svg>.

الوسم إستخدامه
<rect> لعرض مستطيل.
<cricle> لعرض دائرة.
<ellipse> لعرض شكل بيضاوي.
<line> لعرض خط مستقيم أو منحني.
<polyline> لعرض شكل مغلق يتكوّن من مجموعة نقاط متصلة ببعضها, حيث يتم وضع خط يصل كل نقطة تم وضعها فيه بالنقطة الموضوعة بعدها و في النهاية يتم وضع خط بين أول و آخر نقطة لكي يتم إغلاقه.
<polygon> لعرض شكل مفتوح يتكوّن من مجموعة نقاط متصلة ببعضها, يتم وضع خط يصل كل نقطة تم وضعها فيه بالنقطة التالية الموضوعة بعدها.
<path> لتحديد المسار الذي سيتم على أساسه رسم شكل محدد.
<text> لعرض نص.

معلومة تقنية

إفتراضياً يتم تخصيص مساحة يبلغ طولها 150 بكسل و عرضها 300 بكسل له حتى ترسم بداخلها و بالطبع يمكنك تحديد حجمها و عرضها بالحجم المناسب.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <svg>.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
4 12 2 10 3.2 3 87 83 12 3.2 4

خصائصه


الخاصية height

نضيفها للوسم لتحديد كم سيكون طوله في الصفحة, و الرقم الذي تمرره لها كقيمة يمثل الطول بالبكسل ( Pixel ).

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
87 12 84 72 14.3 81 87 83 59 14.3 13.0


الخاصية width

نضيفها للوسم لتحديد كم سيكون عرضه في الصفحة, و الرقم الذي تمرره لها كقيمة يمثل العرض بالبكسل ( Pixel ).

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
87 12 84 72 14.3 81 87 83 59 14.3 13.0

إستخدامه

في المثال التالي قمنا بإضافة وسم <circle> في الوسم <svg> لعرض دائرة بداخله.

المثال الأول

<svg height="200" width="200">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="cadetblue" />
Your browser does not support the svg tag!
</svg>
<svg height="200" width="200"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="cadetblue" /> Your browser does not support the svg tag! </svg>

جرب الكود



في المثال التالي قمنا بإضافة وسم <rect> في الوسم <svg> لعرض مربع بداخله.

المثال الثاني

<svg height="200" width="200">
<rect x="20" y="20" width="120" height="60" stroke="black" stroke-width="4" fill="cadetblue" />
Your browser does not support the svg tag!
</svg>
<svg height="200" width="200"> <rect x="20" y="20" width="120" height="60" stroke="black" stroke-width="4" fill="cadetblue" /> Your browser does not support the svg tag! </svg>

جرب الكود



في المثال التالي قمنا بإضافة وسم <polygon> في الوسم <svg> لعرض مثلث بداخله.

المثال الثالث

<svg height="200" width="200">
<polygon points="20,130 80,20 140,130" stroke="black" stroke-width="4" fill="cadetblue" />
Your browser does not support the svg tag!
</svg>
<svg height="200" width="200"> <polygon points="20,130 80,20 140,130" stroke="black" stroke-width="4" fill="cadetblue" /> Your browser does not support the svg tag! </svg>

جرب الكود



في المثال التالي قمنا بإضافة وسم <polygon> في الوسم <svg> لعرض نجمة بداخله.

المثال الرابع

<svg height="200" width="200">
<polygon points="20,80 90,80 120,20 150,80 220,80 160,120 190,190 120,150 45,190 80,120"
stroke="black" stroke-width="4" fill="cadetblue" />
Your browser does not support the svg tag!
</svg>
<svg height="200" width="200"> <polygon points="20,80 90,80 120,20 150,80 220,80 160,120 190,190 120,150 45,190 80,120" stroke="black" stroke-width="4" fill="cadetblue" /> Your browser does not support the svg tag! </svg>

جرب الكود



في المثال التالي قمنا بإضافة وسم <ellipse> يليه وسم <circle> يليه وسم <text> يليه وسم <animate> في الوسم <svg> لعرض شكل بيضاوي لونه أسود, فوقه دائرة صغيرة بيضاء, فوقها النص و من ثم جعل الدائرة البيضاء تستمر في الحركة خلف النص.

المثال الخامس

<svg height="200" width="300">
<ellipse cx="150" cy="60" rx="140" ry="55" />
<circle id="white-circle" cx="40" cy="60" r="20" fill="white" />
<text fill="cadetblue" font-size="30" font-family="Verdana" x="30" y="70">HARMASH.COM</text>
<animate xlink:href="#white-circle" attributeName="cx" dur="4s" repeatCount="indefinite"
values="40; 250; 40;" keyTimes="0; 0.5; 1" />
Your browser does not support the svg tag!
</svg>
<svg height="200" width="300"> <ellipse cx="150" cy="60" rx="140" ry="55" /> <circle id="white-circle" cx="40" cy="60" r="20" fill="white" /> <text fill="cadetblue" font-size="30" font-family="Verdana" x="30" y="70">HARMASH.COM</text> <animate xlink:href="#white-circle" attributeName="cx" dur="4s" repeatCount="indefinite" values="40; 250; 40;" keyTimes="0; 0.5; 1" /> Your browser does not support the svg tag! </svg>

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

svg {
height: 150px;
width: 300px;
}
svg { height: 150px; width: 300px; }

نصائح و ملاحظات

الرسم بداخل الوسم <svg> يمكن إعداد دورة كاملة عنه لأنه موضوع كبير جداً و في هذا الدرس قمنا بالمرور على جزء بسيط منه لإعطاءك فكرة عامة عنه. لذلك, في حال أردت تعلم المزيد حول هذا الأمر فيجب أن يكون لديك دراسة مسبقاً بلغتي CSS و جافا سكربت حتى تتمكن من فهم ما تتعلمه بشكل سهل.

مستقبلاً حين تقوم بإضافة مؤثرات بواسطة <svg> في تصاميمك فإنك على الأغلب ستقوم ببناء الرسومات و تحريكها بواسطة برامج مخصصة لذلك و حين تقوم بجلب رسومات جاهزة سيكون من السهل عليك جداً التعامل معها لإضافة المؤثرات لها.

فيما يلي سنذكر الفرق في التعامل مع الوسمين <svg> و <canvas> حيث يمكن استخدام كلاهما لعرض رسومات في الصفحة.

الجدول التالية عبارة عن ملخص للفروقات التي قمنا بذكرها.

<svg> <canvas>
الرسم في يمكن أن يتم من خلال تمرير قيم للعناصر الموضوعة فيه بأسلوب XML بشكل مباشر أو بواسطة جافا سكربت. الرسم فيه يتم بالكامل بواسطة جافا سكربت فقط.
كل عنصر نضعه بداخله يمكن الوصول له بواسطة جافا سكربت حيث أن كل عنصر نضعه فيه عبارة عن كائن ( Object ). لا يمكن التعامل مع أجزاء في الرسم حيث أن الرسم الذي تنشئه بواسطته يصبح و كأنه صورة.
يمكن تحديث أجزاء منه بواسطة جافا سكربت و المتصفح سيتولى إعادة رسمه. يجب إعادة رسمه بالكامل في حال أردت إجراء أي تحديث بسيط على الرسم.
عودة للدرس❯ ❮عودة للدرس