SVG کا مطلب Scalable Vector Graphics ہے۔ یہ W3C کا اوپن معیار ہے ان تصاویر کے لیے جو پکسلز کے بجائے ہدایات کی صورت میں بیان کی جاتی ہیں: یہاں ایک دائرہ بنائیں، اس منحنی کو فالو کریں، اس شکل کو اس رنگ سے بھریں، اس لفظ کو اس فونٹ میں لکھیں۔ چونکہ تصویر دراصل ہدایات کا مجموعہ ہوتی ہے، اسے کسی بھی سائز میں دوبارہ بنایا جا سکتا ہے بغیر اس کے کہ وہ دھندلی یا بلاکی ہو، اسی لیے لوگوز، آئیکنز، نقشے اور چارٹس اکثر SVG ہوتے ہیں۔
ایک SVG تصویر کو کیسے محفوظ کرتا ہے
SVG فائل XML ہوتی ہے: قابلِ مطالعہ ٹیکسٹ جسے آپ کسی بھی ایڈیٹر میں کھول سکتے ہیں۔ <path> عنصر ڈرائنگ کمانڈز کی ایک مختصر سٹرنگ رکھتا ہے، <rect>, <circle> اور <polygon> وہی کام کرتے ہیں جو ان کے نام سے ظاہر ہے، <text> میں اصل منتخب کیے جانے والا ٹیکسٹ ہوتا ہے، اور <g> عناصر کو اس لیے گروپ کرتا ہے کہ انہیں اکٹھے حرکت دی جا سکے یا اسٹائل کیا جا سکے۔ viewBox وصف کوآرڈینیٹ سسٹم متعین کرتا ہے، جو پوری ڈرائنگ کو صاف ستھرے انداز میں اسکیل ہونے کے قابل بناتا ہے۔
چونکہ یہ ٹیکسٹ ہوتا ہے، SVG بہت اچھی طرح کمپریس ہو جاتا ہے؛ gzip کیا ہوا SVG (جسے کبھی کبھی .svgz توسیع دی جاتی ہے) اکثر اپنی اصل جسامت کا صرف ایک حصہ رہ جاتا ہے۔ ٹیکسٹ ہونے کا مطلب یہ بھی ہے کہ SVG کو CSS کے ذریعے اسٹائل کیا جا سکتا ہے، اینیمیٹ کیا جا سکتا ہے اور اس پر اسکرپٹنگ کی جا سکتی ہے۔ براؤزر اسے کسی مبہم تصویر کے بجائے دستاویز کے حصے کے طور پر برتتے ہیں۔
یہ آخری صلاحیت ایک اہم سکیورٹی پہلو بھی رکھتی ہے: SVG میں <script> عنصر شامل ہو سکتا ہے۔ جہاں کہیں بھی SVG کو بطور یوزر اپ لوڈ قبول کیا جاتا ہے وہاں اسے لازماً صاف کیا جائے یا اس طرح فراہم کیا جائے کہ وہ چل نہ سکے، اسی لیے کچھ سائٹس SVG قبول نہیں کرتیں حالانکہ وہ ہر راسٹر فارمیٹ کو قبول کر لیتی ہیں۔
SVG تصاویر (فوٹوز) کے لیے اچھا کنٹینر نہیں ہے۔ آپ اس کے اندر ایک راسٹر امیج ایمبیڈ کر سکتے ہیں، لیکن تب آپ کے پاس محض XML میں لپٹی ہوئی پکسل تصویر ہوتی ہے، جس میں اسکیلنگ کا کوئی فائدہ نہیں رہتا۔
ایک SVG کون سی میٹا ڈیٹا رکھتا ہے
SVG میں <metadata> کے نام سے ایک مخصوص عنصر ہوتا ہے، اور چونکہ معیار یہ طے نہیں کرتا کہ اس میں کیا ہو، ایڈیٹرز اس میں بہت سی چیزیں ڈال دیتے ہیں۔ عموماً اس میں Dublin Core اصطلاحات کے ساتھ RDF ہوتا ہے: dc:title, dc:creator, dc:date, dc:description, dc:rights اور لائسنس کا URI۔ <title> اور <desc> عناصر بھی روٹ پر یا کسی بھی انفرادی شکل پر ہو سکتے ہیں، جہاں وہ اسکرین ریڈر کے لیے ایکسیسبلیٹی ٹیکسٹ کا کام بھی کرتے ہیں۔
اس کے بعد خود ایڈیٹر کا بُک کیپنگ ڈیٹا آتا ہے، جو عموماً سب سے بڑا حصہ ہوتا ہے۔ Inkscape اپنی ایک پوری namespace لکھتا ہے: دستاویز کی ونڈو جیومیٹری، زوم لیول اور کرسر کی پوزیشن جب اسے آخری بار محفوظ کیا گیا، گائیڈ لائنز، گرِڈ سیٹنگز، لیئر کے نام اور ان کی وِزِبلٹی، اور inkscape:version سٹرنگ۔ Illustrator اپنی دستاویز کی شناخت اور ہسٹری کے ساتھ ایک XMP پیکٹ ایمبیڈ کرتا ہے۔ ان میں سے کوئی بھی چیز تصویر نہیں بناتی۔
اس سے دو عملی نکات نکلتے ہیں۔ ایڈیٹر کا ڈیٹا آسانی سے فائل کے زیادہ تر حصے پر مشتمل ہو سکتا ہے، اس لیے شائع کرنے سے پہلے SVG کو کسی آپٹیمائزر سے گزارنے سے فائل اکثر آدھی رہ جاتی ہے۔ اور لیئر کے نام وہ ٹیکسٹ ہوتے ہیں جو آپ نے خود لکھے: <g inkscape:label="client logo v3 REJECTED"> تصویر میں تو نظر نہیں آتا، لیکن فائل کے اندر بالکل واضح ہوتا ہے۔
SVG کب استعمال کریں
SVG ان سب چیزوں کے لیے استعمال کریں جو بنائی ہوئی ہوں نہ کہ فوٹوگراف کی گئی ہوں: لوگوز، آئیکنز، ڈایاگرامز، چارٹس، السٹریشنز، نقشے۔ یہ ویب کے لیے درست انتخاب ہے، جہاں ایک ہی فائل ہر اسکرین ڈینسٹی پر کام آتی ہے، اور پرنٹ کے لیے بھی، جہاں اسے کسی بھی سائز پر اسکیل کیا جا سکتا ہے۔
فوٹوز اور ایسی کسی بھی چیز کے لیے جس میں مسلسل ٹون ہو، PNG یا JPG استعمال کریں۔ جب آپ کو ایسی تصویر چاہیے جو ایسے پرانے یا محدود سافٹ ویئر میں بھی کھل سکے جو SVG کو سپورٹ نہیں کرتا، تو ایک فلیٹ راسٹر کاپی بھی ایکسپورٹ کریں، اور شائع کرنے سے پہلے ایڈیٹر کا میٹا ڈیٹا ہٹا دیں، فائل کو چھوٹا کرنے کے لیے بھی اور اس لیے بھی کہ لیئر کے نام ہمیشہ عوام کے لیے نہیں ہوتے۔