SVG ફાઇલ કેવી રીતે બનાવવી

વેબસાઈટ બનાવતી વખતે વેબ ડીઝાઈનરે ધ્યાનમાં લેવું પડે છે ચાર મુખ્ય મુદ્દાઓ વેબના લેઆઉટ અને વિઝ્યુઅલ ડિઝાઇન વિશે વિચારવું, ટેક્સ્ટ, છબીઓ, રંગો અને ફોન્ટ્સ કર્મચારીઓ

આ ચાર મુદ્દાઓમાંથી, અમે આ પોસ્ટમાં સૌથી વધુ મહત્વ આપવા જઈ રહ્યા છીએ તે છબીઓ છે, કારણ કે અમે તેના વિશે વાત કરવા જઈ રહ્યા છીએ. svg ફાઇલો કેવી રીતે બનાવવી કારણ કે તમે જે છબીઓ સાથે કામ કરો છો તેની ગુણવત્તાને ધ્યાનમાં લેવી ખૂબ જ મહત્વપૂર્ણ છે.

SVG ફાઇલો સાથે સારવાર, વ્યાવસાયિકો દ્વારા વધારો કરવામાં આવ્યો છે અને ડિઝાઇનની દુનિયામાં એટલા વ્યાવસાયિકો નથી.

SVG ફાઇલ શું છે?

SVG એ સ્પેનિશ, સ્કેલેબલ વેક્ટર ગ્રાફિક્સ, સ્કેલબે વેક્ટર ગ્રાફિક્સ માટે અંગ્રેજીમાં સંક્ષેપ છે. તે વિશે છે ઓપન અને ફ્રી ફોર્મેટ જેની સાથે 2D ગ્રાફિક્સ, બે પરિમાણ બનાવવા માટે.

અન્ય ઇમેજ ફોર્મેટથી વિપરીત, જેમ કે JPG અથવા PNG, SVG એ સ્કેલેબલ ફોર્મેટ છે, પછી ભલે તમે તેનું કદ કેટલું વધારવા માંગો છો, કારણ કે છબીની ગુણવત્તા જાળવવામાં આવશે. ગ્રાફિક્સ અથવા વેક્ટર ઇમેજ મૂકવા માટે તે વેબ પૃષ્ઠોમાં સૌથી વધુ ઉપયોગમાં લેવાતા ફોર્મેટમાંનું એક છે.

શા માટે આપણે SVG નો ઉપયોગ કરવો જોઈએ?

આ પ્રકારના ફોર્મેટ સાથે, વેક્ટર ઇમેજ તેમના કદ અને રીઝોલ્યુશનને ધ્યાનમાં લીધા વિના ઉચ્ચ ગુણવત્તા જાળવી રાખશે. તેનાથી વિપરિત, બિટમેપથી બનેલી, પિક્સેલની બનેલી ઇમેજ, જો તેનું કદ બદલવામાં આવે તો ગુણવત્તા ગુમાવે છે. SVG ફોર્મેટ તેની હળવાશ અને વર્સેટિલિટી દ્વારા વ્યાખ્યાયિત થયેલ છે.

આ ફોર્મેટનો ઉપયોગ કરવાની તરફેણમાં બીજો મુદ્દો તેનું નાનું કદ છે, એટલે કે, આનો આભાર તેઓ જ્યાં છે તે પૃષ્ઠોની લોડિંગ ઝડપ વધે છે. આ છબીઓ બ્રાઉઝર દ્વારા બનાવવામાં આવી છે, જે સર્વર પરના લોડ અને વપરાશને ઘટાડવામાં મદદ કરે છે.

વધુમાં, તેઓ કરી શકે છે એનિમેટેડ SVG છબીઓ બનાવો જેની સાથે અમારી વેબસાઇટને નજીકની હવા આપી શકાય અને તેની મુલાકાત લેનારા દર્શકોનું ધ્યાન ખેંચી શકાય.

