Mayar da hotunan SVG masu iya girma zuwa hotunan PNG shirye don amfani
Fayil na SVG jerin umarni ne, ba hoto da aka gama ba. Idan ka buɗe ɗaya a cikin editan rubutu, za ka ga XML da ke bayyana hanyoyi, siffofi, cikawa da lanƙwasa — girke-girke da mai bincike (browser) ke bi don zana aikin fasaha sabo a kowane girman da ka nema. PNG kuwa akasin haka ne: tarin fikselan launi da aka daskarar a fasali da tsayi na tabbatacce. Mayar da ɗaya zuwa ɗaya ana kiran shi rasterization, kuma wannan kayan aiki yana yin hakan gaba ɗaya a cikin mai binciken ka. Ka zaɓi girman fitarwa, ana zana SVG a kan canvas na HTML, sai a mayar maka da PNG — babu wani fayil da ya taɓa barin na'urarka.
Vector da raster, a sauƙaƙe
Babban bambancin shi ne yadda ake sarrafa juzu'i (resolution). Domin SVG tana ajiye lissafi maimakon fikselan, tana da 'yancin girma: ka fadada logo daga karamin favicon zuwa babban allo, kuma kowace gefe za a sake lissafta ta don ta ci gaba da zama mai kaifi bisa lissafi. PNG ba ta da irin wannan 'yanci. Fikselan nata an dinke su tun daga farko, don haka fadada shi fiye da girmansa na asali yana tilasta mai kallo ya mikad da dige-digen da suka riga suka kasance, sai ka fara ganin gurbatarwa da matakan da ke fallasa hotunan raster.
Wannan cinikin yana da ɓangarori biyu. Vectors ba su da abin da zai kai su wajen logo, icon da zane-zane masu siffofi tsaftattu, kuma fayilolinsu galibi kanana ne. Nau'ukan raster kamar PNG suna sarrafa gradients, inuwa masu taushi da bayanan hoto na gaskiya cikin sauƙi, kuma — abu mafi muhimmanci — kusan komai yana fahimtar su. Idan ka yi rasterize, kana musanya 'yancin girma marar iyaka na SVG da yardar amfani ta duniya baki ɗaya ta PNG a wani girman da aka zaɓa.
Me ya sa za a yi rasterize na SVG tun farko?
Idan SVG tana da irin wannan kyakkyawan girma, me ya sa za a mayar da shi? Yardar amfani (compatibility) ita ce amsar da aka saba. Wurare da yawa kawai ba sa karɓar SVG: masu aikawa da imel da yawa suna cire ko ƙi nuna ta, editocin takardu da manhajojin gabatarwa galibi suna son hoto mai lebur, kasuwannin kan layi da hanyoyin talla suna neman PNG ko JPG, kuma yawancin dandamalin sada zumunta suna kyale loda ta vector gaba ɗaya. Wasu tsarin abun ciki suma suna toshe SVG kai tsaye saboda dalilan tsaro, tunda tsarin zai iya ɗauke da scripts a cikinsa.
Dalili na biyu shi ne wani lokaci kana son kayan aiki mai girman tabbatacce. Icon na app, thumbnail, hotunan gani na Open Graph da abubuwan da za a buga duk suna son ainihin girman fiksel. PNG tana kulle aikin fasaha zuwa wannan makasudin domin ya bayyana daidai a ko'ina, ba tare da wani mamaki daga mai kallon da zai fassara vector daban-daban ba. Mayar da tushen SVG ɗinka zuwa ainihin girman da wani dandamali ke bukata galibi shi ne hanya mafi tsafta zuwa sakamako mai dacewa.
Zaɓen daidai girman fitarwa
Domin PNG ba ta iya fadada da kyau, girman da ka fitar da shi ya fi muhimmanci fiye da kowace vector. Idan ka fitar da ƙarami sosai, hoton zai zama mai laushi a allunan zamani; idan ka fitar da girma babu wani buƙata, ka ɓata bandwidth. Doka mai sauƙi: ka yanke shawarar mafi girman girman da za a nuna hoton, sannan ka zana aƙalla wannan, kuma ya fi kyau fiye da haka don allunan masu yawan fiksel.
Allunan daidaitattu suna da kyau a 1x — girman aikin fasaha na asali. Allunan High-DPI da Retina suna cusa kusan sau biyu fikselan a sarari ɗaya, don haka fitarwa ta 2x tana ci gaba da kiyaye icon da hotuna masu kaifi maimakon gurɓatattu. Don bugawa, tallace-tallace ko manyan allunan, 3x ko 4x zai ba ka sarari. Tunda tushen shi ne vector, fitar da girma ba ya cinye maka ingancin komai — ana sake lissafta lanƙwasan ne kawai a mafi girman adadin fiksel kafin a lebur da su. Idan kana shakka, ka zana girman da yawa; ko yaushe za ka iya rage babban PNG, amma ba za ka taɓa dawo da daki-daki ta hanyar fadada karamin PNG ba.
Bayyanuwa (transparency) tana zuwa tare
PNG tana goyon bayan cikakken tashar alpha, wanda ke nufin bayyanuwa (transparency) tana ci gaba da rayuwa bayan mayarwa. Idan SVG ɗinka ba ta da cikawa a bango, PNG da za a samu za ta kiyaye waɗannan wurare a bayyane, don haka logo ko icon zai sauka daidai a kan kowane launi ba tare da mummunan akwatin fari kewaye da shi ba. Idan kana bukatar tabbataccen bango a maimako, ka bai wa SVG ɗaya kafin ka mayar da shi. Ko ta yaya, abin da ka gani a vector shi ne abin da PNG za ta kiyaye, kuma wannan shi ne dalilin da ya sa PNG — ba JPG ba — ita ce makasudin dabi'a ga icon, badge da overlay.
Komai yana zama a na'urarka
Wannan mai mayarwa yana gudana a matsayin lambar gida (local code) a cikin mai binciken ka ta amfani da canvas API. Ana karanta SVG ɗinka, a zana shi kuma a fitar da shi ba tare da an taɓa aika shi zuwa wani server ba, don haka babu loda, babu jerin gwano da babu wani kwafin aikin fasahar ka da zai zauna a ma'ajin wani. Wannan ya fi sauri gareka kuma ya fi aminci ga duk abin da za ka fi son ka kada ka ba wa wani, daga alama iri da ba a fitar da ita ba zuwa zane-zanen ciki. Idan ka gama nan, ka duba sauran kayan aikin hoto namu — idan kana gina wani kayan aiki na Windows ko favicon, mai mayarwa na PNG zuwa ICO mataki ne na gaba na dabi'a.
Tambayoyin da ake yawan yi
PNG za ta zama mai kaifi kamar SVG?
A girman da ka fitar da shi, eh. Domin an zana vector din sabo a girman da ka zaɓa, gefunan suna ci gaba da kaifi. Bambancin shi ne PNG ba za a iya fadada shi bayan haka ba tare da laushi ba, yayin da SVG na asali koyaushe zai iya.
Mayarwar tana kiyaye bayyanuwa (transparency)?
Eh, tana kiyayewa. PNG tana da tashar alpha, don haka duk wani wuri mai bayyane a SVG ɗinka zai ci gaba da bayyane a PNG. Ka ƙara wa SVG bango tukuna idan kana son tabbataccen cikawa a maimako.
Wane girma zan zaɓa?
Ka daidaita ko ka wuce mafi girman girman da za a nuna hoton. Ka yi amfani da 1x don allunan daidaitattu, 2x don Retina da allunan high-DPI, da 3x ko 4x don bugawa ko manyan hotuna. Zana girma ba ya cinye ingancin komai tun da tushen vector ne.
Me ya sa ba za a yi amfani da SVG a ko'ina kawai ba?
Yawancin masu aikawa da imel, editocin takardu, kasuwannin kan layi da dandamalin sada zumunta ba sa karɓa ko nuna SVG daidai. PNG tana aiki kusan ko'ina kuma tana kulle aikin fasaha zuwa girman tabbatacce da za a iya hasashe.
Ana loda fayilolina zuwa wani wuri?
A'a. Komai yana gudana a gida a cikin mai binciken ka. Ba a taɓa aika SVG ɗinka zuwa wani server ba, don haka babu abin da ake loda, adanawa ko bibiya.
Zan iya mayar da PNG ɗin komawa zuwa SVG?
Ba daidai ba. Rasterization tana zubar da lissafin asali, don haka komawa yana nufin bin diddigin fikselan zuwa sabbin hanyoyin vector, wanda da wuya ya dace da tushen. Ka ajiye SVG ɗinka na asali a matsayin babban fayil.