Olùyípadà SVG sí PNG

Yí àwọn àwòrán fífẹ̀-jálè SVG padà sí PNG tí ó ti ṣetán láti lò

Fáìlì SVG jẹ́ àkójọ àwọn ìtọ́sọ́nà, kì í ṣe àwòrán tí ó ti parí. Ṣí ọ̀kan nínú olùṣàtúnṣe ọ̀rọ̀, o máa rí XML tí ó ń ṣàpèjúwe ipa-ọ̀nà, ìrísí, kíkun, àti ìwọ̀n rírọ̀ — ìlànà tí aṣàwakiri ń tẹ̀lé láti fa iṣẹ́-ọnà náà padà ní ìwọ̀n tuntun tí o bá béèrè. PNG jẹ́ ìdàkejì: ìlàkọ̀ àwọ̀ pixel tí a dì ṣinṣin ní ìbú àti gigùn kan pàtó. Yíyí ọ̀kan padà sí èkejì ni a ń pè ní rasterization, ohun èlò yìí sì ń ṣe é pátápátá nínú aṣàwakiri rẹ. O yan ìwọ̀n jáde, a máa yà SVG náà sórí canvas HTML, PNG kan sì máa padà — kò sí fáìlì kan tí ó kúrò lórí ẹ̀rọ rẹ rárá.

Fífẹ̀-jálè (vector) àti pixel (raster), ní èdè tí ó rọrùn

Ìyàtọ̀ pàtàkì ni bí a ṣe ń dá ìwọ̀n mú. Nítorí pé SVG ń fi ìṣírò pamọ́ dípò pixel, kò gbára lé ìwọ̀n rárá: fẹ̀ àmì-àpẹẹrẹ kan lọ láti kékeré (favicon) sí ńlá (billboard), gbogbo etí rẹ̀ yóò sì tún ìṣírò lélẹ̀ láti dúró mọ́lẹ̀. PNG kò ní òmìnira bẹ́ẹ̀ rárá. Pixels rẹ̀ ti dì tán, nítorí náà fífẹ̀ sí i ju ìwọ̀n ìpilẹ̀ṣẹ̀ rẹ̀ lọ ń fipá mú olùwòran láti na àwọn àmì tí ó ti wà, o sì bẹ̀rẹ̀ sí í rí ìrọ̀ àti pẹ̀tẹ̀lẹ̀ tí ó ń fi hàn pé àwòrán náà jẹ́ raster.

Ìdọ́gba yìí ń lọ ní ọ̀nà méjèèjì. Fífẹ̀-jálè kò lè borí fún àmì-àpẹẹrẹ, àmì, àti iṣẹ́-ọnà pẹrẹsẹ tí a fi ìrísí mímọ́ ṣe, fáìlì rẹ̀ sì sábà máa ń kéré gan-an. Àwọn ọ̀nà pixel bí PNG ń mú ìyípadà àwọ̀, òjìji rírọ̀, àti àlàyé fọ́tò dáradára jù, wọ́n sì — ohun tí ó ṣe pàtàkì — jẹ́ ohun tí fẹ́rẹ̀ẹ́ jẹ́ pé ohun gbogbo mọ̀. Nígbà tí o bá ṣe rasterize, o ń fi agbára fífẹ̀-jálè SVG tí kò ní ààlà pààrọ̀ agbára ìbámu gbogbo àgbáyé PNG ní ìwọ̀n kan tí o yàn.

Kí nìdí tí a fi máa rasterize SVG rárá?

Bí SVG bá ń fẹ̀ dáradára tó bẹ́ẹ̀, kí nìdí tí a fi máa yí padà? Ìbámu ni ìdáhùn tí ó wọ́pọ̀. Ọ̀pọ̀lọpọ̀ ibi kò gba SVG rárá: ọ̀pọ̀lọpọ̀ ohun èlò ímeèlì ń yọ ọ́ kúrò tàbí kọ̀ láti fi hàn, àwọn olùṣàtúnṣe ìwé àti sọ́fítíwia àpèjúwe sábà máa ń fẹ́ àwòrán pẹrẹsẹ, àwọn ojà àti ẹ̀rọ ìpolówó ń béèrè PNG tàbí JPG, ọ̀pọ̀lọpọ̀ ojú-òpó ìbágbépọ̀ (social) sì ń fojú fo àwọn àkọ̀wé fífẹ̀-jálè pátápátá. Àwọn ètò àkóónú kan tún ń dí SVG lọ́wọ́ pátápátá fún ìdí ààbò, nítorí pé ọ̀nà náà lè fi àwọn àpẹẹrẹ (scripts) pamọ́ sínú rẹ̀.

Ìdí kejì ni pé nígbà mìíràn o fẹ́ ohun èlò tí ìwọ̀n rẹ̀ dì. Àwọn àmì app, àwòrán kékeré (thumbnails), àwòrán ìṣáájú Open Graph, àti ohun tí a tẹ̀ jáde ní gbogbo wọn ń retí ìwọ̀n pixel gangan. PNG ń dì iṣẹ́-ọnà náà sí àfojúsùn yẹn kí ó lè hàn ní ìwọ̀n kan náà ní ibi gbogbo, láìsí ìyàlẹ́nu kan láti ọ̀dọ̀ olùwòran tí ó ń túmọ̀ fífẹ̀-jálè náà ní ọ̀nà mìíràn. Yíyí orísun SVG rẹ padà sí àwọn ìwọ̀n gangan tí ojú-òpó kan béèrè sábà máa ń jẹ́ ọ̀nà tí ó mọ́ jùlọ láti dé àbájáde tí ó dúró ṣinṣin.

