સ્કેલેબલ વેક્ટર ગ્રાફિક્સનો ઉપયોગ કરવાના ફાયદાઓ
સ્કેલેબલ વેક્ટર ગ્રાફિક્સ, અથવા એસવીજી, આજે વેબસાઇટ ડિઝાઇનમાં એક મહત્વપૂર્ણ ભૂમિકા ભજવે છે. જો તમે હાલમાં તમારા વેબ ડીઝાઇનના કામમાં એસવીજીનો ઉપયોગ કરી રહ્યા ન હોવ તો, અહીં કેટલાક કારણો છે જેનાથી તમારે આમ કરવાનું શરૂ કરવું જોઈએ, સાથે સાથે તમે જૂના બ્રાઉઝર્સ માટે ઉપયોગ કરી શકો તેવા ફોલબેક જેમ કે આ ફાઇલોને સપોર્ટ નહીં કરે
ઠરાવ
એસવીજીનો સૌથી મોટો ફાયદો એ ઠરાવ સ્વતંત્રતા છે. એસવીજી ફાઇલો પિક્સેલ-આધારિત રાસ્ટર છબીઓને બદલે વેક્ટર ગ્રાફિક્સ છે, કારણ કે, તે કોઈપણ છબી ગુણવત્તાને ગુમાવ્યા વિના ફરીથી આકાર આપી શકાય છે. આ ખાસ કરીને જ્યારે તમે પ્રતિભાવશીલ વેબસાઇટ્સ બનાવી રહ્યા હો ત્યારે સહાયરૂપ થાય છે જે સારા દેખાવની અને સ્ક્રીન કદ અને ઉપકરણોની વિશાળ શ્રેણી પર સારી રીતે કામ કરવાની જરૂર છે.
SVG ફાઇલોને તમારી પ્રતિસાદની વેબસાઇટની બદલાતી કદ અને લેઆઉટ જરૂરિયાતોને સમાવવા માટે ઉપર અથવા નીચે માપવામાં આવી શકે છે અને તમારે તે ગ્રાફિક્સ વિશે ચિંતા કરવાની જરૂર નથી કે જે સમાધાનકારી ગુણવત્તાનું કોઈ પણ પગલું છે.
ફાઇલ કદ
પ્રતિભાવશીલ વેબસાઇટ્સ પર રાસ્ટર છબીઓ (JPG, PNG, GIF) નો ઉપયોગ કરવાના પડકારોમાંથી એક તે છબીઓના ફાઇલ કદ છે. કારણ કે રાસ્ટર છબીઓ તે વેક્ટરના કદને માપતા નથી કારણ કે, તમારે તમારા પિક્સેલ-આધારિત છબીઓને સૌથી મોટા કદ પર પહોંચાડવા જરૂરી છે, જેના પર તેઓ પ્રદર્શિત થશે. આ એટલા માટે છે કે તમે હંમેશાં એક છબીને નાની કરી શકો છો અને તેની ગુણવત્તા જાળવી રાખી શકો છો, પરંતુ તે છબીઓને મોટા બનાવવા માટે સાચું નથી. અંતિમ પરિણામ એ છે કે તમારી પાસે ઘણીવાર એવી છબીઓ હોય છે જે વ્યક્તિની સ્ક્રીન પર બતાવવામાં આવતા કરતાં વધુ મોટા હોય છે, જેનો અર્થ એ છે કે તે ખૂબજ મોટી ફાઇલ ડાઉનલોડ કરવા માટે બિનજરૂરીપણે ફરજ પાડવામાં આવે છે.
એસવીજી આ પડકારને સંબોધિત કરે છે વેક્ટર ગ્રાફિક્સ સ્કેલેબલ હોવાને કારણે, તમારી પાસે ખૂબ નાની ફાઇલ કદ હોઈ શકે છે, પછી ભલે તે છબીઓને કેટલી મોટી દર્શાવવામાં આવે. આખરે સાઇટના એકંદર દેખાવ અને ઝડપ ડાઉનલોડ કરવા પર હકારાત્મક અસર પડશે.
સીએસએસ સ્ટાઇલ
એસવીજી કોડ સીધા પૃષ્ઠના HTML પર ઉમેરી શકાય છે. તેને "ઇનલાઇન એસવીજી" તરીકે ઓળખવામાં આવે છે. ઇનલાઇન એસવીજીનો ઉપયોગ કરવાના એક ફાયદા એ છે કે ગ્રાફિક્સ વાસ્તવમાં તમારા કોડના આધારે બ્રાઉઝર દ્વારા દોરવામાં આવે છે, ત્યાં છબી ફાઇલ મેળવવા માટે HTTP વિનંતી કરવાની જરૂર નથી. બીજું એક ફાયદો એ છે કે ઇનલાઇન એસવીજીને CSS સાથે સ્ટાઈલ કરી શકાય છે.
એક એસવીજી ચિહ્નનો રંગ બદલવાની જરૂર છે? કોઈ છબીને સોફ્ટવેર સંપાદન અને નિકાસમાં ખોલવા અને ફાઇલ ફરીથી અપલોડ કરવાની જરૂર હોવાને બદલે, તમે ફક્ત થોડા લીટીઓની CSS સાથે એસવીજી ફાઇલને બદલી શકો છો.
તમે હોવર રાજ્યો પર અથવા ચોક્કસ ડિઝાઇન જરૂરિયાતો માટે તેમને બદલવા માટે SVG ગ્રાફિક્સ પર અન્ય CSS શૈલીઓનો પણ ઉપયોગ કરી શકો છો. તમે તે ગ્રાફિક્સને એનિમેટ કરી શકો છો જેથી કોઈ ચળવળ અને પૃષ્ઠ પર ક્રિયાપ્રતિક્રિયાઓ ઉમેરી શકાય.
એનિમેશન
કારણ કે ઇનલાઇન એસવીજી ફાઇલોને સી.એસ.એસ. સાથે સ્ટાઈલ કરી શકાય છે, તમે પણ તેમના પર સીએસએસ એનિમેશનનો ઉપયોગ કરી શકો છો. CSS પરિવર્તિત અને સંક્રમણો એ એસવીજી ફાઇલોમાં કેટલાક જીવન ઉમેરવા માટેના બે સરળ રીતો છે. આજે વેબસાઇટ્સ પર ફ્લેશનો ઉપયોગ કરીને આવે છે તેવા ડાઉનસેઇડ્સ વગર તમે પૃષ્ઠ પર સમૃદ્ધ ફ્લેશ-જેવું અનુભવો મેળવી શકો છો
એસવીજીનો ઉપયોગ
SVG તરીકે શક્તિશાળી છે, આ ગ્રાફિક્સ તમે તમારી વેબસાઇટ પર ઉપયોગ કરી રહ્યા છો દરેક અન્ય ઇમેજ બંધારણ બદલી શકતા નથી. ફોટા જે ઊંડા રંગની ઊંડાણની જરૂર છે તે હજુ પણ એક JPG અથવા કદાચ PNG ફાઇલ હોવી જરૂરી છે, પરંતુ ચિહ્નો જેવી સરળ છબીઓ SVG તરીકે ચલાવવા માટે સંપૂર્ણપણે સુસંગત છે.
એસવીજી વધુ જટિલ વર્ણનો માટે પણ યોગ્ય હોઈ શકે છે, જેમ કે કંપની લોગો અથવા ગ્રાફ અને ચાર્ટ. બધા ગ્રાફિક્સ સ્કેલેબલ, CSS સાથે રીતની રાખવામાં, અને આ લેખમાં સૂચિબદ્ધ અન્ય લાભોથી ફાયદો થશે.
જૂનાં બ્રાઉઝર્સ માટે સપોર્ટ
આધુનિક વેબ બ્રાઉઝર્સમાં એસવીજી માટે વર્તમાન સપોર્ટ ખૂબ સારી છે. ફક્ત આ જ બ્રાઉઝર્સ જે ખરેખર આ ગ્રાફિક્સ માટે સમર્થન ન ધરાવતા હોય તે ઇન્ટરનેટ એક્સપ્લોરર (સંસ્કરણ 8 અને નીચે) ની જૂની આવૃત્તિઓ અને Android ના કેટલાક જૂના વર્ઝન છે એકંદરે, બ્રાઉઝિંગ વસ્તીના ખૂબ જ ઓછી ટકાવારી હજુ પણ આ બ્રાઉઝર્સનો ઉપયોગ કરે છે, અને તે સંખ્યા સંકોચો ચાલુ રહે છે. આનો અર્થ એ છે કે એસવીજીનો ઉપયોગ આજે વેબસાઇટ્સ પર ખૂબ સુરક્ષિત રીતે થઈ શકે છે.
જો તમે એસવીજી માટે ફોલબેક આપવા માંગો છો, તો તમે ફિલામેન્ટ ગ્રૂપમાંથી ગ્રમ્પિકૅન જેવા સાધનનો ઉપયોગ કરી શકો છો. આ સ્ત્રોત તમારી SVG છબી ફાઇલો લેશે અને જૂના બ્રાઉઝર્સ માટે PNG ફોલબેક કરશે.
1/27/17 ના રોજ જેરેમી ગીરર્ડ દ્વારા સંપાદિત