6 کامن ایس وی جی فیل (اور ان کو کیسے ٹھیک کیا جائے)

کسی نے حال ہی میں مجھ سے پوچھا کہ میں ان لائن SVGs کو ڈیبگ کرنے سے کیسے رجوع کرتا ہوں۔ چونکہ یہ DOM کا حصہ ہے، ہم کسی بھی براؤزر DevTools میں کسی بھی ان لائن SVG کا معائنہ کر سکتے ہیں۔ اور اس کی وجہ سے، ہمارے پاس چیزوں کو دائرہ کار میں لانے اور SVG کو بہتر بنانے کے لیے کسی بھی ممکنہ مسائل یا مواقع سے پردہ اٹھانے کی صلاحیت ہے۔

لیکن بعض اوقات، ہم اپنے SVGs کو بالکل بھی نہیں دیکھ سکتے ہیں۔ ان صورتوں میں، چھ مخصوص چیزیں ہیں جو میں ڈیبگ کرتے وقت تلاش کرتا ہوں۔

1. viewBox اقدار

۔ viewBox SVG کے ساتھ کام کرتے وقت الجھن کا ایک عام نقطہ ہے۔ اس کے بغیر ان لائن SVG استعمال کرنا تکنیکی طور پر ٹھیک ہے، لیکن ہم اس کے سب سے اہم فوائد میں سے ایک کھو دیں گے: کنٹینر کے ساتھ اسکیلنگ۔ ایک ہی وقت میں، غلط طریقے سے کنفیگر ہونے پر یہ ہمارے خلاف کام کر سکتا ہے، جس کے نتیجے میں ناپسندیدہ کلپنگ ہوتی ہے۔

عناصر وہاں موجود ہوتے ہیں جب وہ تراشے جاتے ہیں — وہ کوآرڈینیٹ سسٹم کے صرف ایک حصے میں ہوتے ہیں جو ہمیں نظر نہیں آتا۔ اگر ہم فائل کو کچھ گرافکس ایڈیٹنگ پروگرام میں کھولیں تو یہ اس طرح نظر آسکتا ہے:

اس کو ٹھیک کرنے کا سب سے آسان طریقہ؟ شامل کریں۔ overflow="visible" SVG پر، چاہے وہ ہماری اسٹائل شیٹ میں ہو، ان لائن پر style انتساب یا براہ راست بطور SVG پریزنٹیشن انتساب۔ لیکن اگر ہم بھی درخواست دیتے ہیں۔ background-color SVG پر یا اگر ہمارے پاس اس کے ارد گرد دوسرے عناصر ہیں تو چیزیں تھوڑی سی ہٹ سکتی ہیں۔ اس صورت میں، بہترین آپشن میں ترمیم کرنا ہوگا۔ viewBox کوآرڈینیٹ سسٹم کا وہ حصہ ظاہر کرنے کے لیے جو چھپا ہوا تھا:

کے بارے میں کچھ اضافی چیزیں ہیں۔ viewBox جو کہ احاطہ کرنے کے قابل ہیں جب ہم موضوع پر ہیں:

کیسے کرتا ہے viewBox کام؟

SVG ایک لامحدود کینوس ہے، لیکن ہم اسے کنٹرول کر سکتے ہیں کہ ہم کیا دیکھتے ہیں اور ہم اسے ویو پورٹ کے ذریعے کیسے دیکھتے ہیں۔ viewBox.

۔ ویو پورٹ لامحدود کینوس پر ایک ونڈو فریم ہے۔ اس کے طول و عرض کی طرف سے وضاحت کی جاتی ہے width اور height اوصاف، یا سی ایس ایس میں متعلقہ کے ساتھ width اور height خواص ہم کسی بھی لمبائی کی اکائی کی وضاحت کر سکتے ہیں جو ہم چاہتے ہیں، لیکن اگر ہم یونٹ کے بغیر نمبر فراہم کرتے ہیں، تو وہ پکسلز میں ڈیفالٹ ہو جاتے ہیں۔

