Lini unapaswa kutumia inline SVG dhidi ya img?

Question

Accepted Answer

SVG ni umbizo la picha la **vector** (linalotegemea XML), kwa hivyo linapanuka hadi ukubwa wowote bila kuwa na ukungu. Unaweza kuiingiza kwa njia kuu mbili, kila moja ikiwa na faida na hasara zake. ## Inline SVG — markup moja kwa moja katika HTML ```html ``` **Faida:** unaweza kuipamba kwa CSS (`fill`, `stroke`), kuhuisha sehemu zake, kubadilisha rangi kupitia `currentColor` (inarithi rangi ya maandishi), na kuitikia matukio — kwa sababu ni DOM halisi. Hakuna ombi la ziada la HTTP. **Hasara:** inavimba HTML, haihifadhiwi cache kivyake, ikoni zinazorudiwa zinanakili markup. ## SVG kupitia `` — inayorejelewa kama faili ```html

``` **Faida:** inahifadhiwa cache na kivinjari, inaweka HTML safi, ni rahisi. **Hasara:** **huwezi** kupamba au ku-script ndani yake kwa CSS/JS yako — ni picha isiyoonekana ndani. ## Mwongozo wa kuamua ```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 ``` ## Ufikivu ```html ``` ## Kwa nini ni muhimu Kuchagua inline dhidi ya `` SVG kunategemea iwapo unahitaji **kupamba/kuhuisha** grafiki (inline) au tu **kuionyesha** kwa ufanisi (``). Ikoni zinazobadilisha rangi wakati wa hover au theme zinakwenda inline (mara nyingi kama components); rasilimali tuli za chapa zinakwenda kupitia ``. Vyovyote vile, vectors zinabaki wazi katika kila azimio — bora kwa ikoni na nembo.

Inline SVG — markup moja kwa moja katika HTML

SVG kupitia <img> — inayorejelewa kama faili

Mwongozo wa kuamua

Ufikivu

Kwa nini ni muhimu

SVG kupitia `<img>` — inayorejelewa kama faili