ذمہ دار SVGS کے لئے 10 گولڈن قواعد

Sep 11, 2025
کيسے

SVG کے بہت سے فوائد - انفرادی طور پر سکلیبل ویکٹر تصاویر، ڈوم کے ساتھ چھوٹے فائل کے سائز اور براہ راست انضمام سمیت - یہ ایک قدرتی فٹ بنا دیتا ہے ذمہ دار ویب ڈیزائن . SVG کی تفصیلات کے باوجود ایک دہائی کی عمر ہونے کے باوجود، یہ بہت سے براؤزرز اور ٹولز میں نسبتا حالیہ معاونت کا مطلب یہ ہے کہ اب بھی بہت سے چالیں، چھتوں اور گوٹھس موجود ہیں جو بھی تجربہ کار ویب ڈیزائنرز اور ڈویلپرز کو پکڑتے ہیں.

یہاں، میں نے ان میں سے 10 گولڈن قوانین کے طور پر سب سے اہم خلاصہ کیا ہے.

01. اپنے اوزار کو درست طریقے سے مقرر کریں

جیسا کہ ایک دستکاری کے طور پر کام شروع کرنے سے پہلے اپنے اوزار کو تیز کرتا ہے، جو کوئی SVG کے ساتھ کام کر رہا ہے ان کے ایپلی کیشنز کو سب سے زیادہ موثر اور مرضی کے مطابق طریقہ میں ویکٹر کی شکل فراہم کرنے کے لئے مقرر کرنا ضروری ہے. لاگو کرنے کے لئے کئی ترتیبات موجود ہیں.

سب سے پہلے، جب تک کہ دوسری صورت میں کرنے کے لئے زبردست وجوہات نہیں ہیں، آپ کے ویکٹر کے آلے میں 'پکسلز' کی پیمائش مقرر کریں. جبکہ یہ SVG سے کوئی فرق نہیں پڑتا ہے (جو پیمائش کرے گا ViewBox. اور تقریبا کسی بھی پیمائش کے نظام میں خوشی سے عناصر) یہ انچ کے پرنٹ ڈیفالٹ کے بجائے عام سی ایس ایس یونٹس کا استعمال کرتے ہوئے SVG ڈرائنگ کو تیار کرنے کے لئے سمجھتا ہے؛ اور یہ بھی شامل کرنے میں بہت آسان بناتا ہے media. سوالات اور بعد میں دیگر مداخلت.

کینوس کے علاقے کو اس سے کہیں زیادہ ضرورت نہیں ہے. Bitmap تصاویر کی طرح، SVG میں کسی بھی 'خالی جگہ' استعمال نہیں کی جائے گی، اور سی ایس ایس مارجن کے ساتھ سب سے بہتر متبادل ہے. نوٹ کریں کہ بہت سے ویکٹر کے اوزار، جیسے خاکہ، منتخب عناصر کے لئے کینوس کے علاقے کو خود کار طریقے سے 'فصل' کرے گا.

ایک ہی وقت میں، کینوس کے علاقے عناصر کے عین مطابق کناروں پر فصل نہ کریں. antialiasing اب بھی SVG پر لاگو کیا جائے گا، اور یہ بھی بند کر دیا جائے گا colialiasing بھی فصل بھی. اس کے بجائے، کم از کم 2px واضح کریں جہاں کہیں بھی کینوس کے کنارے ایک عنصر کے قریب آتا ہے.

ذمہ داری اور کارکردگی قریب سے متعلق ہیں، لہذا دو پوائنٹس سے زیادہ نہیں ہونے کے لئے ڈس کلیمر صحت سے متعلق مقرر کریں. SVG انٹیگرز میں نہیں سوچتا ہے، لہذا ویکٹر پوائنٹ 1.45882721px کی قیمت ہوسکتی ہے. یہ انتہائی صحت سے متعلق مکمل طور پر غیر ضروری ہے، اور صرف کوڈ بلٹ اور فائل کا سائز میں اضافہ ہوتا ہے، لہذا اس وقت اس کو ختم کرنا بہتر ہے.