۔ viewBox چار اقدار کی طرف سے بیان کیا جاتا ہے. پہلے دو اوپری بائیں کونے میں نقطہ آغاز ہیں (x اور y اقدار، منفی نمبروں کی اجازت ہے)۔ میں تصویر کو ری فریم کرنے کے لیے ان میں ترمیم کر رہا ہوں۔ آخری دو ویو پورٹ کے اندر کوآرڈینیٹ سسٹم کی چوڑائی اور اونچائی ہیں - یہ وہ جگہ ہے جہاں ہم گرڈ کے پیمانے میں ترمیم کر سکتے ہیں (جس میں ہم اس سیکشن میں جائیں گے۔ زومنگ).

یہاں ایک آسان مارک اپ ہے جو SVG کو دکھا رہا ہے۔ viewBox اور width اور height اوصاف دونوں پر سیٹ ہیں۔ <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

ری فریمنگ

لہذا یہ:

<svg viewBox="0 0 700 700">

… اس کے نقشے:

<svg viewBox="start-x-axis start-y-axis width height">

ویو پورٹ ہم دیکھتے ہیں جہاں سے شروع ہوتا ہے۔ 0 ایکس محور پر اور 0 y-axis پر ملیں۔

اسے تبدیل کرکے:

<svg viewBox="0 0 700 700">

…اس کے لیے:

<svg viewBox="300 200 700 700">

چوڑائی اور اونچائی ایک جیسی رہتی ہے (700 یونٹس ہر ایک)، لیکن کوآرڈینیٹ سسٹم کا آغاز اب ہے۔ 300 ایکس محور پر پوائنٹ اور 200 y محور پر

مندرجہ ذیل ویڈیو میں میں ایک سرخ رنگ شامل کر رہا ہوں۔ <circle> SVG پر اس کے مرکز کے ساتھ 300 ایکس محور پر پوائنٹ اور 200 y محور پر نوٹ کریں کہ کس طرح تبدیل ہوتا ہے۔ viewBox اسی قدروں کے کوآرڈینیٹ دائرے کی جگہ کو فریم کے اوپری بائیں کونے میں بھی بدل دیتے ہیں جبکہ SVG کا رینڈر کردہ سائز وہی رہتا ہے (700×700)۔ میں نے جو کچھ کیا وہ تھا "ریفریم" کے ساتھ چیزوں کو viewBox.

زومنگ

ہم کے اندر آخری دو قدروں کو تبدیل کر سکتے ہیں۔ viewBox تصویر کو زوم ان یا آؤٹ کرنے کے لیے۔ قدریں جتنی بڑی ہوں گی، ویو پورٹ میں فٹ ہونے کے لیے اتنے ہی زیادہ SVG یونٹس شامل کیے جائیں گے، جس کے نتیجے میں تصویر چھوٹی ہو گی۔ اگر ہم 1:1 کا تناسب رکھنا چاہتے ہیں تو ہمارا viewBox چوڑائی اور اونچائی ہماری ویو پورٹ کی چوڑائی اور اونچائی کی قدروں سے مماثل ہونی چاہیے۔

آئیے دیکھتے ہیں کہ جب ہم ان پیرامیٹرز کو تبدیل کرتے ہیں تو Illustrator میں کیا ہوتا ہے۔ آرٹ بورڈ ہے viewport جس کی نمائندگی سفید 700px مربع سے ہوتی ہے۔ اس علاقے سے باہر باقی سب کچھ ہمارا لامحدود SVG کینوس ہے اور بطور ڈیفالٹ کلپ ہوجاتا ہے۔

تصویر 1 ذیل میں ایک نیلے نقطے کو دکھاتا ہے۔ 900 ایکس محور کے ساتھ ساتھ اور 900 y محور کے ساتھ ساتھ اگر میں آخری دو کو بدل دوں viewBox سے اقدار 700 کرنے کے لئے 900 اس طرح:

