Kur duhet të përdorni SVG inline vs një img?

Question

Accepted Answer

SVG është një format për imazhe **vektori** (bazuar në XML), kështu që ai zgjerohet në çdo madhësi pa vendosur mjegull. Mund ta përfshini në dy mënyra kryesore, secila me kompromise. ## SVG inline — markup drejtpërdrejt në HTML ```html ``` **Përparësi:** mund ta stilizoni me CSS (`fill`, `stroke`), animojini pjesët e tij, ndryshoni ngjyrën përmes `currentColor` (trashëgon ngjyrën e tekstit), dhe përgjigjuni ngjarjeve — sepse është DOM i vërtetë. Nuk ka kërkesë HTTP shtesë. **Disavantazhe:** mbingarcë HTML-in, nuk është memorizuar veçmas, ikonat e përsëritura duplikojnë markup. ## SVG përmes `` — referuar si skedar ```html

``` **Përparësi:** memorizuar nga shfletuesi, mban HTML të pastruar, i thjeshtë. **Disavantazhe:** nuk mund ta stilizoni ose scriptoni interierin e tij me CSS/JS tuaj — ai është një imazh i errët. ## Udhëzues vendimi ```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 ``` ## Aksesibilitet ```html ``` ## Pse ka rëndësi Zgjedhja ndërmjet SVG inline dhe `` varet nga nëse keni nevojë të **stilizoni/animojini** grafikën (inline) ose vetëm ta **shfaqni** atë në mënyrë efikase (``). Ikonat që ndryshojnë ngjyrë gjatë lëvizjes së miut ose temës shkojnë inline (shpesh si përbërës); aktivet statike të markës shkojnë përmes ``. Në çdo mënyrë, vektorët mbeten të mprehtë në çdo rezolucion — ideal për ikona dhe logo.

SVG inline — markup drejtpërdrejt në HTML

SVG përmes <img> — referuar si skedar

Udhëzues vendimi

Aksesibilitet

Pse ka rëndësi

SVG përmes `<img>` — referuar si skedar