اسی طرح، ممکنہ طور پر چند پوائنٹس کے طور پر استعمال کرتے ہوئے ویکٹر سائز ڈرا. بہت سے نئے ڈیزائنرز فرض کرتے ہیں کہ زیادہ پوائنٹس بہتر ہے، جب ریورس اصل میں سچ ہے: چند پوائنٹس، اچھی طرح رکھے، ایک عنصر پر زیادہ کنٹرول فراہم کرتے ہیں، جبکہ فائل کا سائز بھی کم کر دیتا ہے.

اگر آپ کو ویکٹر فائلوں کو دیا جاتا ہے جو اس اصول کی پیروی نہیں کرتے، فکر مت کرو - سب سے زیادہ ویکٹر آرٹ ایپلی کیشنز میں ایک 'آسان' کا اختیار ہے جسے آپ اس کی شکل کو تبدیل کرنے کے بغیر ایک عنصر میں پوائنٹس کی تعداد کو کم کرنے کے لئے استعمال کرسکتے ہیں. متبادل طور پر، تفصیلی کام کے لئے میں ایک پلگ ان کی طرح مایوس گرافکس 'ویکٹر سرور کی طرح مشورہ دیتا ہوں.

02. اونچائی اور چوڑائی کی صفات کو ہٹا دیں

زیادہ تر اطلاقات ان کے SVG برآمد میں بہت سے ملکیتی، غیر ضروری کوڈ شامل ہیں. سب سے زیادہ SVG فائلوں کے آغاز میں صرف ضروری کوڈ مندرجہ ذیل ہے: 

 & lt؛ svg xmlns = "http://www.w3.org/2000/svg" ViewBox = "0 0 500 500" اور GT؛
& lt؛! - SVG کوڈ یہاں - & GT؛
& lt؛ / svg & gt؛

ہمارے مقاصد کے لئے، سب سے اہم پہلو اس کی ہٹانے والا ہے چوڑائی اور اونچائی خاصیت ہے کہ زیادہ تر ایپلی کیشنز خود کار طریقے سے شامل ہیں. یہ جدید براؤزرز میں SVG مکمل طور پر ذمہ دار بناتا ہے.

اگر آپ SVGS کی بہت سی پروسیسنگ کر رہے ہیں، یا جلدی میں ہیں، تو آپ کو اس قدم کو ہاتھ سے مکمل کرنے کی ضرورت نہیں ہے. اس کے بجائے، آپ تیسرے گولڈن اصول میں درج کردہ تجاویز پر عمل کر سکتے ہیں ...

03. SVG پیداوار کو بہتر بنانے اور کمائیں

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly

ذہین ہاتھ سے ترمیم اور پوسٹ پروڈکشن کی اصلاح کا ایک مجموعہ SVG فائل کے سائز کو نمایاں طور پر کم کر سکتا ہے

جو بھی آپ کے آلے کو آپ اپنے SVG مواد بنانے کے لئے استعمال کرتے ہیں، یہ اب بھی قابل قدر ہے کہ اس کے آؤٹ پٹ کے ذریعہ اس کی پیداوار کی طرح svgomg. ، جو کوڈ کو نشان زد کرے گا. عام طور پر، آپ فائل کے سائز میں تقریبا 20 سے 80 فی صد بچا سکتے ہیں. اسی کوڈ کو مقامی طور پر مربوط کیا جا سکتا ہے ایک گلپ یا گرنٹ ٹاسک کے طور پر .

04. IE کے لئے کوڈ میں ترمیم کریں

