SVG داخلي في HTML5

HTML5 يدعم SVG المدمج

ما هو SVG؟

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

مزايا SVG

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

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

دعم المتصفح

يستخدم متصفحات Internet Explorer 9، Firefox، Opera، Chrome و Safari SVG المدمجة.

إدراج SVG مباشرة في صفحة HTML

في HTML5، يمكنك إدراج عنصر SVG مباشرة في صفحة HTML:

مثال

<!DOCTYPE html>
<html>
<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="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

تجربة شخصية

النتيجة:

دليل SVG

للتعلم عن SVG أكثر، يرجى زيارة دليل SVG.