SVG એ ઓપન ફોર્મેટ છે, એટલે કે, સુધારાઓ અને સુધારાઓમાંથી પસાર થઈ શકે છે. વધુમાં, SVG ફાઇલોને વેક્ટર એડિટિંગ પ્રોગ્રામ્સ સાથે સંપાદિત કરી શકાય છે, ઉદાહરણ તરીકે Adobe Illustartor તેના પ્રદર્શનમાં ગુણવત્તા ગુમાવ્યા વિના, તે કોઈપણ ઉપકરણ પર જોઈ શકાય છે. તે અમને ગુણવત્તા ગુમાવ્યા વિના તેને છાપવાની પણ મંજૂરી આપે છે.

SVG ફાઇલો સરળતાથી કેવી રીતે બનાવવી

કદાચ SVG ફાઇલો બનાવવાનો સૌથી સહેલો રસ્તો, જો તમે તેનાથી પરિચિત હોવ તો, ગ્રાફિક ડિઝાઇન પ્રોગ્રામ, જેમ કે ઇલસ્ટ્રેટર, કોરલ ડ્રો, અન્યો વચ્ચે.

ઇલસ્ટ્રેટર પ્રોગ્રામ પર ધ્યાન કેન્દ્રિત કરીને, જ્યારે આપણે SVG ફોર્મેટનો ઉપયોગ કરવા જઈ રહ્યા છીએ, ત્યારે આપણે ગ્રેડિએન્ટ્સ અથવા અન્ય અસરો, જેમ કે કલાત્મક અસર, બ્લર, બ્રશ, પિક્સેલ્સ વગેરેનો ઉપયોગ કર્યો છે કે કેમ તે ધ્યાનમાં લેવું પડશે. કારણ કે જ્યારે તેઓ SVG ફાઇલ ફોર્મેટમાં સાચવવામાં આવે ત્યારે રાસ્ટરાઇઝ્ડ હોય છે. SVG ફિલ્ટર અસરોનો ઉપયોગ કરવાની ભલામણ કરવામાં આવે છે, અસરો ઉમેરવા માટે જેથી તે પછીથી રાસ્ટરાઇઝ ન થઈ શકે.

અમે તમને આપીએ છીએ તે અન્ય સલાહનો ઉપયોગ કરવાનો છે વધુ સારા પ્રદર્શન માટે ચિત્રોમાં સરળ પ્રતીકો અને પાથ કથિત ફોર્મેટનું. પુષ્કળ ટ્રેસિંગ સાથે બ્રશનો ઉપયોગ કરવાનું ટાળો કારણ કે આ વધુ ડેટા લોડ જનરેટ કરે છે.

આ પ્રોગ્રામમાં SVG ફાઇલ બનાવવા માટે, પ્રથમ વસ્તુ જે આપણે ખુલ્લી રાખવાની છે તે છે ખાલી કેનવાસ જ્યાં આપણે આપણા વિચાર પર કામ કરીશું.

એકવાર અમારું કામ પૂરું થઈ જાય પછી, અમે જે કરવા જઈ રહ્યા છીએ તે પ્રોગ્રામની ઉપર બતાવેલ ટૂલબાર પર જઈશું, અને અમે આનો વિકલ્પ પસંદ કરીશું. file, save as, અને એક પોપ-અપ સ્ક્રીન દેખાશે જ્યાં તે અમને અમારી ફાઇલને નામ આપવાનું કહે છે અને તે ફોર્મેટ સૂચવો કે જેમાં આપણે તેને સાચવવા માંગીએ છીએ. તે આ છેલ્લા વિભાગમાં છે જ્યાં આપણે SVG વિકલ્પને ચિહ્નિત કરવું આવશ્યક છે.

SVG પ્રકાર પસંદ કરતી વખતે, એક સંવાદ બોક્સ દેખાય છે જે અમને વિવિધ વિકલ્પો દર્શાવે છે જે ધ્યાનમાં લેવા જોઈએ.

સામાન્ય નિયમ તરીકે, કોષ્ટકમાં દેખાતા પ્રથમ ફીલ્ડમાં, SVG 1.1 પ્રોફાઇલ દેખાય છે. નીચેનામાં તે અમને સ્ત્રોતો પસંદ કરવાનો વિકલ્પ આપે છે, જેમાં તેઓ અમને આપે છે SVG માં માર્ક અપ કરેલ ટેક્સ્ટ માટે ડિફોલ્ટ અને કોઈ નહીં તરીકે સબસેટ. અમારા કિસ્સામાં, આ કાર્યમાં ફોન્ટ્સ નથી, જો તે કર્યું હોય, તો સબસેટ્સ વિકલ્પને કોઈ નહીંથી બધા ચિત્રગ્રામમાં બદલવો પડશે.