اصول 2 کا ذکر کیا گیا ہے کہ درست طریقے سے بہتر بنایا گیا SVGS جدید براؤزرز میں مکمل طور پر ذمہ دار ہیں. یہ سچ ہے اگر ہم مائیکروسافٹ کنارے کو ایک جدید براؤزر کے طور پر شمار کرتے ہیں. IE 9-11 کے لئے، ہمارے پاس ایڈریس کرنے کے چند مسائل ہیں. اگر ہم ایک تصویر کے طور پر SVG استعمال کر رہے ہیں: 

 & lt؛ img src = "countdown.svg alt =" الٹی گنتی "اور GT؛

ہم IE9-11 کو سی ایس ایس کی خاصیت منتخب کنندہ کا استعمال کرتے ہوئے صحیح طریقے سے تصویر کو ظاہر کرنے کے لئے مجبور کر سکتے ہیں: 

 IMG [SRC $ = ". SVG"] {چوڑائی: 100٪؛}

SVG تصاویر عام پیداوار میں اچھی طرح سے کام کرتے ہیں، لیکن محدود انٹرویو ہے: زیادہ تر براؤزر ایک صفحے پر رکھی گئی SVG کے اندر اندر انٹرایکٹوٹی اور حرکت پذیری کو نظر انداز کریں گے . اس کے علاوہ، SVG تصاویر براؤزر کے لئے اضافی HTTP درخواست ہیں.

ان اور دیگر وجوہات کے لئے، SVG تیزی سے ان لائن استعمال کیا جاتا ہے. اس صورت میں، SVG کوڈ IE کے لئے تھوڑا زیادہ علاج کی ضرورت ہے: 

 & lt؛ جسم اور جی ٹی؛
...
& lt؛ svg xmlns = "http://www.w3.org/2000/svg" ViewBox = "0 0 525 365" airerveaspectratio = "Xmidymin سلائس" اور GT؛

کے علاوہ میں airerveaspectratio. خصوصیت، یعنی تصویر کی صحیح سکیننگ کو بچانے کے لئے تھوڑا زیادہ رہنمائی کی ضرورت ہے: SVG کی چوڑائی لے لو ( 365. اس صورت میں)، اس کی اونچائی کی طرف سے تقسیم کریں ( 525. ) اور نتیجے میں 100 فی صد کے نتیجے میں. یہ بن جائے گا پڈنگنگ نیچے SVG کے لئے قیمت، 'پروپنگ' یہ اس کے صحیح پہلو تناسب میں SVG کو ظاہر کرنے کے لئے کافی کھلی ہے: 

 & lt؛ جسم اور جی ٹی؛
...
& lt؛ svg xmlns = "http://www.w3.org/2000/svg" ViewBox = "0 0 525 365"
airerveaspectratio = "xmidymin سلائس"
انداز = "چوڑائی: 100٪؛ پڈنگنگ-نیچے: 69.52٪؛ اونچائی: 1px؛ اوور بہاؤ: دکھائی دیتی ہے" & gt؛

یاد رکھیں کہ، چیزوں کو جامع اور واضح رکھنے کے لۓ، اس مضمون کے باقی حصوں میں کوڈ نمونے ان تبدیلیوں میں شامل نہیں ہیں. امیلیا بیلیمی رائڈ نے لکھا ہے SVG سکیننگ پر بہترین مضمون .

05. ہیرو ٹیکسٹ کے لئے SVG پر غور کریں

Using SVG for hero text means it will automatically scale in line with its container

ہیرو ٹیکسٹ کے لئے SVG کا استعمال کرتے ہوئے یہ مطلب یہ ہے کہ یہ خود کار طریقے سے اس کے کنٹینر کے ساتھ پیمائش کرے گا

فی الحال اس کے کنٹینر میں متن کے سائز کے لئے کوئی سی ایس ایس معیار نہیں ہے. VW یونٹس کا استعمال کرتے ہوئے متن کو پیمانے پر ممکن ہے، لیکن یہ تقریبا کم از کم دو میڈیا سوالات کی مداخلت کی ضرورت ہوتی ہے 'کلپ' کو مخصوص نظریاتی حدود میں متن. تاہم، SVG متن خود کار طریقے سے ایک کنٹینر کا سائز تبدیل کرے گا: 

 & lt؛ ہیڈر اور جی ٹی؛
