Olùdín àti Olùmúlẹ́wa SVG Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

Irinṣẹ́ yìí ń dín ìwọ̀n fáìlì SVG kù ní lílo olùmúgbóná tí a fi ọwọ́ kọ tí ó ń ṣiṣẹ́ pátápátá nínú aṣàwákiri rẹ — kò sí ìwé-ìṣirò, kò sí sáfà. Ó ń kó ìgbésẹ̀ méjì papọ̀: DOMParser/XMLSerializer aṣàwákiri tí a kọ́ sínú rẹ̀ fún iṣẹ́ pípé ìpele-ìhun-ìní, àti ìrọ́pò regex àfojúsùn fún yíyọ ọ̀rọ̀-àsọyé kúrò, yíyọ metadata kúrò, àti ìkó àyè papọ̀.

1. 1
   DOMParser ń mú SVG náà mọ́

   Kí àmúgbóná èyíkéyìí tó bẹ̀rẹ̀, DOMParser aṣàwákiri ń ka SVG náà gẹ́gẹ́ bí XML tí ó sì ń rìn kiri ẹ̀yà kọ̀ọ̀kan. A ń yọ àwọn tag script, àwọn olùmú ìṣẹ̀lẹ̀ (àkànṣe on* èyíkéyìí), àwọn ẹ̀yà àwòrán, àti àwọn ìtọ́ka URL ìta kúrò láìsí àṣàyàn kankan — èyí ń ṣiṣẹ́ láìka àṣàyàn àmúgbóná tí o yàn sí.
2. 2
   Yíyíká decimal tí ó gbé lé DOM

   Bí yíyíká decimal bá tan, olùmúgbóná náà ń rìn kiri DOM tí a pín náà lẹ́ẹ̀kejì tí ó sì ń fi yíyíká sílo sí àwọn àkànṣe nọ́mbà tí a mọ̀ nìkan (dátà path d, àwọn ìdí, àwọn iye transform, ìbú stroke, àti bẹ́ẹ̀ bẹ́ẹ̀ lọ), ní lílo regex tí ó ń bá nọ́mbà floating-point ọ̀tọ̀ọ̀tọ̀ mu láìbàjẹ́ àwọn iye path tí a so pọ̀ bí .5.5.
3. 3
   Àwọn ìgbésẹ̀ regex ń mú àmì tí a ṣe serialize mọ́

   XMLSerializer ń mú XML tí a ṣe déédéé jáde, kí àwọn ìrọ́pò ọ̀wọ́ ọ̀rọ̀ àfojúsùn sì yọ àwọn ọ̀rọ̀-àsọyé HTML, metadata olùṣàtúnṣe Inkscape/Sodipodi, ìkéde XML, àwọn àkànṣe déédéé àṣejù (bí version="1.1"), àti àyè-láàrin-tags kúrò — ìgbésẹ̀ kọ̀ọ̀kan ní àyè tóóró nítorí náà a kì í fọwọ́kan àkóónú node ọ̀rọ̀ láé.
4. 4
   Ìwọ̀n gzip àti àwọn ìrísí gbígbé jáde

   API CompressionStream aṣàwákiri ń ṣírò ìwọ̀n gzip gidi ti ìbáwọlé àti ìtọjade méjèèjì, nítorí èyí gan-an ni ohun tí ó ń pinnu iye owó gbígbé lórí wẹ́ẹ̀bù. A lè gba SVG tí a mú gbóná náà jáde, dàkọ ọ́ gẹ́gẹ́ bí SVG gan-an, yí padà sí àwọn àkànṣe camelCase tí ó ti ṣetán fún React JSX, tàbí ṣe àmúlò rẹ̀ gẹ́gẹ́ bí CSS data URI — gbogbo ìyípadà ń ṣẹlẹ̀ ládùúgbò.

Àwọn Irinṣẹ Tó Jọra