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.