دروس SVG

يرمز SVG إلى Scalable Vector Graphics.

يعرّف SVG الرسومات القائمة على المتجهات بتنسيق XML.


أمثلة في كل فصل

باستخدام محرر "جربها بنفسك" ، يمكنك تعديل SVG والنقر فوق زر لعرض النتيجة.

مثال SVG

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

ما يجب أن تعرفه بالفعل

قبل المتابعة ، يجب أن يكون لديك بعض الفهم الأساسي لما يلي:

  • لغة البرمجة
  • XML الأساسي

إذا كنت ترغب في دراسة هذه الموضوعات أولاً ، فابحث عن البرامج التعليمية على صفحتنا الرئيسية .


ما هو SVG؟

  • يرمز SVG إلى Scalable Vector Graphics
  • يتم استخدام SVG لتعريف الرسومات القائمة على المتجهات للويب
  • يعرّف SVG الرسومات بتنسيق XML
  • يمكن تحريك كل عنصر وكل سمة في ملفات SVG
  • SVG هو توصية W3C
  • يتكامل SVG مع معايير W3C الأخرى مثل DOM و XSL


SVG هي توصية W3C

أصبح SVG 1.0 توصية W3C في 4 سبتمبر 2001.

أصبح SVG 1.1 توصية W3C في 14 يناير 2003.

أصبح SVG 1.1 (الإصدار الثاني) توصية W3C في 16 أغسطس 2011.


مزايا SVG

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

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

إنشاء صور SVG

يمكن إنشاء صور SVG باستخدام أي محرر نصوص ، ولكن غالبًا ما يكون من الأنسب إنشاء صور SVG باستخدام برنامج رسم ، مثل Inkscape .