<svg viewBox="300 200 900 900" width="700" height="700">

…پھر نیلا ڈاٹ تقریباً مکمل طور پر واپس نظر آتا ہے، جیسا کہ ذیل میں شکل 2 میں دیکھا گیا ہے۔ ہماری تصویر کو چھوٹا کیا گیا ہے کیونکہ ہم نے viewBox کی قدروں میں اضافہ کیا ہے، لیکن SVG کی اصل چوڑائی اور اونچائی کے طول و عرض وہی رہے، اور نیلے نقطے نے بغیر تراشے ہوئے علاقے کے قریب واپس جانے کا راستہ بنایا۔

اس بات کے ثبوت کے طور پر ایک گلابی مربع ہے کہ گرڈ کس طرح ویو پورٹ کو فٹ کرتا ہے: یونٹ چھوٹا ہوتا جاتا ہے، اور مزید گرڈ لائنیں اسی ویو پورٹ کے علاقے میں فٹ ہوجاتی ہیں۔ اس کام کو عملی شکل میں دیکھنے کے لیے آپ درج ذیل قلم میں انہی اقدار کے ساتھ کھیل سکتے ہیں۔

2. لاپتہ width اور height

ایک اور عام چیز جو میں ان لائن SVG کو ڈیبگ کرتے وقت دیکھتا ہوں وہ یہ ہے کہ آیا مارک اپ میں شامل ہے۔ width or height صفات بہت سے معاملات میں یہ کوئی بڑی بات نہیں ہے جب تک کہ SVG کسی کنٹینر کے اندر نہ ہو جس میں مطلق پوزیشننگ ہو یا ایک لچکدار کنٹینر ہو (جیسا کہ سفاری SVG کی گنتی کرتا ہے width کے ساتھ قدر 0px بجائے auto)۔ چھوڑ کر width or height ان صورتوں میں ہمیں مکمل تصویر دیکھنے سے روکتا ہے، جیسا کہ ہم دیکھ سکتے ہیں۔ یہ CodePen ڈیمو کھول رہا ہے۔ اور کروم، سفاری اور فائر فاکس میں اس کا موازنہ کرنا (بڑے منظر کے لیے امیجز کو تھپتھپائیں)۔

حل؟ چوڑائی یا اونچائی شامل کریں، چاہے وہ پیشکش کی خصوصیت کے طور پر ہو، سٹائل کی خصوصیت میں ان لائن ہو یا CSS میں۔ اونچائی کو خود سے استعمال کرنے سے گریز کریں، خاص طور پر جب اس پر سیٹ ہو۔ 100% or auto. ایک اور حل یہ ہے۔ حق مقرر کریں اور بائیں اقدار.

آپ اس کے ساتھ کھیل سکتے ہیں۔ مندرجہ ذیل قلم اور مختلف اختیارات کو یکجا کریں۔

3. نادانی۔ fill اور stroke رنگ

یہ بھی ہو سکتا ہے کہ ہم پر رنگ لگا رہے ہوں۔ <svg> ٹیگ، چاہے یہ ان لائن اسٹائل ہو یا CSS سے آرہا ہو۔ یہ ٹھیک ہے، لیکن پورے مارک اپ یا اسلوب میں رنگ کی دوسری قدریں ہو سکتی ہیں جو رنگ کے سیٹ سے متصادم ہیں۔ <svg>جس کی وجہ سے حصے پوشیدہ ہو جاتے ہیں۔

اس لیے میں تلاش کرنے کا رجحان رکھتا ہوں۔ fill اور stroke ایس وی جی کے مارک اپ میں اوصاف اور ان کو مٹا دیں۔ مندرجہ ذیل ویڈیو میں سرخ رنگ کے ساتھ CSS میں اسٹائل کردہ SVG دکھایا گیا ہے۔ fill. کچھ ایسی مثالیں ہیں جہاں SVG کے حصے براہ راست مارک اپ میں سفید رنگ میں بھرے ہوئے ہیں جنہیں میں نے گمشدہ ٹکڑوں کو ظاہر کرنے کے لیے ہٹا دیا تھا۔