& lt؛ svg xmlns = "http://www.w3.org/2000/svg" ViewBox = "0 0 285 80" اور GT؛
& lt؛ متن x = "0" y = "66" & gt؛ کاؤی اور ایل ٹی؛ / متن اور جی ٹی؛
& lt؛ / svg & gt؛
& lt؛ / ہیڈر اور جی ٹی؛

سی ایس ایس: 

 ہیڈر SVG متن {
فونٹ وزن: 900؛ فونٹ سائز: 90px؛ بھریں: بلیو؛
}

SVG ان لائن کو برقرار رکھنے کے لۓ رسائی اور SEO کی قیمت کو برقرار رکھتا ہے، اور اس صفحے میں پہلے سے ہی کسی بھی فونٹ کا استعمال کرتے ہوئے متن کو سٹائل کرنے کی اجازت دیتا ہے. دیکھو یہاں مزید معلومات کے لیے.

06. ترقی پسند شبیہیں کے لئے جگہ میں چوڑائی اور اونچائی چھوڑ دو

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized

ایک غیر سکیننگ اسٹروک لائن اس تقریر بلبلا پر لاگو کیا گیا ہے لہذا یہ چوڑائی میں تبدیل نہیں ہوتا جب دیکھنے کے بعد

حکمران 2 کی ایک استثناء شبیہیں اور چھوٹے علامات ہیں، جو ان کو برقرار رکھنا چاہئے چوڑائی اور اونچائی خاصیت اگر آپ چاہتے ہیں کہ انہیں ترقی پذیر طور پر بڑھایا جائے. 

 & lt؛ ایک href = "http://codepen.io" & gt؛
    & lt؛ SVG رول = "img" aria-lable = "codepen" چوڑائی = "50" اونچائی = "50" اور جی ٹی؛
        & lt؛ عنوان اور جی ٹی؛ کوڈڈین اور ایل ٹی؛ / عنوان اور جی ٹی؛
        & lt؛ استعمال کریں xlink: href = "# codepen" / & gt؛
    & lt؛ / svg & gt؛
& lt؛ / & gt؛
...
& lt؛ svg style = "ڈسپلے: کوئی بھی نہیں؛" & gt؛
    & lt؛ علامت id = "codepen" ViewBox = "0 0 50 50" اور GT؛
        & lt؛ راہ D = "..." / & gt؛
    & lt؛ / علامت اور جی ٹی؛
& lt؛ / svg & gt؛

آپ کارروائی میں اس ٹیکنالوجی کا ایک مثال دیکھ سکتے ہیں یہاں .

اگر ہم صرف سی ایس ایس کے ساتھ SVG شبیہیں کا سائز کرتے ہیں، اور سائٹ کے سٹائل شیٹ لوڈ نہیں ہوتی، شبیہیں ایک متبادل عنصر کے پہلے سے طے شدہ سائز پر نظر آئیں گے: 300px ایکس 150px. خاصیت کے طور پر اونچائی اور چوڑائی کو برقرار رکھنے سے، ہم انہیں ڈیفالٹ کی طرف سے قریبی مناسب رابطے کے سائز میں سائز کرسکتے ہیں، اور ہمارے سی ایس ایس کو استعمال کرنے کے لۓ استعمال کرتے ہیں.

07. بال لائنز پتلی رکھنے کے لئے ویکٹر اثرات کا استعمال کریں

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

 راہ {
    بھریں: #FFF؛ اسٹروک: # 111؛
    اسٹروک چوڑائی: 2؛
    ویکٹر اثر: غیر سکیننگ اسٹروک؛
}

ذرا دیکھنا اسے اس ٹیکنالوجی کا ایک مکمل مثال .

