Masyadong malaki ang SVG file? 8 na tip para sa compression at optimization

Ang isang SVG na may timbang na daang daang KB o kahit ilang MB ay karaniwang resulta ng napakaraming anchor, paulit-ulit na path, metadata ng editor at labis na katumpakan ng decimal. Ang walong tip sa ibaba ay nakaayos mula sa pinagmulan hanggang sa paghahatid, at lahat ay maaaring gawing totoo.

1. Sa antas ng path: mas kaunting anchor, pinagsamang path

Tip 1: Bawasan ang anchor (gawing simple ang path)

Ang mas maraming anchor, ang mas malaki ang file at ang mas mabagal ang rendering. Taasahan ang smoothing kapag nag-convert upang bawasan ang anchor mula sa pinagmulan. Para sa umiiral nang SVG, gamitin ang Object → Path → Simplify ng Illustrator o ang Path → Simplify (Ctrl+L) ng Inkscape upang alisin ang mga hindi kailangang anchor. Sa PolySVG conversion tool ay maaari mong i-tune ang smoothing at color count at makita nang live ang balanse ng kalidad at laki.

Tip 2: Pagsamahin ang path at layer

Pagsamahin ang maraming path na may parehong fill sa isa upang alisin ang paulit-ulit na katangian, patayin ang walang saysay na nesting ng group, at burahin ang nakatagong layer at walang lamang elemento. Sa design software, gamitin ang unite operation ng pathfinder o pagsamahin ang mga layer bago mag-export.

2. Sa loob ng file: bawasan ang metadata, babaan ang katumpakan

Tip 3: Alisin ang metadata ng editor

Ang SVG na na-export ng Illustrator o Inkscape ay madalas may dalang namespace ng editor, <metadata>, komento at export setting na walang epekto sa rendering, kaya puwedeng burahin nang manuwal o ipa-clean nang awtomatiko ng SVGO. Panatilihin ang <title> at <desc> — may tulong ito sa accessibility.

Tip 4: Babaan ang katumpakan ng decimal

Ang mga coordinate ng path ay kadalasang may anim hanggang walong decimal na lugar, samantalang ang screen rendering ay nangangailangan lang ng isa o dalawa. Ang pagtatakda ng floatPrecision sa 1-2 sa SVGO configuration ay lubos na nagpapaikli ng file nang walang makikitang pagkakaiba. Para sa napakaliit na icon, mag-ingat na huwag labis na i-compress ang coordinates, o magmamuddy ang hugis.

3. Automation: isang command kasama ang SVGO

Tip 5: I-optimize nang awtomatiko gamit ang SVGO

Ang SVGO ay de facto standard na tool para sa pag-optimize ng SVG at may ilang dosang plugin: pagtanggal ng komento at metadata, pagsasama ng path, pag-optimize ng path command at pag-clean up ng numero. Basic na paggamit:

npx svgo input.svg -o output.svg

Karaniwan ang mga file ay lumiliit ng 30%-70%. Dalawang paalala: huwag alisin ang attribute na viewBox o mawawala ang scalability; at para sa icon na i-recolor mo ng CSS, panatilihin ang minanang fill sa halip na itakda nang buo ang kulay.

Ihambing ang laki ng file at ang aktuwal na damang ipinapadala sa developer tools ng browser bago at pagkatapos ng pag-optimize upang makumpirma ang benepisyo. Baguhin ang isang uri ng parameter kada beses, kaya madaling matukoy kung aling hakbang ang nagdulot ng problema.

4. Istruktura at reuse: symbolization at control ng color layer

Tip 6: Gamitin ang defs at use para ma-reuse ang paulit-ulit na hugis

Kapag lumilitaw ang parehong icon nang maraming beses sa isang pahina, tukuyin ito minsan gamit ang <defs> at sangguniin nang maraming beses gamit ang <use>, o gawing SVG sprite sheet — pareho silang bababa ang laki ng file at ang bilang ng request.

Tip 7: Kontrolin ang color layer at iwasan ang naka-embed na bitmap

Babaan ang color count kapag nagve-vectorize upang mabawasan ang bilang ng layer, at gumamit ng solid na kulay sa halip na kumplikadong gradient kung kaya. Higit sa lahat, iwasan ang pag-embed ng base64 bitmap sa loob ng SVG — ginagawa iyon ang vector file na simpleng carrier ng bitmap at mawawala ang kontrol sa laki. Ang mga natitirang path mula sa conversion ay pwedeng i-click at burahin sa online editor.

5. Paghahatid: compression sa transport at cache

Tip 8: Buksan ang gzip/Brotli at cache

Ang SVG ay teksto, kaya ang pagpapanaas ng gzip o Brotli sa server ay karaniwang nakakabawasan ang damang ipinapadala ng 60%-80%; bigyan ang mga static na SVG file ng pangmatagalang cache header. Ang napakaliit na icon ay puwedeng i-inline nang direkta sa HTML, na naglilimita sa isang request lamang. Ang mga prinsipyo ay saklaw sa Ang mga benta ng SVG; at kung ayon mo ang laki sa conversion stage, basahin ang Mga paraan ng pag-convert ng larawan sa SVG.

Mahalaga ang pagkakasunod: kontrolin ang anchor at color layer mula sa pinagmulan, linisin ang metadata at katumpakan sa loob ng file, pagkatapos ay patakbuhin ang SVGO, at sa dulo ay buksan ang compression sa transport. Sa apat na layer na ito, karaniwang umiikli ang laki ng SVG ng isang order of magnitude.