4. غائب IDs

یہ بہت واضح معلوم ہوسکتا ہے، لیکن آپ حیران ہوں گے کہ میں اسے کتنی بار آتا دیکھتا ہوں۔ ہم کہتے ہیں کہ ہم نے Illustrator میں ایک SVG فائل بنائی ہے اور ہم اپنی تہوں کو نام دینے کے بارے میں بہت مستعد تھے تاکہ فائل کو برآمد کرتے وقت آپ کو مارک اپ میں اچھی مماثل IDs ملیں۔ اور ہم کہتے ہیں کہ ہم ان IDs کو جوڑ کر سی ایس ایس میں اس SVG کو اسٹائل کرنے کا ارادہ رکھتے ہیں۔

یہ چیزیں کرنے کا ایک اچھا طریقہ ہے۔ لیکن ایسے بہت سارے مواقع ہیں جہاں میں نے ایک ہی SVG فائل کو دوسری بار اسی جگہ پر برآمد کرتے ہوئے دیکھا ہے اور IDs مختلف ہیں، عام طور پر جب ویکٹر کو براہ راست کاپی/پیسٹ کرتے ہیں۔ ہوسکتا ہے کہ کوئی نئی پرت شامل کی گئی ہو، یا موجودہ میں سے کسی ایک کا نام بدل دیا گیا ہو یا کچھ اور۔ معاملہ کچھ بھی ہو، CSS کے قواعد SVG مارک اپ میں موجود IDs سے مزید مماثل نہیں ہیں، جس کی وجہ سے SVG آپ کی توقع سے مختلف انداز میں پیش کر رہا ہے۔

بڑی SVG فائلوں میں ہمیں ان IDs کو تلاش کرنا مشکل ہو سکتا ہے۔ DevTools کو کھولنے کا یہ اچھا وقت ہے، گرافک کے اس حصے کا معائنہ کریں جو کام نہیں کر رہا ہے، اور دیکھیں کہ آیا وہ IDs اب بھی مماثل ہیں۔

لہذا، میں یہ کہوں گا کہ برآمد شدہ SVG فائل کو کوڈ ایڈیٹر میں کھولنا اور چیزوں کو تبدیل کرنے سے پہلے اس کا اصل سے موازنہ کرنا مناسب ہے۔ Illustrator، Figma اور Sketch جیسی ایپس سمارٹ ہیں، لیکن اس کا مطلب یہ نہیں ہے کہ ہم ان کی جانچ کے ذمہ دار نہیں ہیں۔

5. تراشنے اور ماسک کرنے کے لیے چیک لسٹ

اگر کوئی SVG غیر متوقع طور پر کلپ ہو جائے اور viewBox چیک آؤٹ ٹھیک ہے، میں عام طور پر CSS کو دیکھتا ہوں۔ clip-path or mask خصوصیات جو تصویر میں مداخلت کر سکتی ہیں۔ ان لائن مارک اپ کو دیکھتے رہنا پرکشش ہے، لیکن یہ یاد رکھنا اچھا ہے کہ SVG کا اسٹائل کہیں اور ہو سکتا ہے۔

سی ایس ایس کلپنگ اور ماسکنگ ہمیں کسی تصویر یا عنصر کے حصوں کو "چھپانے" کی اجازت دیں۔ SVG میں، <clipPath> ایک ویکٹر آپریشن ہے جو کسی تصویر کے کچھ حصوں کو کاٹتا ہے جس کا کوئی نصف نتیجہ نہیں ہوتا ہے۔ دی <mask> ٹیگ ایک پکسل آپریشن ہے جو شفافیت، نیم شفافیت کے اثرات، اور دھندلے کناروں کی اجازت دیتا ہے۔

یہ ڈیبگنگ کیسز کے لیے ایک چھوٹی چیک لسٹ ہے جہاں کلپنگ اور ماسکنگ شامل ہیں:

