الرسوم عن طريق SVG فى HTML5

من المميزات الجميلة فى HTML , وهى تسمح لك بالرسم على المتصفح باستخدام SVG , و SVG هى اختصار ل Scalable Vector Graphics.

يمكن لمعظم متصفحات الويب الحديثة عرض SVG تمامًا كما يمكنها عرض صور PNG و GIF و JPG.

قد يضطر مستخدمو Internet Explorer إلى تثبيت Adobe SVG Viewer ليتمكنوا من عرض SVG في المتصفح.

العنصر <svg>

هو العنصر الاساسى الذى يحتوي الرسمة بداخله

يمكنك عن طريق SVG رسم  المسارات ، والمربعات ، والدوائر ، والنصوص ، والصور الرسومية.

وفيما يلى امثلة على بعض الرسومات عن طريق SVG

امثلة لرسومات ب SVG

دائرة

See the Pen yKoRvv by amrelarabi (@amrelarabi) on CodePen.

مربع

See the Pen mxMzLV by amrelarabi (@amrelarabi) on CodePen.

خط مستقيم

See the Pen bvrmKW by amrelarabi (@amrelarabi) on CodePen.

ويمكنك بناء الكثير من الاشكال الاخرى وإليك امثلة متقدمة لم يمكن فعله عن طريق SVG

See the Pen svg by amrelarabi (@amrelarabi) on CodePen.

See the Pen SVG Loading icons by Aurer (@aurer) on CodePen.