آپ کو inline SVG بمقابلہ img کب استعمال کرنا چاہیے؟

Question

Accepted Answer

SVG ایک **vector** image format ہے (XML-based)، تو یہ کسی بھی سائز تک بغیر blur ہوئے scale کرتا ہے۔ آپ اسے دو اہم طریقوں سے شامل کر سکتے ہیں، ہر ایک کے اپنے trade-offs ہیں۔ ## Inline SVG — markup براہ راست HTML میں ```html ``` **فوائل:** آپ اسے CSS کے ساتھ style کر سکتے ہیں (`fill`, `stroke`)، اس کے حصوں کو animate کر سکتے ہیں، رنگ کو `currentColor` کے ذریعے تبدیل کر سکتے ہیں (text color inherit کرتا ہے)، اور events کا جواب دے سکتے ہیں — کیونکہ یہ حقیقی DOM ہے۔ کوئی اضافی HTTP request نہیں۔ **نقصانات:** HTML کو bloat کرتا ہے، الگ سے cache نہیں ہوتا، دہرایا گیا icons markup کو دہراتے ہیں۔ ## SVG via `` — ایک فائل کے طور پر حوالہ دیا گیا ```html

``` **فوائل:** براؤزر کے ذریعے cache ہوتا ہے، HTML کو صاف رکھتا ہے، سادہ۔ **نقصانات:** آپ **نہیں** کر سکتے اس کے اندرونی حصوں کو اپنے CSS/JS کے ساتھ style یا script کریں — یہ ایک opaque image ہے۔ ## فیصلہ کی رہنمائی ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## رسائی ```html ``` ## یہ اہم کیوں ہے Inline بمقابلہ `` SVG کا انتخاب اس بات پر منحصر ہے کہ آپ کو graphic کو **style/animate** کرنے کی ضرورت ہے (inline) یا صرف اسے مؤثر طریقے سے **display** کرنا ہے (``)۔ Icons جو hover پر رنگ تبدیل کرتے ہیں یا theme کو inline میں جاتے ہیں (اکثر components کے طور پر)؛ static brand assets `` کے ذریعے جاتے ہیں۔ ہر طریقے سے، vectors ہر resolution پر صاف رہتے ہیں — icons اور logos کے لیے موزوں۔

Inline SVG — markup براہ راست HTML میں

SVG via <img> — ایک فائل کے طور پر حوالہ دیا گیا

فیصلہ کی رہنمائی

رسائی

یہ اہم کیوں ہے

SVG via `<img>` — ایک فائل کے طور پر حوالہ دیا گیا