• یقینی بنائیں کہ کلپنگ پاتھ (یا ماسک) اور گرافک ایک دوسرے کو اوورلیپ کرتے ہیں۔ اوورلیپنگ حصے وہی ہیں جو ظاہر ہوتے ہیں۔
• اگر آپ کے پاس کوئی پیچیدہ راستہ ہے جو آپ کے گرافک کو آپس میں نہیں جوڑ رہا ہے، تو تبدیلیوں کو لاگو کرنے کی کوشش کریں جب تک کہ وہ مماثل نہ ہوں۔
• آپ اب بھی DevTools کے ساتھ اندرونی کوڈ کا معائنہ کر سکتے ہیں۔ <clipPath> or <mask> فراہم نہیں کر رہے ہیں، تو اسے استعمال کریں!
• اندر مارک اپ کاپی کریں۔ <clipPath> اور <mask> اور اسے بند کرنے سے پہلے چسپاں کریں۔ </svg> ٹیگ پھر ایک شامل کریں۔ fill ان شکلوں تک اور SVG کے نقاط اور طول و عرض کو چیک کریں۔ اگر آپ کو اب بھی تصویر نظر نہیں آتی ہے تو شامل کرنے کی کوشش کریں۔ overflow="hidden" کرنے کے لئے <svg> ٹیگ
• چیک کریں کہ a منفرد ID کے لیے استعمال کیا جاتا ہے۔ <clipPath> or <mask>، اور یہ کہ وہی ID ان شکلوں یا شکلوں کے گروپ پر لاگو ہوتی ہے جو تراشے ہوئے یا نقاب پوش ہیں۔ غیر مماثل ID ظاہری شکل کو توڑ دے گی۔
• کے درمیان مارک اپ میں ٹائپ کی غلطیاں چیک کریں۔ <clipPath> or <mask> ٹیگز
• fill, stroke, opacity، یا اندر کے عناصر پر لاگو کچھ دیگر طرزیں <clipPath> بیکار ہیں - واحد مفید حصہ ان عناصر کی فل ریجن جیومیٹری ہے۔ یہی وجہ ہے کہ اگر آپ ایک استعمال کرتے ہیں۔ <polyline> یہ ایک کے طور پر برتاؤ کرے گا <polygon> اور اگر آپ a استعمال کرتے ہیں۔ <line> آپ کو کوئی کلپنگ اثر نظر نہیں آئے گا۔
• اگر آپ کو اپلائی کرنے کے بعد اپنی تصویر نظر نہیں آتی ہے۔ <mask>، اس بات کو یقینی بنائیں کہ fill ماسکنگ کا مواد مکمل طور پر سیاہ نہیں ہے۔ ماسکنگ عنصر کی چمک فائنل گرافک کی دھندلاپن کا تعین کرتی ہے۔ آپ روشن حصوں کو دیکھ سکیں گے، اور گہرے حصے آپ کی تصویر کے مواد کو چھپا دیں گے۔

آپ نقاب پوش اور تراشے ہوئے عناصر کے ساتھ کھیل سکتے ہیں۔ یہ قلم.

6. نام کی جگہیں۔

کیا آپ جانتے ہیں کہ SVG ایک XML پر مبنی مارک اپ لینگویج ہے؟ ٹھیک ہے، یہ ہے! SVG کے لیے نام کی جگہ پر سیٹ ہے۔ xmlns وصف:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

