როდის უნდა გამოიყენოთ inline SVG vs img?

Question

Accepted Answer

SVG არის **ვექტორული** გამოსახულების ფორმატი (XML-ზე დაფუძნებული), ამიტომ ის მასშტაბირდება ნებისმიერ ზომამდე დაბნელების გარეშე. შეგიძლიათ მას შეიტანოთ ორი ძირითადი გზით, თითოეულს აქვს თავისი უარყოფითი და დადებითი მხარეები. ## Inline SVG — მარკაპი პირდაპირ HTML-ში ```html ``` **დადებითი მხარეები:** შეგიძლიათ სტილიზოთ CSS-ით (`fill`, `stroke`), აანიმაციოთ მისი ნაწილები, შეცვალოთ ფერი `currentColor`-ის მეშვეობით (მემკვიდრეობს ტექსტის ფერს) და პასუხი აიღოთ ივენტებზე — რადგან ეს რეალური DOM-ია. დამატებითი HTTP-მოთხოვნა არ არის. **უარყოფითი მხარეები:** HTML-ს ზრდის, ცალკე აკეშდება, განმეორებული ხატები მარკაპს ხელმეორდება. ## SVG via `` — ფაილად მიმართული ```html

``` **დადებითი მხარეები:** ბრაუზერის მიერ აკეშდება, HTML-ს სუფთავ ინახავს, მარტივია. **უარყოფითი მხარეები:** **ვერ** სტილიზოთ ან სკრიპტოთ მისი შიგნილი თქვენი CSS/JS-ით — ეს უჩინარი გამოსახულებაა. ## გადაწყვეტილების სახელმძღვანელო ```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 vs `` SVG-ის არჩევანი დამოკიდებულია იმაზე, დაგჭირდებათ თუ არა გრაფიკის **სტილიზება/ანიმაცია** (inline) ან მხოლოდ **ჩვენება** ეფექტურად (``). ხატები, რომლებიც ფერს ცვლიან hover-ზე ან თემაზე, inline მიდის (ხშირად კომპონენტებად); სტატიკური ბრენდის აქტივები ``-ის მეშვეობით მიდის. ორივე შემთხვევაში, ვექტორები სუფთავი რჩება ყველა გარჩევადობაზე — იდეალური ხატებისა და ლოგოებისთვის.

Inline SVG — მარკაპი პირდაპირ HTML-ში

SVG via <img> — ფაილად მიმართული

გადაწყვეტილების სახელმძღვანელო

ხელმისაწვდომობა

რატომ აქვს მნიშვნელობა

SVG via `<img>` — ფაილად მიმართული