08. بٹمپس کو یاد رکھیں

بہت سے ڈویلپرز کا فرض ہے کہ SVG صرف ویکٹروں کا استعمال کرسکتا ہے، لیکن JPEGs اور PNGS بھی SVG ڈرائنگ پر لاگو کیا جا سکتا ہے. اور جب تک آپ نے ابھی تک میرے قوانین کی پیروی کی ہے، ان تصاویر کو ذمہ دار ہو جائے گا جب آپ بطور بطور شامل کریں گے ٹیگ: 

 & lt؛ تصویری چوڑائی = "1024" اونچائی = "768" XLINK: HREF = "Lake-Louise.jpg" x = "1300" y = "150" رول = "تصویر" عنوان = "crossnest پاس" اور GT؛ & lt؛ / تصویری اور جی ٹی؛

09. انکولی حل پر غور کریں

The classic Coca-Cola logo rendered at different adaptive sizes

کلاسک کوکا کولا علامت (لوگو) مختلف انضمام سائز پر فراہم کی

چیزیں بنانا 'Squish' صرف ذمہ دار ڈیزائن کا ایک حصہ ہے. کیا RWD کے بارے میں ہے، انکولی ڈیزائن کے بڑے احساس میں، تمام Viewport سائز میں مناسب مواد پیش کر رہا ہے.

یہ مختلف طریقوں سے حاصل کیا جاسکتا ہے. Responsivelogos.co.uk مثالوں کی ایک سلسلہ فراہم کرتا ہے جو SVG sprites کا استعمال کرتے ہیں، لیکن میں 'برانڈنگ ماڈیولز' کو کال کرنے کے لئے ایس یو جی میں میڈیا سوالات کو ضم کرنے کی ترجیح دیتے ہیں. یہ نقطہ نظر مجھے اجزاء کی نمائش کو شامل کرنے، ہٹانے اور ترمیم کرنے کے قابل بناتا ہے. انکولی برانڈنگ ماڈیولز کے بارے میں مزید پڑھیں میرے مضمون میں .

یہ ایک ہی تکنیک ڈایاگرام، عکاسی، نقشے اور زیادہ کے لئے استعمال کیا جا سکتا ہے. سب سے آسان ماڈیولز میں، سی ایس ایس خود کو SVG کے اندر لکھا جا سکتا ہے، یہ ہر جگہ استعمال کرنے کے قابل بناتا ہے، جیسا کہ پچھلے قاعدہ میں بیان کیا جاتا ہے.

10. SVG میں میڈیا سوالات کو ضم

بہت سے لوگ نہیں جانتے کہ سی ایس ایس میڈیا سوالات SVG خود کے اندر لکھا جا سکتا ہے: 

 & lt؛ svg xmlns = "http://www.w3.org/2000/svg" ViewBox = "14 82 272 139" اور جی ٹی؛
& lt؛ Defs & gt؛
& lt؛ سٹائل اور جی ٹی؛
svg g {منتقلی: 1s؛ }
media تمام اور (زیادہ سے زیادہ چوڑائی: 90Mem) {
#drink، #coke {دھندلاپن: 0؛ }
}
& lt؛ / سٹائل اور جی ٹی؛
& lt؛ / defs & gt؛
& lt؛ جی آئی ڈی = "کوکا کولا" اور جی ٹی؛
& lt؛ راہ D = "M109.6 ... & GT؛

یہ نوٹ کرنا ضروری ہے کہ ذرائع ابلاغ کے سوال صرف عنصر کو دیکھ سکتے ہیں کہ عنصر اس کے اندر اندر ہے: یہ ہے کہ، کسی بھی پیمائش کو عنصر خود سے متعلق ہے، صفحہ نہیں. اس نقطہ نظر کا ایک ممکنہ اثر یہ ہے کہ SVG کے کینوس کے علاقے ہمیشہ اسی طرح رہیں گے، اس کے اندر عناصر سے متعلق ہیں.