Yíyan ìwọ̀n jáde tí ó tọ́

Nítorí pé PNG kò lè fẹ̀ sí i dáradára, ìwọ̀n tí o bá gbé jáde sí ṣe pàtàkì ju bí ó ti rí fún fífẹ̀-jálè èyíkéyìí lọ. Bí o bá gbé jáde kékeré jù, àwòrán náà máa rọ̀ lórí ìran òde-òní; bí o bá gbé jáde ńlá láìsí ìdí, o ń fi ọ̀nà gbígbé dátà ṣòfò. Ìlànà tí ó rọrùn: pinnu ìwọ̀n tí ó tóbi jùlọ tí àwòrán náà yóò máa hàn nígbàkigbà, kí o sì gbé jáde ní ìwọ̀n yẹn tàbí jù bẹ́ẹ̀ lọ, ó sì dára jù fún àwọn ìran tí ó ní pixel púpọ̀ (high-density).

Àwọn ìran ìpilẹ̀ dára ní 1x — ìwọ̀n ìpilẹ̀ṣẹ̀ iṣẹ́-ọnà náà. Àwọn ìran High-DPI àti Retina ń kó fẹ́rẹ̀ẹ́ ìlọ́po méjì pixel sínú àyè kan náà, nítorí náà gbígbé jáde ní 2x ń pa àwọn àmì àti iṣẹ́-ọnà mọ́lẹ̀ dípò kí ó rọ̀. Fún ìtẹ̀wé, àwòrán ìpolówó, tàbí àwọn ìran ńlá gan-an, 3x tàbí 4x ń fún ọ ní àyè. Nítorí pé orísun náà jẹ́ fífẹ̀-jálè, gbígbé jáde ńlá kò ná ọ nǹkan kankan nínú dídára — a kàn ń tún ìṣírò ọ̀nà rírọ̀ náà lélẹ̀ ní iye pixel tí ó ga jù kí a tó pa á mọ́lẹ̀. Bí o bá ṣì ń ṣiyèméjì, gbé jáde ní ìwọ̀n tí ó tóbi; o lè dín PNG ńlá kù nígbàkigbà, ṣùgbọ́n o kò lè gba àlàyé padà nípa fífẹ̀ ọ̀kan kékeré sí i.

Ìdàkejì (transparency) ń bá a rìnrìn àjò lọ

PNG ní ojú alpha tó pé, èyí tí ó túmọ̀ sí pé ìdàkejì ń wà lẹ́yìn yíyí padà. Bí SVG rẹ kò bá ní kíkun ẹ̀yìn, PNG tí ó jáde yóò pa àwọn agbègbè yẹn mọ́ tí wọ́n ṣí, nítorí náà àmì-àpẹẹrẹ tàbí àmì kan yóò dúró mọ́lẹ̀ lórí àwọ̀ èyíkéyìí láìní àpótí funfun burúkú yí i ká. Bí o bá nílò ẹ̀yìn tí ó dúró ṣinṣin dípò, fún SVG náà ní ọ̀kan kí o tó yí padà. Ọ̀nàkọ̀ọ̀nà, ohun tí o rí nínú fífẹ̀-jálè náà ni ohun tí PNG yóò pa mọ́, ìdí gan-an ni yìí fi jẹ́ pé PNG — dípò JPG — ni àfojúsùn tí ó bá ṣe pàtàkì fún àwọn àmì, àwọn àmì-ẹ̀rí (badges), àti àwọn ìrísí àbò (overlays).

Ohun gbogbo ń dúró lórí ẹ̀rọ rẹ

Ohun èlò yíyí padà yìí ń ṣiṣẹ́ gẹ́gẹ́ bí àpèjúwe (code) ní ẹ̀rọ tirẹ nínú aṣàwakiri rẹ ní lílo canvas API. A ń ka SVG rẹ, a fà á yà, a sì gbé e jáde láìfi ránṣẹ́ sí sáfà kankan rárá, nítorí náà kò sí gbígbé-wọlé, kò sí ìlà ìdúró, kò sì sí àdàkọ iṣẹ́-ọnà rẹ tí ó ń gbé sínú ìpamọ́ra ẹlòmíràn. Ìyẹn yára ju fún ọ ó sì léwu díẹ̀ fún ohunkóhun tí o kò fẹ́ fi fún ẹnìkẹta, láti àmì-àpẹẹrẹ tí a kò tíì tú jáde sí àwòrán ìtọ́ka inú. Nígbà tí o bá parí níhìn-ín, wo ìyókù àwọn ohun èlò àwòrán wa — bí o bá ń kọ́ àmì Windows tàbí favicon kan, ohun èlò yíyí padà PNG sí ICO ni ìṣísẹ̀ tí ó tẹ̀lé ní àdánidá.

Àwọn ìbéèrè tí a sábà máa ń béèrè