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 2001 میں، SVG 1.1 2003 میں W3C کی سفارش بنی، اور SVG 2.0 2012 سے ترقی کے مراحل میں ہے۔ SVG 2 کی اہم اختراع گہرے CSS انضمام، کمپوزٹنگ اور بلینڈنگ موڈز کے لیے تعاون، اور HTML میں نام کی جگہ کے سابقہ کے بغیر SVG استعمال کرنے کی صلاحیت ہے۔

اگرچہ 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 KB ہے، جبکہ اسی معیار کا راسٹر آئیکن PNG فارمیٹ میں 5–20 KB ہے۔

SVG تصاویر اور پیچیدہ راسٹر امیجز کے لیے مناسب نہیں ہے — XML وضاحت کا سائز مساوی JPEG سے بڑھ جائے گا۔ SVG کے لیے تجویز کردہ استعمال: آئیکنز، لوگو، عکاسیاں، خاکے، چارٹس، ریسپانسیو ڈیزائن والے انٹرفیس عناصر۔

کب SVG اور کب راسٹر فارمیٹ کا انتخاب کریں

SVG انٹرفیس عناصر کے لیے بہترین انتخاب ہے جنہیں Retina ڈسپلے اور براؤزر کے کسی بھی زوم لیول پر واضح نظر آنے کی ضرورت ہے۔ راسٹر تصاویر، پیچیدہ بناوٹ اور لاکھوں رنگوں والی امیجز کے لیے ہے جہاں ویکٹر کی وضاحت ضرورت سے زیادہ پیچیدہ ہوگی۔

ہائبرڈ نقطہ نظر — انٹرفیس عناصر کے لیے SVG اور تصویری مواد کے لیے WebP/AVIF کا امتزاج — معیار اور صفحہ لوڈ کارکردگی کے درمیان بہترین توازن فراہم کرتا ہے۔

ان لائن SVG اور CSS اسٹائلنگ

ان لائن SVG SVG مارک اپ کو <img> یا background-image کے ذریعے علیحدہ فائل کے بجائے براہ راست HTML دستاویز میں شامل کرنا ہے۔ ان لائن SVG کا فائدہ یہ ہے کہ SVG عناصر DOM کا حصہ بن جاتے ہیں اور CSS کے ذریعے اسٹائل کیے جا سکتے ہیں، JavaScript کے ذریعے کنٹرول کیے جا سکتے ہیں اور اضافی سرور کی درخواستوں کے بغیر اینیمیٹ کیے جا سکتے ہیں۔

<img src="icon.svg"> کے برعکس، جہاں SVG شیڈو DOM میں الگ تھلگ ہے، ان لائن SVG والدین دستاویز سے رنگ اور فونٹ حاصل کرتا ہے۔ یہ مثال کے طور پر، ہر حالت کے لیے علیحدہ فائل لوڈ کیے بغیر CSS سیوڈو کلاس :hover کے ذریعے ہوور پر آئیکن کا رنگ تبدیل کرنے کے نفاذ کی اجازت دیتا ہے۔

CSS-Tricks کے مطابق، ان لائن SVG جدید ویب ایپلیکیشنز میں آئیکن استعمال کرنے کا تجویز کردہ طریقہ ہے۔ CSS خصوصیات fill، stroke، stroke-width براہ راست SVG عناصر پر لاگو ہوتی ہیں۔ CSS حسب ضرورت کے لیے، یہ ضروری ہے کہ ماخذ SVG میں fill اور stroke بطور ان لائن صفات متعین نہ ہوں — ورنہ CSS انہیں اوور رائڈ نہیں کر سکے گا۔

• فوائد: CSS اسٹائلنگ، JS کنٹرول، کوئی HTTP درخواستیں نہیں، viewBox موافقت۔
• نقصانات: HTML صفحہ کے سائز میں اضافہ، HTML سے علیحدہ کیش کرنے سے قاصر۔
• متبادل: SVG اسپرائٹ — متعدد SVG کو ایک فائل میں یکجا کرنا اور <use href="#id"> استعمال کرنا۔

SVG اسپرائٹس کیشنگ کا مسئلہ حل کرتی ہیں: تمام آئیکن ایک فائل میں جمع کیے جاتے ہیں، براؤزر اسے ایک بار لوڈ کرتا ہے، اور انفرادی آئیکن اسپرائٹ کے اندر مطلوبہ عنصر کی id بتا کر <use> کے ذریعے حاصل کیے جاتے ہیں۔

SVG اینیمیشن: CSS اور SMIL

CSS کے ساتھ SVG اینیمیشن براؤزر میں ویکٹر گرافکس کو متحرک کرنے کا سب سے عام اور موثر طریقہ ہے۔ transform، opacity اور fill جیسی CSS خصوصیات HTML عناصر کی طرح SVG عناصر پر لاگو ہوتی ہیں۔ صوابدیدی راستے پر اینیمیشن کے لیے CSS خصوصیت offset-path استعمال ہوتی ہے۔

SMIL (Synchronized Multimedia Integration Language) SVG میں شامل ایک اینیمیشن میکانزم ہے، جو CSS سے آزاد ہے۔ <animate>، <animateTransform> اور <animateMotion> عناصر JavaScript یا CSS کے بغیر کسی بھی SVG وصف کو متحرک کرنے کی اجازت دیتے ہیں۔ SMIL اینیمیشن براؤزر کی فریم ریٹ کے ساتھ مطابقت پذیر ہونے کی ضمانت ہے۔

MDN Web Docs کے مطابق، SMIL تمام جدید براؤزرز میں تعاون یافتہ ہے، لیکن CSS اینیمیشن زیادہ متوقع اور موثر سمجھی جاتی ہے۔ SMIL کے استعمال کا بنیادی معاملہ ان صفات کو متحرک کرنا ہے جو CSS کے ذریعے قابل رسائی نہیں ہیں، جیسے <path> عنصر کی d (path)۔

JavaScript + requestAnimationFrame SVG اینیمیشن پر زیادہ سے زیادہ کنٹرول دیتا ہے۔ ویب ڈویلپرز پیچیدہ اینیمیشن سلسلوں کے لیے GSAP اور Anime.js جیسی لائبریریاں استعمال کرتے ہیں جن میں ٹائم لائنز اور آسان کرنے والے فنکشنز ہوتے ہیں جنہیں خالص 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 کے ذریعے گھومنے والے لوڈر کی اینیمیشن دکھاتی ہے۔ یہ ایک ڈیشڈ آؤٹ لائن بنانے کے لیے stroke-dasharray وصف کے ساتھ <circle> استعمال کرتا ہے:

<!-- 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"
});