میں نے حال ہی میں اپنے حصے کے طور پر اینٹوں کی دیوار کا نمونہ بنایا ہے۔ #PetitePatterns سیریز، ایک چیلنج جہاں میں 560 بائٹس (یا تقریباً دو ٹویٹس کے سائز) کے اندر SVG میں نامیاتی نظر آنے والے پیٹرن یا بناوٹ بناتا ہوں۔ اس رکاوٹ کو پورا کرنے کے لیے، میں ایک ایسے سفر سے گزرا ہوں جس نے مجھے SVG پیٹرن کو بہتر بنانے کے کچھ بنیادی طریقے سکھائے ہیں تاکہ تصویر کے مجموعی معیار کو متاثر کیے بغیر ان میں کم سے کم کوڈ شامل ہوں۔
میں آپ کو اس عمل سے گزرنا چاہتا ہوں اور آپ کو دکھانا چاہتا ہوں کہ ہم کس طرح ایک SVG پیٹرن لے سکتے ہیں جو 197 بائٹس سے شروع ہو کر صرف 44 بائٹس تک پہنچتا ہے - ایک زبردست 77.7% کمی!
ایس وی جی پیٹرن
یہ وہی ہے جسے "رننگ بانڈ" اینٹوں کا نمونہ کہا جاتا ہے۔ یہ وہاں کا سب سے عام اینٹوں کا نمونہ ہے، اور ایک ایسا نمونہ جو آپ نے یقیناً پہلے دیکھا ہوگا: اینٹوں کی ہر قطار اینٹ کی نصف لمبائی سے بھری ہوئی ہے، جس سے ایک دہرایا جانے والا لڑکھڑا ہوا پیٹرن بنتا ہے۔ انتظام بہت آسان ہے، SVG بناتا ہے۔ <pattern>
عنصر کو کوڈ میں دوبارہ پیش کرنے کے لئے ایک بہترین فٹ ہے۔
ایس وی جی <pattern>
عنصر پہلے سے طے شدہ گرافک آبجیکٹ کا استعمال کرتا ہے جسے افقی اور عمودی محور کے ساتھ مقررہ وقفوں پر نقل کیا جا سکتا ہے (یا "ٹائل")۔ بنیادی طور پر، ہم ایک مستطیل ٹائل پیٹرن کی وضاحت کرتے ہیں اور اسے بھرنے کے علاقے کو پینٹ کرنے کے لیے دہرایا جاتا ہے۔
سب سے پہلے، آئیے ایک اینٹ کے طول و عرض اور ہر اینٹ کے درمیان فاصلہ طے کرتے ہیں۔ سادگی کی خاطر، آئیے صاف، گول نمبر استعمال کریں: کی چوڑائی 100
اور کی اونچائی 30
اینٹ کے لئے، اور 10
ان کے درمیان افقی اور عمودی فرق کے لیے۔
اگلا، ہمیں اپنے "بیس" ٹائل کی شناخت کرنی ہوگی۔ اور "ٹائل" کے ذریعے میں فزیکل ٹائلوں کے بجائے پیٹرن ٹائلوں کے بارے میں بات کر رہا ہوں، اینٹوں سے الجھنے کی ضرورت نہیں۔ آئیے اوپر کی تصویر کے نمایاں حصے کو اپنے پیٹرن ٹائل کے طور پر استعمال کریں: پہلی قطار میں دو پوری اینٹیں، اور دوسری قطار میں دو آدھی اینٹوں کے درمیان ایک پوری سینڈویچ۔ غور کریں کہ خلا کیسے اور کہاں شامل کیا گیا ہے، کیونکہ انہیں بار بار پیٹرن ٹائل میں شامل کرنے کی ضرورت ہے۔
استعمال کرتے وقت <pattern>
، ہمیں پیٹرن کی وضاحت کرنی ہوگی۔ width
اور height
، جو بیس ٹائل کی چوڑائی اور اونچائی کے مساوی ہے۔ طول و عرض حاصل کرنے کے لئے، ہمیں تھوڑا سا ریاضی کی ضرورت ہے:
Tile Width = 2(Brick Width) + 2(Gap) = 2(100) + 2(10) = 220
Tile Height = 2(Bright Height) + 2(Gap) = 2(30) + 2(10) = 80
ٹھیک ہے، تو ہمارا پیٹرن ٹائل ہے۔ 220✕80
. ہمیں بھی سیٹ کرنا ہے۔ patternUnits
انتساب، جہاں قدر userSpaceOnUse
بنیادی طور پر پکسلز کا مطلب ہے. آخر میں، ایک شامل کرنا id
پیٹرن کے لیے ضروری ہے تاکہ جب ہم اس کے ساتھ کسی اور عنصر کو پینٹ کر رہے ہوں تو اس کا حوالہ دیا جا سکے۔
<pattern id="p" width="220" height="80" patternUnits="userSpaceOnUse"> <!-- pattern content here -->
</pattern>
اب جب کہ ہم نے ٹائل کے طول و عرض کو قائم کر لیا ہے، چیلنج یہ ہے کہ ٹائل کے لیے کوڈ کو اس طرح سے بنایا جائے جو بائٹس کی سب سے چھوٹی تعداد کے ساتھ گرافک کو پیش کرے۔ یہ وہی ہے جو ہم بالکل آخر میں ختم ہونے کی امید کرتے ہیں:
ابتدائی مارک اپ (197 بائٹس)
میرے ذہن میں آنے والے اس پیٹرن کو دوبارہ بنانے کا سب سے آسان اور سب سے زیادہ اعلانیہ طریقہ پانچ مستطیل کھینچنا ہے۔ پہلے سے طے شدہ طور پر، fill
ایک SVG عنصر کا سیاہ ہے اور stroke
شفاف ہے. یہ SVG پیٹرن کو بہتر بنانے کے لیے اچھی طرح سے کام کرتا ہے، کیونکہ ہمیں کوڈ میں واضح طور پر ان کا اعلان کرنے کی ضرورت نہیں ہے۔
ذیل کے کوڈ میں ہر لائن ایک مستطیل کی وضاحت کرتی ہے۔ دی width
اور height
ہمیشہ سیٹ ہیں، اور x
اور y
پوزیشنیں صرف اس صورت میں سیٹ کی جاتی ہیں جب ایک مستطیل سے آفسیٹ کیا جاتا ہے۔ 0
پوزیشن سے منافع کمانے کا موقع ملا۔
<rect width="100" height="30"/>
<rect x="110" width="100" height="30"/>
<rect y="40" width="45" height="30"/>
<rect x="55" y="40" width="100" height="30"/>
<rect x="165" y="40" width="55" height="30"/>
ٹائل کی اوپری قطار میں دو پوری چوڑائی کی اینٹیں ہیں، دوسری اینٹ x="110"
اجازت دی 10
اینٹ سے پہلے پکسلز کا خلا۔ اسی طرح ہے 10
پکسلز کے وقفے کے بعد، کیونکہ اینٹ ختم ہوتی ہے۔ 210
پکسلز (110 + 100 = 210
) افقی محور پر اگرچہ <pattern>
چوڑائی ہے 220
پکسلز ہمیں اس قدر اضافی جگہ کی ضرورت ہے۔ دوسری صورت میں دوسری اینٹ ملحقہ ٹائل میں پہلی اینٹ کے ساتھ ضم ہو جائے گی۔
دوسری (نیچے) قطار میں اینٹوں کو پورا کیا جاتا ہے لہذا قطار میں دو آدھی اینٹیں اور ایک پوری اینٹ شامل ہے۔ اس صورت میں، ہم چاہتے ہیں کہ آدھی چوڑائی کی اینٹوں کو ضم کر دیا جائے تاکہ شروع یا آخر میں کوئی خلا نہ ہو، جس سے وہ ملحقہ پیٹرن ٹائلوں میں اینٹوں کے ساتھ بغیر کسی رکاوٹ کے بہہ سکیں۔ ان اینٹوں کو آف سیٹ کرتے وقت، ہمیں آدھے خلا کو بھی شامل کرنا ہوگا، اس طرح x
اقدار ہیں 55
اور 165
بالترتیب.
عنصر کا دوبارہ استعمال، (-43B، 154B کل)
ہر ایک اینٹ کو اتنی واضح طور پر بیان کرنا ناکارہ لگتا ہے۔ کیا اس کے بجائے شکلوں کو دوبارہ استعمال کرکے SVG پیٹرن کو بہتر بنانے کا کوئی طریقہ نہیں ہے؟
مجھے نہیں لگتا کہ یہ بڑے پیمانے پر جانا جاتا ہے کہ SVG میں a ہے۔ <use>
عنصر آپ اس کے ساتھ کسی اور عنصر کا حوالہ دے سکتے ہیں اور اس حوالہ شدہ عنصر کو کہیں بھی پیش کر سکتے ہیں۔ <use>
استعمال کیا جاتا ہے. اس سے کچھ بائٹس کی بچت ہوتی ہے کیونکہ ہم پہلی اینٹ کو چھوڑ کر ہر اینٹ کی چوڑائی اور اونچائی کو چھوڑ سکتے ہیں۔
اس نے کہا، <use>
تھوڑی قیمت کے ساتھ آتا ہے۔ یعنی ہمیں ایک کا اضافہ کرنا ہوگا۔ id
اس عنصر کے لیے جسے ہم دوبارہ استعمال کرنا چاہتے ہیں۔
<rect id="b" width="100" height="30"/>
<use href="#b" x="110"/>
<use href="#b" x="-55" y="40"/>
<use href="#b" x="55" y="40"/>
<use href="#b" x="165" y="40"/>
سب سے چھوٹا id
ایک کردار ممکن ہے، اس لیے میں نے اینٹ کے لیے "b" کا انتخاب کیا۔ دی <use>
عنصر کو اسی طرح رکھا جاسکتا ہے۔ <rect>
، کے ساتھ x
اور y
اوصاف بطور آفسیٹ۔ چونکہ اب ہر اینٹ پوری چوڑائی ہے جس پر ہم نے سوئچ کر دیا ہے۔ <use>
(یاد رکھیں، ہم نے پیٹرن ٹائل کی دوسری قطار میں اینٹوں کو واضح طور پر آدھا کر دیا ہے)، ہمیں منفی استعمال کرنا ہوگا x
دوسری قطار میں قدر، پھر یقینی بنائیں کہ اینٹوں کے درمیان ہموار کنکشن کے لیے آخری اینٹ ٹائل سے بہہ گئی ہے۔ یہ ٹھیک ہیں، اگرچہ، کیونکہ پیٹرن ٹائل سے باہر جو بھی گرتا ہے وہ خود بخود کاٹ دیا جاتا ہے۔
کیا آپ کچھ دہرائے جانے والے تاروں کو دیکھ سکتے ہیں جو زیادہ موثر انداز میں لکھی جا سکتی ہیں؟ آئیے ان پر کام کرتے ہیں۔
راستے پر دوبارہ لکھنا (-54B، 100B کل)
<path>
SVG میں شاید سب سے طاقتور عنصر ہے۔ آپ اس میں "کمانڈز" کے ساتھ کسی بھی شکل کو کھینچ سکتے ہیں۔ d
وصف. 20 کمانڈز دستیاب ہیں، لیکن ہمیں مستطیل کے لیے صرف آسان ترین کمانڈز کی ضرورت ہے۔
یہ ہے جہاں میں اس کے ساتھ اترا ہوں:
<path d="M0 0h100v30h-100z M110 0h100v30h-100 M0 40h45v30h-45z M55 40h100v30h-100z M165 40h55v30h-55z"/>
میں جانتا ہوں، انتہائی عجیب نمبر اور حروف! ان سب کے معنی ہیں۔، بلکل. یہاں یہ ہے کہ اس مخصوص معاملے میں کیا ہو رہا ہے:
M{x} {y}
: نقاط کی بنیاد پر ایک نقطہ پر منتقل ہوتا ہے۔z
: موجودہ سیگمنٹ کو بند کرتا ہے۔h{x}
: کی لمبائی کے ساتھ، موجودہ نقطہ سے ایک افقی لکیر کھینچتا ہے۔x
کے نشان کے ذریعہ بیان کردہ سمت میںx
. لوئر کیسx
ایک رشتہ دار کوآرڈینیٹ کی نشاندہی کرتا ہے۔v{y}
: کی لمبائی کے ساتھ، موجودہ نقطہ سے عمودی لکیر کھینچتا ہے۔y
کے نشان کے ذریعہ بیان کردہ سمت میںy
. لوئر کیسy
ایک رشتہ دار کوآرڈینیٹ کی نشاندہی کرتا ہے۔
یہ مارک اپ پچھلے سے کہیں زیادہ ترس ہے (لائن بریکس اور انڈینٹیشن وائٹ اسپیس صرف پڑھنے کے قابل ہے)۔ اور، ارے، ہم ابتدائی سائز کے نصف کو کاٹنے میں کامیاب ہو گئے ہیں، 100 بائٹس پر پہنچ کر۔ پھر بھی، کچھ مجھے ایسا محسوس ہوتا ہے کہ یہ چھوٹا ہو سکتا ہے…
ٹائل پر نظر ثانی (-38B، کل 62B)
کیا ہمارے پیٹرن ٹائل میں دہرانے والے حصے نہیں ہیں؟ یہ واضح ہے کہ پہلی قطار میں ایک پوری اینٹ دہرائی گئی ہے، لیکن دوسری قطار کا کیا ہوگا؟ یہ دیکھنا تھوڑا مشکل ہے، لیکن اگر ہم درمیانی اینٹ کو آدھی کاٹ دیں تو یہ واضح ہو جاتا ہے۔
ٹھیک ہے، درمیانی اینٹ بالکل آدھی نہیں کٹی ہے۔ تھوڑا سا آفسیٹ ہے کیونکہ ہمیں بھی فرق کا حساب دینا ہوگا۔ بہرحال، ہمیں ابھی ایک آسان بیس ٹائل پیٹرن ملا ہے، جس کا مطلب ہے کم بائٹس! اس کا مطلب یہ بھی ہے کہ ہمیں نصف کرنا ہے۔ width
ہمارے <pattern>
عنصر 220 سے 110 تک۔
<pattern id="p" width="110" height="80" patternUnits="userSpaceOnUse"> <!-- pattern content here -->
</pattern>
اب دیکھتے ہیں کہ آسان ٹائل کو کس طرح تیار کیا جاتا ہے۔ <path>
:
<path d="M0 0h100v30h-100z M0 40h45v30h-45z M55 40h55v30h-55z"/>
سائز کم کر کے 62 بائٹس کر دیا گیا ہے، جو پہلے ہی اصل سائز کے ایک تہائی سے بھی کم ہے! لیکن یہاں کیوں رکیں جب ہم اور بھی بہت کچھ کر سکتے ہیں!
پاتھ کمانڈز کو مختصر کرنا (-9B، کل 53B)
اس میں تھوڑا گہرائی میں جانے کے قابل ہے۔ <path>
عنصر کیونکہ یہ SVG پیٹرن کو بہتر بنانے کے لیے مزید اشارے فراہم کرتا ہے۔ ایک غلط فہمی جو مجھے کام کرتے وقت ہوئی تھی۔ <path>
کے بارے میں ہے کہ کس طرح fill
وصف کے کام اپنے بچپن میں ایم ایس پینٹ کے ساتھ بہت کچھ کھیلنے کے بعد، میں نے سیکھا ہے کہ جس شکل کو میں ٹھوس رنگ سے بھرنا چاہتا ہوں اسے بند کرنا ہوگا، یعنی کوئی کھلا پوائنٹ نہیں ہونا چاہیے۔ دوسری صورت میں، پینٹ شکل سے باہر نکل جائے گا اور ہر چیز پر پھیل جائے گا.
SVG میں، تاہم، یہ سچ نہیں ہے۔ میں حوالہ دیتا ہوں۔ تفصیلات خود:
فل آپریشن فل آپریشن کر کے کھلے سب پاتھ کو بھرتا ہے گویا سب پاتھ کے آخری پوائنٹ کو سب پاتھ کے پہلے پوائنٹ سے جوڑنے کے لیے پاتھ میں ایک اضافی "کلوز پاتھ" کمانڈ شامل کی گئی ہے۔
اس کا مطلب ہے کہ ہم قریبی راستے کے حکموں کو چھوڑ سکتے ہیں (z
)، کیونکہ ذیلی راستے بھرے جانے پر خود بخود بند سمجھے جاتے ہیں۔
پاتھ کمانڈز کے بارے میں جاننے کے لیے ایک اور کارآمد چیز یہ ہے کہ وہ بڑے اور چھوٹے کی مختلف حالتوں میں آتے ہیں۔ چھوٹے حروف کا مطلب ہے کہ متعلقہ نقاط استعمال کیے جاتے ہیں؛ بڑے حروف کا مطلب ہے کہ اس کی بجائے مطلق نقاط استعمال کیے جاتے ہیں۔
یہ اس کے ساتھ اس سے تھوڑا سا مشکل ہے۔ H
اور V
کمانڈز کیونکہ ان میں صرف ایک کوآرڈینیٹ شامل ہوتا ہے۔ یہاں ہے کہ میں ان دو حکموں کو کس طرح بیان کروں گا:
H{x}
: کوآرڈینیٹ کرنے کے لیے موجودہ نقطہ سے ایک افقی لکیر کھینچتا ہے۔x
.V{y}
: کوآرڈینیٹ کرنے کے لیے موجودہ نقطہ سے عمودی لکیر کھینچتا ہے۔y
.
جب ہم پیٹرن ٹائل میں پہلی اینٹ کھینچ رہے ہیں، تو ہم سے شروع کرتے ہیں۔ (0,0)
کوآرڈینیٹ پھر ہم ایک افقی لکیر کھینچتے ہیں۔ (100,0)
اور ایک عمودی لائن (100,30)
، اور آخر میں، ایک افقی لکیر کھینچیں۔ (0,30)
. ہم نے استعمال کیا۔ h-100
آخری لائن میں کمانڈ، لیکن یہ اس کے برابر ہے۔ H0
جو کہ پانچ کے بجائے دو بائٹس ہے۔ ہم دو ملتے جلتے واقعات کو بدل سکتے ہیں اور اپنے کوڈ کو پیئر کر سکتے ہیں۔ <path>
اس کے نیچے:
<path d="M0 0h100v30H0 M0 40h45v30H0 M55 40h55v30H55"/>
مزید 9 بائٹس منڈوائے گئے — ہم کتنے چھوٹے جا سکتے ہیں؟
برجنگ (-5B، 48B کل)
ہمارے مکمل طور پر بہتر بنائے گئے SVG پیٹرن کی راہ میں سب سے طویل کمانڈز "Move to" کمانڈز ہیں جو بالترتیب 4، 5 اور 6 بائٹس لیتے ہیں۔ ہمارے پاس ایک پابندی یہ ہے کہ:
ایک پاتھ ڈیٹا سیگمنٹ (اگر کوئی ہے) "moveto" کمانڈ سے شروع ہونا چاہیے۔
لیکن یہ ٹھیک ہے۔ پہلا ویسے بھی سب سے چھوٹا ہے۔ اگر ہم قطاروں کو تبدیل کرتے ہیں، تو ہم ایک راستے کی تعریف کے ساتھ آ سکتے ہیں جہاں ہمیں صرف اینٹوں کے درمیان افقی یا عمودی طور پر حرکت کرنا ہوگی۔ کیا ہوگا اگر ہم استعمال کرسکتے ہیں۔ h
اور v
اس کے بجائے وہاں حکم دیتا ہے۔ M
?
مندرجہ بالا خاکہ دکھاتا ہے کہ کس طرح ایک ہی راستے سے تین شکلیں کھینچی جا سکتی ہیں۔ نوٹ کریں کہ ہم اس حقیقت کا فائدہ اٹھا رہے ہیں کہ fill
آپریشن خود بخود کے درمیان کھلے حصے کو بند کر دیتا ہے۔ (110,0)
اور (0,0)
. اس دوبارہ ترتیب کے ساتھ، ہم نے خلا کو بھی دوسری قطار میں پوری چوڑائی والی اینٹ کے بائیں طرف منتقل کر دیا۔ یہاں یہ ہے کہ کوڈ کیسا لگتا ہے، پھر بھی فی لائن ایک اینٹ میں ٹوٹا ہوا ہے۔
<path d="M0 0v30h50V0 h10v30h50 v10H10v30h100V0"/>
یقینی طور پر، ہمیں اب سب سے چھوٹا حل مل گیا ہے جب کہ ہم 48 بائٹس سے نیچے ہیں، ٹھیک ہے؟! ویسے…
ہندسوں کو تراشنا (-4B، کل 44B)
اگر آپ طول و عرض کے ساتھ قدرے لچکدار ہو سکتے ہیں، تو ایک اور چھوٹا طریقہ ہے جس سے ہم SVG پیٹرنز کو بہتر بنا سکتے ہیں۔ ہم ایک اینٹ کی چوڑائی کے ساتھ کام کر رہے ہیں۔ 100
پکسلز، لیکن یہ تین بائٹس ہے۔ اسے تبدیل کرنا 90
مطلب ایک کم بائٹ جب بھی ہمیں اسے لکھنے کی ضرورت ہوتی ہے۔ اسی طرح، ہم نے ایک فرق کا استعمال کیا 10
پکسلز - لیکن اگر ہم اسے تبدیل کرتے ہیں۔ 8
اس کے بجائے، ہم ان واقعات میں سے ہر ایک پر ایک بائٹ محفوظ کرتے ہیں۔
<path d="M0 0v30h45V0 h8v30h45 v8H8v30h90V0"/>
یقینا، اس کا مطلب یہ بھی ہے کہ ہمیں پیٹرن کے طول و عرض کو اسی کے مطابق ایڈجسٹ کرنا ہوگا۔ یہاں حتمی اصلاح شدہ SVG پیٹرن کوڈ ہے:
<pattern id="p" width="98" height="76" patternUnits="userSpaceOnUse"> <path d="M0 0v30h45V0h8v30h45v8H8v30h90V0"/>
</pattern>
اوپر کے ٹکڑوں میں دوسری سطر - اشارے کو شمار نہیں کرنا - ہے۔ 44 بائٹس. ہم چھ تکرار میں 197 بائٹس سے یہاں پہنچے۔ یہ ایک chunky ہے سائز میں 77.7 فیصد کمی!
میں حیران ہوں اگرچہ… کیا یہ واقعی سب سے چھوٹا سائز ہے؟ کیا ہم نے SVG پیٹرن کو بہتر بنانے کے تمام ممکنہ طریقوں پر غور کیا ہے؟
میں آپ کو اس کوڈ کو آزمانے اور مزید کم کرنے کی دعوت دیتا ہوں، یا یہاں تک کہ SVG پیٹرن کو بہتر بنانے کے لیے متبادل طریقوں کے ساتھ تجربہ کریں۔ میں یہ دیکھنا پسند کروں گا کہ کیا ہم ہجوم کی حکمت کے ساتھ حقیقی عالمی کم از کم تلاش کر سکتے ہیں!
SVG پیٹرن بنانے اور بہتر بنانے کے بارے میں مزید
اگر آپ SVG پیٹرن بنانے اور بہتر بنانے کے بارے میں مزید جاننا چاہتے ہیں، تو میرا مضمون پڑھیں SVG فلٹرز کے ساتھ پیٹرن بنانا. یا، اگر آپ 60+ پیٹرن کی ایک گیلری کو دیکھنا چاہتے ہیں، تو آپ دیکھ سکتے ہیں۔ پیٹیٹ پیٹرنز کوڈ پین مجموعہ. آخر میں، آپ کو دیکھنے کا خیرمقدم ہے۔ یوٹیوب پر میرے سبق SVG پیٹرن میں مزید گہرائی تک جانے میں آپ کی مدد کرنے کے لیے۔
SVG پیٹرنز کو ان کے سب سے چھوٹے سائز میں بہتر بنانا اصل میں شائع ہوا سی ایس ایس - ٹیکنیکس. تمہیں چاہئے نیوز لیٹر حاصل کریں.
- "
- 10
- 100
- 77
- 9
- 98
- ہمارے بارے میں
- مطلق
- اکاؤنٹ
- ایڈیشنل
- تمام
- اجازت دے رہا ہے
- پہلے ہی
- ایک اور
- نقطہ نظر
- رقبہ
- مضمون
- اوصاف
- دستیاب
- ایکسس
- بٹ
- سیاہ
- چیلنج
- تبدیل
- بند
- کوڈ
- کامن
- کنکشن
- پر مشتمل ہے
- مواد
- محدد
- سکتا ہے
- تخلیق
- موجودہ
- اعداد و شمار
- گہرے
- نیچے
- ختم ہو جاتا ہے
- قائم
- سب کچھ
- مثال کے طور پر
- اس کے علاوہ
- تجربہ
- آخر
- پہلا
- فٹ
- بہاؤ
- ملا
- مزید
- فرق
- حاصل کرنے
- گلوبل
- ہونے
- اونچائی
- مدد
- یہاں
- روشنی ڈالی گئی
- کس طرح
- HTTPS
- شناخت
- تصویر
- شامل
- شامل
- IT
- خود
- جانا جاتا ہے
- لیک
- جانیں
- سیکھا ہے
- لیورنگنگ
- لائن
- تھوڑا
- دیکھا
- محبت
- بناتا ہے
- بنانا
- میں کامیاب
- ریاضی
- برا
- زیادہ
- سب سے زیادہ
- منتقل
- MS
- تعداد
- تعداد
- آفسیٹ
- ٹھیک ہے
- کھول
- اصلاح
- دوسری صورت میں
- پاٹرن
- جسمانی
- پوائنٹ
- پوزیشن میں
- ممکن
- طاقتور
- خوبصورت
- قیمت
- عمل
- فراہم کرتا ہے
- معیار
- منہاج القرآن
- چل رہا ہے
- کہا
- ہموار
- سیریز
- مقرر
- سائز
- اسی طرح
- سادہ
- چھ
- سائز
- So
- حل
- کچھ
- خلا
- کمرشل
- شروع کریں
- شروع ہوتا ہے
- تائید
- بات کر
- کے ذریعے
- سب سے اوپر
- شفاف
- سبق
- استعمال کی شرائط
- قیمت
- لنک
- W3
- دیکھیئے
- آپ کا استقبال ہے
- کیا
- کے اندر
- بغیر
- کام
- کام کر
- کام کرتا ہے
- قابل
- یو ٹیوب پر