SVG એ એક વેક્ટર છબી ફોર્મેટ છે (XML-આધારિત), તેથી તે કોઈપણ કદમાં ધાર વિના સ્કેલ કરે છે. તમે તેને બે મુખ્ય રીતે શામેલ કરી શકો છો, દરેકમાં ટ્રેડ-ઓફ્સ છે.
ઇનલાઈન SVG — HTML માં સીધું માર્કઅપ
પ્લસ: તમે તેને CSS (fill, stroke) સાથે સ્ટાઇલ કરી શકો છો, તેના ભાગોને એનિમેટ કરી શકો છો, currentColor દ્વારા રંગ બદલી શકો છો (ટેક્સ્ટ રંગ વારસા), અને ઇવેન્ટ્સ પર પ્રતિક્રિયા આપી શકો છો — કારણ કે તે સાચો DOM છે. કોઈ વધારાનો HTTP વિનંતી નથી.
માઈનસ: HTML ને ફૂલાવે છે, અલગથી કેશ નથી, પુનરાવર્તિત આઇકન માર્કઅપને ડુપ્લિકેટ કરે છે.
<img> — ફાઇલ તરીકે સંદર્ભિત<img src="logo.svg" alt="Company logo" width="120" />
પ્લસ: બ્રાઉઝર દ્વારા કેશ કરવામાં આવે છે, HTML સફાઈ રાખે છે, સરળ. માઈનસ: તમે તમારી CSS/JS સાથે તેની આંતરિક બાબતોને સ્ટાઇલ કરી શકતા નથી અથવા સ્ક્રિપ્ટ કરી શકતા નથી — તે એક અપારદર્શક છબી છે.
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
ઇનલાઈન વિરુદ્ધ <img> SVG વચ્ચેનો પસંદગી આ વાત પર આધારિત છે કે તમને ગ્રાફિક્સને સ્ટાઇલ/એનિમેટ કરવાની જરૂર છે (ઇનલાઈન) અથવા તેને કુશળતાપૂર્વક પ્રદર્શિત કરવાની જરૂર છે (<img>).
આઇકન્સ જે હોવર પર અથવા થીમ અનુસાર રંગ બદલે છે તે ઇનલાઈન જાય છે (ઘણીવાર ઘટકો તરીકે); સ્થિર બ્રાંડ સમપત્તિ <img> દ્વારા જાય છે.
કોઈ પણ રીતે, વેક્ટર્સ દરેક રીઝોલ્યુશને તીક્ષ્ણ રહે છે — આઇકન્સ અને લોગોસ માટે આદર્શ.