Optimizues & Minifikues SVG Falas

Si funksionon

Ky mjet e ul madhësinë e skedarëve SVG duke përdorur një optimizues të shkruar me dorë që funksionon tërësisht në shfletuesin tënd — pa biblioteka, pa server. Kombinon dy kalime: DOMParser/XMLSerializer të integruar të shfletuesit për punë saktësie në nivel atributi, dhe zëvendësime të synuara regex për heqjen e komenteve, heqjen e metadatave, dhe shpalosjen e hapësirave.

1. 1
   DOMParser sanitizon SVG-në

   Para se të fillojë ndonjë optimizim, DOMParser i shfletuesit e lexon SVG-në si XML dhe kalon nëpër çdo element. Etiketat script, trajtues ngjarjesh (çdo atribut on*), elemente animacioni, dhe referenca URL të jashtme hiqen pa kusht — kjo funksionon pavarësisht nga opsionet e optimizimit që zgjedh.
2. 2
   Rrumbullakosje dhjetore e bazuar në DOM

   Nëse rrumbullakosja dhjetore është aktive, optimizuesi kalon nëpër DOM-in e analizuar një herë të dytë dhe zbaton rrumbullakosje vetëm te atributet numerike të njohura (të dhëna d të shtegut, koordinata, vlera transformimi, gjerësi vije, etj.), duke përdorur një regex që përputh numra individualë me pikë lëvizëse pa dëmtuar vlera shtegu të bashkuara si .5.5.
3. 3
   Kalimet regex e pastrojnë markup-in e serializuar

   XMLSerializer prodhon XML të normalizuar, pastaj zëvendësime të synuara vargjesh heqin komente HTML, metadata redaktuesish Inkscape/Sodipodi, deklaratën XML, atribute të paracaktuara të tepërta (si version="1.1"), dhe hapësira mes-etiketash — çdo kalim i kufizuar ngushtë kështu që përmbajtja e nyjeve teksti nuk preket kurrë.
4. 4
   Madhësia Gzip dhe formatet e eksportit

   API-ja CompressionStream e shfletuesit llogarit madhësitë reale gzip si të hyrjes ashtu edhe të daljes, sepse kjo është ajo që në të vërtetë përcakton koston e transferimit në web. SVG-ja e optimizuar mund të shkarkohet, kopjohet si SVG i papërpunuar, konvertohet në atribute camelCase gati-për-React JSX, ose kodifikohet si një data URI CSS — të gjitha konvertimet ndodhin lokalisht.

Mjete të ngjashme