તમે ઇનલાઈન SVG વિરુદ્ધ img ક્યારે ઉપયોગ કરવું જોઈએ?

Question

Accepted Answer

SVG એ એક **વેક્ટર** છબી ફોર્મેટ છે (XML-આધારિત), તેથી તે કોઈપણ કદમાં ધાર વિના સ્કેલ કરે છે. તમે તેને બે મુખ્ય રીતે શામેલ કરી શકો છો, દરેકમાં ટ્રેડ-ઓફ્સ છે. ## ઇનલાઈન SVG — HTML માં સીધું માર્કઅપ ```html ``` **પ્લસ:** તમે તેને CSS (`fill`, `stroke`) સાથે સ્ટાઇલ કરી શકો છો, તેના ભાગોને એનિમેટ કરી શકો છો, `currentColor` દ્વારા રંગ બદલી શકો છો (ટેક્સ્ટ રંગ વારસા), અને ઇવેન્ટ્સ પર પ્રતિક્રિયા આપી શકો છો — કારણ કે તે સાચો DOM છે. કોઈ વધારાનો HTTP વિનંતી નથી. **માઈનસ:** HTML ને ફૂલાવે છે, અલગથી કેશ નથી, પુનરાવર્તિત આઇકન માર્કઅપને ડુપ્લિકેટ કરે છે. ## SVG વિયા `` — ફાઇલ તરીકે સંદર્ભિત ```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 ``` ## તે શા માટે મહત્વપૂર્ણ છે ઇનલાઈન વિરુદ્ધ `` SVG વચ્ચેનો પસંદગી આ વાત પર આધારિત છે કે તમને ગ્રાફિક્સને **સ્ટાઇલ/એનિમેટ** કરવાની જરૂર છે (ઇનલાઈન) અથવા તેને કુશળતાપૂર્વક **પ્રદર્શિત** કરવાની જરૂર છે (``). આઇકન્સ જે હોવર પર અથવા થીમ અનુસાર રંગ બદલે છે તે ઇનલાઈન જાય છે (ઘણીવાર ઘટકો તરીકે); સ્થિર બ્રાંડ સમપત્તિ `` દ્વારા જાય છે. કોઈ પણ રીતે, વેક્ટર્સ દરેક રીઝોલ્યુશને તીક્ષ્ણ રહે છે — આઇકન્સ અને લોગોસ માટે આદર્શ.

ઇનલાઈન SVG — HTML માં સીધું માર્કઅપ

SVG વિયા <img> — ફાઇલ તરીકે સંદર્ભિત

નિર્ણય માર્ગદર્શન

પ્રવેશક્ષમતા

તે શા માટે મહત્વપૂર્ણ છે

SVG વિયા `<img>` — ફાઇલ તરીકે સંદર્ભિત