XML میں نام کی جگہ کے بارے میں جاننے کے لیے بہت کچھ ہے اور MDN کا اس پر بہت اچھا پرائمر ہے۔ یہ کہنا کافی ہے کہ نام کی جگہ براؤزر کو سیاق و سباق فراہم کرتی ہے، یہ بتاتی ہے کہ مارک اپ SVG کے لیے مخصوص ہے۔ خیال یہ ہے کہ نام کی جگہیں تنازعات کو روکنے میں مدد کرتی ہیں جب ایک سے زیادہ قسم کی XML ایک ہی فائل میں ہوتی ہے، جیسے SVG اور XHTML۔ یہ جدید براؤزرز میں بہت کم عام مسئلہ ہے لیکن پرانے براؤزرز یا گیکو جیسے براؤزرز میں SVG رینڈرنگ کے مسائل کی وضاحت کرنے میں مدد کر سکتا ہے جو کہ doctypes اور namespace کی وضاحت کرتے وقت سخت ہوتے ہیں۔

SVG 2 تفصیلات نام کی جگہ کی ضرورت نہیں ہے۔ HTML نحو استعمال کرتے وقت۔ لیکن یہ اہم ہے اگر میراثی براؤزرز کے لیے سپورٹ ترجیح ہے — اس کے علاوہ، اس کو شامل کرنے سے کوئی نقصان نہیں ہوتا۔ اس طرح، جب <html> عناصر xmlns خصوصیت کی وضاحت کی گئی ہے، یہ ان شاذ و نادر صورتوں میں متصادم نہیں ہوگا۔

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

CSS میں ان لائن SVG استعمال کرتے وقت بھی یہ درست ہے، جیسے کہ اسے بیک گراؤنڈ امیج کے طور پر سیٹ کرنا۔ درج ذیل مثال میں، کامیاب توثیق کے بعد ان پٹ پر ایک چیک مارک آئیکن ظاہر ہوتا ہے۔ یہ سی ایس ایس کی طرح دکھتا ہے:

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

جب ہم بیک گراؤنڈ پراپرٹی میں SVG کے اندر نام کی جگہ کو ہٹاتے ہیں تو تصویر غائب ہو جاتی ہے:

ایک اور عام نام کی جگہ کا سابقہ ​​ہے۔ xlink:href. SVG کے دوسرے حصوں کا حوالہ دیتے وقت ہم اسے بہت زیادہ استعمال کرتے ہیں جیسے: پیٹرن، فلٹرز، اینیمیشنز یا گریڈینٹ۔ تجویز یہ ہے کہ اسے تبدیل کرنا شروع کیا جائے۔ href جیسا کہ دوسرے کو SVG 2 سے فرسودہ کیا جا رہا ہے، لیکن پرانے براؤزرز کے ساتھ مطابقت کے مسائل ہو سکتے ہیں۔ اس صورت میں، ہم دونوں استعمال کر سکتے ہیں. بس نام کی جگہ شامل کرنا یاد رکھیں xmlns:xlink="http://www.w3.org/1999/xlink" اگر آپ اب بھی استعمال کر رہے ہیں۔ xlink:href.

اپنی SVG مہارتوں کو بلند کریں!

مجھے امید ہے کہ اگر آپ خود کو غلط طریقے سے پیش کردہ ان لائن SVGs کا ازالہ کرتے ہوئے پائیں تو یہ نکات آپ کا ایک ٹن وقت بچانے میں مدد کریں گے۔ یہ صرف وہی چیزیں ہیں جن کی میں تلاش کرتا ہوں۔ ہوسکتا ہے کہ آپ کے پاس مختلف سرخ جھنڈے ہوں جنہیں آپ دیکھتے ہیں — اگر ایسا ہے تو مجھے تبصروں میں بتائیں!

سب سے اہم بات یہ ہے کہ اس کی کم از کم ایک بنیادی تفہیم کی ادائیگی ہوتی ہے۔ SVG کو مختلف طریقوں سے استعمال کیا جا سکتا ہے۔. کوڈ پین چیلنجز اکثر SVG کو شامل کرتے ہیں اور اچھی مشق پیش کرتے ہیں۔ سطح کو بڑھانے کے لیے یہاں کچھ اور وسائل ہیں:

SVG سے متعلق نیکی کے لیے چند لوگوں کو میں مندرجہ ذیل تجویز کرتا ہوں:

• SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
• پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
• ماخذ: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/