SVG: ما هو، المفاهيم الأساسية والاستخدام في تطوير الويب

ما هو SVG؟

SVG هو تنسيق رسومات متجهة يعتمد على XML، ظهر في عام 2001 كتوصية من W3C. على عكس التنسيقات النقطية، يصف SVG الصور من خلال البدائيات الهندسية: النقاط والخطوط والمنحنيات والمضلعات. ملف SVG هو مستند XML نصي عادي يمكن قراءته وتحريره وضغطه بالأدوات القياسية.

تشمل بنية SVG عدة مفاهيم أساسية. viewBox يحدد نظام إحداثيات افتراضياً مستقلاً عن الأبعاد الفعلية للعنصر. على سبيل المثال، viewBox="0 0 100 100" ينشئ شبكة مربعة 100×100، حيث تكون جميع الإحداثيات ثابتة داخلها. عندما يتغير عرض الحاوية أو ارتفاعها، يتوسع المحتوى بشكل متناسب.

وفقاً لـ W3C SVG 2 Specification، فإن الإصدار الحديث من SVG يدعم التدرجات والأقنعة والمرشحات والنص مع تحديد موضع عشوائي والتفاعل عبر JavaScript والرسوم المتحركة عبر CSS وSMIL. SVG مدمج في DOM كعنصر HTML كامل، مما يسمح بالتحكم البرمجي في كل بدائية رسومية.

في تطوير الأجهزة المحمولة، يُستخدم SVG أيضاً في iOS عبر UIGraphicsImageRenderer وفي Android عبر VectorDrawable — كلا التنسيقين يحولان الأوصاف الشبيهة بـ SVG إلى صور نقطية مسرعة بالأجهزة على GPU.

تاريخ وتطور تنسيق SVG

أصبح SVG 1.0 توصية W3C في عام 2001، وSVG 1.1 في عام 2003، وSVG 2.0 قيد التطوير منذ عام 2012. الابتكار الرئيسي في SVG 2 هو التكامل الأعمق مع CSS، ودعم أوضاع المزج والتركيب، وإمكانية استخدام SVG في HTML دون بادئات namespace.

على الرغم من أن SVG 2 لم يصل بعد إلى حالة التوصية، فإن المتصفحات الحديثة تدعم بالفعل معظم وظائفه. Chrome وSafari وFirefox وEdge لديها دعم شبه كامل لـ SVG 1.1 وجزء كبير من SVG 2.

العناصر الأساسية لـ SVG

يوفر SVG مجموعة من العناصر لوصف الرسومات ثنائية الأبعاد. كل عنصر له سمات تحدد موضعه وحجمه ومظهره البصري. يمكن تعيين السمات كسمات xml أو عبر خصائص CSS.

• <rect> مستطيل بسمات x، y، width، height، rx، ry (تدوير الزوايا).
• <circle> دائرة بسمات cx، cy (المركز) و r (نصف القطر).
• <ellipse> قطع ناقص بسمات cx، cy، rx، ry.
• <line> قطعة خطية بسمات x1، y1، x2، y2.
• <polyline> خط متقطع بسمة points (قائمة الإحداثيات).
• <polygon> مضلع مغلق بسمة points.
• <path> مسار عشوائي بسمة d (أوامر: M، L، C، Q، A، Z).
• <text> عنصر نصي بسمات x، y، font-size، font-family.

عنصر path هو أقوى وأكثر عناصر SVG مرونة. تحتوي السمة d على سلسلة من الأوامر: M (moveTo)، L (lineTo)، C (منحنى بيزير مكعب)، Q (منحنى بيزير تربيعي)، A (قوس)، Z (إغلاق المسار). كل أمر له شكل مطلق أو نسبي (حرف كبير أو صغير).

يدعم SVG أيضاً تجميع العناصر عبر <g>. المجموعة ترث السمات البصرية (fill، stroke، transform) إلى جميع العناصر الفرعية. يتيح ذلك تطبيق نمط واحد على مجموعة كاملة من الأشكال والتحكم في موضعها عبر transform واحد.

SVG مقابل الرسومات النقطية: مقارنة التنسيقات

الفرق الرئيسي بين SVG والتنسيقات النقطية (JPEG، PNG، WebP) هو طريقة تخزين المعلومات. التنسيق النقطي يخزن لون كل بكسل في شبكة بحجم ثابت. SVG يخزن أوامر رياضية لإعادة إنتاج الأشكال. يحدد هذا الاختلاف جميع مزايا وعيوب التنسيقات.

وفقاً لـ HTTP Archive، 2025، 68% من مواقع الويب تستخدم SVG للأيقونات، و34% للرسوم التوضيحية و22% للشعارات. متوسط حجم أيقونة SVG هو 0.5–2 كيلوبايت، بينما أيقونة نقطية بنفس الجودة تتراوح بين 5–20 كيلوبايت بتنسيق PNG.

