HTMLالوسم <svg>

تعريفه

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

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

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

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

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

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

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

خصائصه

الخاصية height

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

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

الخاصية width

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

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

إستخدامه

في المثال التالي قمنا بإضافة وسم <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>

في المثال التالي قمنا بإضافة وسم <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>

في المثال التالي قمنا بإضافة وسم <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>

في المثال التالي قمنا بإضافة وسم <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>

في المثال التالي قمنا بإضافة وسم <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: 150px;
    width: 300px;
}

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

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

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

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

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