اس کے نتیجے میں چھوٹے نقطہ نظر کے سائز میں بہت چھوٹے عناصر کا نتیجہ ہوسکتا ہے، جس میں نسبتا بڑے کینوس کے علاقے میں شامل ہوتا ہے. اس کے بہت سے حل بھی شامل ہیں ViewBox کا سائز تبدیل کریں اور عناصر کو معاوضہ دینے کے لئے سکیننگ .

نتیجہ

SVG کی لامتناہی سکالٹیبل اس کی سب سے بڑی اثاثہ ہے، لیکن ایک خصوصیت جو اب بھی براؤزر اور ویکٹر گرافکس ایڈیٹرز کی طرف سے کچھ بھی نہیں ہے. آپ کی پیداوار کے کام کے بہاؤ میں ان ہدایات کو ضم کر اپنی ٹیم میں دوسروں کو بات چیت کرتے ہوئے، آپ ویب کے لئے آسانی سے ذمہ دار SVG تشکیل دے سکتے ہیں، آپ کو ہر روز ترقی میں استعمال کرنے والے اثاثوں کا حصہ بنانا.

یہ مضمون اصل میں شائع ہوا نیٹ میگزین مسئلہ 283؛ اسے خریدیں !

متعلقہ مضامین:

  • 12 کو کوڈ ٹیسٹنگ کے اوزار لازمی ہیں
  • اپنے سکیٹنگ کی مہارت کو تیز کریں
  • GSAP کے ساتھ سپر چارج SVG حرکت پذیری

کيسے - انتہائی مشہور مضامین

ایچ ٹی ایم ایل کوڈ کیسے لکھنا

کيسے Sep 11, 2025

(تصویری کریڈٹ: مستقبل) جدید ویب سائٹس کو بہت سے ایچ ٹی ایم ایل کوڈ ..

آپ سب کو جاوا اسکرپٹ کوڈ تقسیم کرنے کے بارے میں جاننے کی ضرورت ہے

کيسے Sep 11, 2025

جدید سائٹس اکثر ان کے تمام جاوا اسکرپٹ کو ایک ہی، بڑے میں جمع کرتے ہیں ..

10 حیرت انگیز چیزیں جو آپ تہوں کے ساتھ کر سکتے ہیں

کيسے Sep 11, 2025

تہوں کو آپ کو ابتدائی بنیادوں سے مکمل طور پر ختم ہونے والی چھتوں سے ایک �..

سی ایس ایس گرڈ کے ساتھ ایک ذمہ دار ترتیب بنائیں

کيسے Sep 11, 2025

سی ایس ایس گرڈ ترتیب ہر دن براؤزر کی حمایت میں بڑھتی ہوئی ہے اور ہ..

ردعمل کے ساتھ ڈیش بورڈ اپلی کیشن کیسے بنائیں

کيسے Sep 11, 2025

صفحہ 1 کا 2: ردعمل میں ڈیش بورڈ اپلی کیشن بنائیں - 1-10 اقداما..

ایک VR سیٹ میں تصویر تبدیل کریں

کيسے Sep 11, 2025

عام طور پر جب کسی کو کسی حقیقت یا مجازی حقیقت کا ذکر کیا جاتا ہے، تو وہ و�..

منصوبے فیلکس کے ساتھ 3D میں اپنے 2D ڈیزائن کو تبدیل کریں

کيسے Sep 11, 2025

ایڈوب کے نئے کی حالیہ پری ریلیز فیلکس 3D پیکیج 2D سے 3D تصویر سازی سے چھلانگ لینے کے لئے یہ بہت اچھا و�..

فوٹوشاپ میں تصاویر کو مطابقت دینے کے لئے حتمی گائیڈ

کيسے Sep 11, 2025

تمام فوٹوشاپ منصوبوں کی، تصاویر کو ایک شاندار فریم میں مجموعی طور پر سب..

اقسام