SVG غير مناسب للصور الفوتوغرافية والصور النقطية المعقدة — حجم وصف XML سيتجاوز JPEG المكافئ. مجالات التطبيق الموصى بها لـ SVG: الأيقونات والشعارات والرسوم التوضيحية والمخططات والرسوم البيانية وعناصر الواجهة ذات التصميم المتجاوب.

متى تختار SVG ومتى تختار التنسيق النقطي

SVG هو الخيار الأمثل لعناصر الواجهة التي يجب أن تبدو حادة على شاشات Retina وأي مستوى تكبير في المتصفح. التنسيق النقطي مخصص للصور الفوتوغرافية والأنسجة المعقدة والصور ذات ملايين الألوان حيث سيكون الوصف المتجه معقداً بشكل غير مبرر.

النهج الهجين — الجمع بين SVG لعناصر الواجهة وWebP/AVIF لمحتوى الصور — يوفر أفضل توازن بين الجودة وأداء تحميل الصفحة.

SVG المضمن والتنسيق عبر CSS

SVG المضمن هو تضمين ترميز SVG مباشرة في مستند HTML، بدلاً من ملف منفصل عبر <img> أو background-image. ميزة SVG المضمن هي أن عناصر SVG تصبح جزءاً من DOM ويمكن تنسيقها عبر CSS والتحكم بها عبر JavaScript وتحريكها دون طلبات إضافية للخادم.

على عكس <img src="icon.svg">، حيث SVG معزول في shadow DOM، يرث SVG المضمن الألوان والخطوط من المستند الأم. يتيح ذلك تنفيذ، على سبيل المثال، تغيير لون الأيقونة عند التمرير عبر CSS pseudo-class :hover دون تحميل ملف منفصل لكل حالة.

وفقاً لـ CSS-Tricks، SVG المضمن هو الطريقة الموصى بها لاستخدام الأيقونات في تطبيقات الويب الحديثة. خصائص CSS مثل fill وstroke وstroke-width تنطبق مباشرة على عناصر SVG. للتخصيص عبر CSS، من المهم ألا يحتوي SVG المصدر على fill وstroke كسمات مضمنة — وإلا فلن تتمكن CSS من تجاوزها.

• المزايا: تنسيق عبر CSS، تحكم عبر JS، بدون طلبات HTTP، استجابة viewBox.
• العيوب: زيادة حجم صفحة HTML، عدم القدرة على التخزين المؤقت بشكل منفصل عن HTML.
• البديل: sprites SVG — دمج عدة SVGs في ملف واحد واستخدام <use href="#id">.

sprites SVG تحل مشكلة التخزين المؤقت: يتم جمع جميع الأيقونات في ملف واحد، ويقوم المتصفح بتحميله مرة واحدة، ويتم الوصول إلى الأيقونات الفردية عبر <use> مع تحديد id للعنصر المطلوب داخل sprite.

الرسوم المتحركة SVG: CSS وSMIL

الرسوم المتحركة SVG عبر CSS هي الطريقة الأكثر شيوعاً وكفاءة لتحريك الرسومات المتجهة في المتصفح. خصائص CSS مثل transform وopacity وfill تنطبق على عناصر SVG تماماً كما تنطبق على عناصر HTML. للتحريك على طول مسار عشوائي، تُستخدم خاصية CSS offset-path.

SMIL (Synchronized Multimedia Integration Language) هي آلية رسوم متحركة مدمجة في SVG، مستقلة عن CSS. العناصر <animate> و<animateTransform> و<animateMotion> تسمح بتحريك أي سمات SVG بدون JavaScript أو CSS. حركة SMIL مضمونة المزامنة مع معدل إطارات المتصفح.

وفقاً لـ MDN Web Docs، SMIL مدعوم في جميع المتصفحات الحديثة، لكن الرسوم المتحركة CSS تعتبر أكثر قابلية للتنبؤ وأداءً. حالة الاستخدام الرئيسية لـ SMIL هي تحريك السمات غير المتاحة عبر CSS، مثل d (path) للعنصر <path>.

JavaScript + requestAnimationFrame يوفر أقصى تحكم في حركة SVG. يستخدم مطورو الويب مكتبات مثل GSAP وAnime.js لتسلسلات حركة معقدة مع خطوط زمنية ووظائف easing يصعب تنفيذها عبر CSS الخالص.

أمثلة برمجية: إنشاء رسومات SVG

المثال الأول هو أيقونة منزل بسيطة باستخدام عناصر SVG أساسية. جميع الأشكال هي rect و polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

المثال الثاني يظهر حركة دوران محمل عبر CSS. يستخدم <circle> مع السمة stroke-dasharray لإنشاء محيط متقطع:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

المثال الثالث يستخدم مكتبة GSAP لتحريك مسار لرسم محيط سلس. تعمل GSAP مع السمة stroke-dashoffset لإنشاء تأثير ظهور الخط:

// رسم مسار باستخدام GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});