નીચેનો વિભાગ ખૂબ જ મહત્વપૂર્ણ છે, જો આપણે નિર્દેશ કરીએ એમ્બેડ વિકલ્પ, રચનાની છબીઓ ફાઇલમાં સમાવિષ્ટ કરવામાં આવશેજો આપણે ઘણી બધી બીટમેપ ઈમેજીસનો ઉપયોગ કરીએ તો તેનું વજન વધશે. જો, બીજી બાજુ, આપણે લિંક કરવાના વિકલ્પને ચિહ્નિત કરીએ છીએ, જો આપણે કોઈ વેબસાઈટ પર તેનો ઉપયોગ કરવા જઈ રહ્યા હોઈએ તો આપણે ઈમેજીસ સાથે સાવચેત રહેવું જોઈએ, કારણ કે આપણે આપણી ઈમેજોની ફાઈલોનો સમાવેશ કરવો જોઈએ, અને તે પણ, ખૂબ જ અગત્યનું, તેમની જાળવણી માર્ગ આ વિકલ્પનો ફાયદો એ છે કે ફાઇલોનું વજન ઘણું ઓછું હશે.

અદ્યતન વિકલ્પો વિભાગમાં આપણે તેનો વિકલ્પ શોધીએ છીએ SVG કોડ, આ વિકલ્પ સૂચવે છે કે ફાઇલ અંદર કેવી છે, એટલે કે, અમારા કાર્ય પાછળનો કોડ. જો તમે તમારી SVG ફાઇલ ઉમેરવા માંગતા હોવ તો આ વિકલ્પ આવશ્યક છે, ઉદાહરણ તરીકે તમારા વ્યક્તિગત વર્ડપ્રેસમાં, તમારે ફક્ત કોડની નકલ કરવી પડશે અને તેને તમારા WordPress HTML એડિટરમાં સીધો ઉમેરો કરવો પડશે.

અમે તમને છેલ્લી સલાહ આપીએ છીએ કે SVG ફોર્મેટમાં સાચવતી વખતે, ધ્યાનમાં રાખો કે જો તમે અલગ-અલગ આર્ટબોર્ડ સાથે કામ કરી રહ્યા છો, તો માત્ર એક્ટિવ આર્ટબોર્ડ જ રાખવામાં આવશે.

જો આપણે આગળ જઈને અમારા ચિત્રમાં SVG અસરો લાગુ કરવા ઈચ્છીએ છીએ, તો Illustrator અમને અસરોનો સમૂહ પ્રદાન કરે છે. આ કરવા માટે, આપણે ઑબ્જેક્ટ અથવા જૂથ પસંદ કરવું પડશે. અસર લાગુ કરવા માટે આપણે ઇફેક્ટ વિન્ડો, SVG ફિલ્ટર્સ પસંદ કરીને તેને લાગુ કરવું પડશે.

SVG ફિલ્ટર લાગુ કરતી વખતે, ડિઝાઇન પ્રોગ્રામ અમને એક વિન્ડો બતાવે છે જ્યાં લાગુ કરી શકાય તેવા ફિલ્ટર્સની સૂચિ દેખાય છે, એકવાર અમે એક પસંદ કરીએ, ઇલસ્ટ્રેટર અમને બતાવે છે કે તે કેવું દેખાય છે, પરંતુ રાસ્ટરાઇઝ્ડ સંસ્કરણમાં.

તમે જોયું તેમ, ધ SVG ફોર્મેટ એક ક્રાંતિ રહી છે. તેની ક્ષમતા અને ગુણવત્તા માટે આભાર જે તે ઓફર કરે છે, તે વેબ પેજીસ બનાવે છે જે અમને પ્રદર્શનને બલિદાન આપ્યા વિના વધુ આકર્ષક લાગે છે, જ્યાં સુધી તેઓ કથિત ફોર્મેટનો યોગ્ય ઉપયોગ કરે છે. SVG એ ડિઝાઇન અને વેબ ડેવલપમેન્ટની દુનિયા વચ્ચેનું સંપૂર્ણ જોડાણ બની ગયું છે.