Faili ya SVG ni kubwa sana? Vidokezo 8 vya kuboriti na kuboresha

SVG yenye uzito wa mamia ya KB au hata mbio ngumu hutokana kwa kawaida na vituo vingi vya kamba, njia za ziada, metadata ya kihariri na sahihi ya desimali kupita kiasi. Mbinu nane zilizo hapa chini zimepangwa kuanzia chanzo hadi uwasilishaji, na zote zinaweza kutumika kwa vitendo.

1. Kwenye kiwango cha njia: vituo vingi vya kamba, njia zilizounganishwa

Kidokezo 1: Punguza vituo vya kamba (rahabishe njia)

Jinsi njia inavyokuwa na vituo vingi vya kamba ndivyo faili inavyokuwa kubwa na kuonyeshwa inavyokuwa polepole. Ongeza laini wakati wa kubadilisha ili kukata vituo vya kamba kuanzia chanzo. Kwa SVG tayari iliyopo, tumia Object → Path → Simplify ya Illustrator au Path → Simplify (Ctrl+L) ya Inkscape ili kuondoa vituo vingi visivyohitajika. Kwa kurekebisha laini na namba ya rangi kwenye zana ya kubadilisha ya PolySVG unaweza kusawazisha ubora na ukubwa wa faili papo hapo.

Kidokezo 2: Unganisha njia na tabaka

Changanya njia nyingi zenye filling sawa kuwa moja ili kuondoa sifa zinajirudia, tulaza mfumu wa makundi yasiyo ya lazima na futa tabaka zilizofichwa na vipengele visivyotumika. Katika programu ya uchoruzi, tumia utendaji wa unite wa pathfinder au unganisha tabaka kabla ya kuchuma.

2. Ndani ya faili: ondoa metadata, punguza sahihi

Kidokezo 3: Ondoa metadata ya kihariri

SVG zilizochumwa na Illustrator au Inkscape mara nyingi zina nafasi za majina ya kihariri, <metadata>, maelezo na mipangilio ya kuchuma ambayo haibadilishi chochote kwenye kuonyeshwa, kwa hivyo zinaweza kuondolewa kwa mkono au kusafishwa kiotomatiki na SVGO. Lakini hifadhi <title> na <desc>, kwa sababu zinasaidia kufikivu.

Kidokezo 4: Punguza sahihi ya desimali

Viwiko vya njia mara nyingi vina nafasi sita hadi nane za desimali, wakati kuonyeshwa kwenye skrini kuhitaji moja au mbili. Kuweka floatPrecision kuwa 1 au 2 katika mazingira ya SVGO hupunguza faili kwa kiasi bila tofauti inayoonekana. Kwa aikoni ndogo sana, angalia usikamue viwiko kupita kiasi, vinginevyo mchoro utachukua sura isiyo ya kawaida.

3. Uchakato wa kiotomatiki: amri moja na SVGO

Kidokezo 5: Boresha kiotomatiki kwa SVGO

SVGO ni zana kwao iliyo kawaida ya kuboresha SVG na ina moduli nyingi: kuondoa maelezo na metadata, kuchanganya njia, kuboresha amri za njia na kusafisha namba. Matumizi ya msingi:

npx svgo input.svg -o output.svg

Faili za kawaida hupungua kwa asilimia 30-70. Onyo mbili: usiondoe sifa ya viewBox kwa sababu kupanuliwa kutaribika; na kwa aikoni unazotaka kuchanganya rangi kwa CSS, acha filling iizurishe badala ya kuandika rangi mahali.

Linganisha ukubwa wa faili na ukubwa halisi unaotumika kwa usambazaji katika zana za wasanidi wa kivinjari kabla ya na baada ya kuboresha, ili kuthibitisha manufao. Badilisha aina moja tu ya vigezo kwa wakati mmoja, hivyo ni rahisi kujua hatua iliyosababisha tatizo.

4. Muundo na matumizi tena: symbol na tabaka za rangi

Kidokezo 6: Tumia tena maumbo yanayorudiwa kwa defs na use

Ukwa aikoni moja ikitokea mara nyingi kwenye ukurasa, ionyeshe mara moja kwa <defs> na ielekeze kwayo kwa <use>, au unda ukurasa wa sprite ya SVG, na ukubwa wa faili pamoja na idadi ya maombi hukushuka pamoja.

Kidokezo 7: Dhibiti tabaka za rangi na epuka bitmaps zilizojumbishwa

Punguza namba ya rangi wakati wa kuvectorisha ili kupunguza idadi ya tabaka, na tumia rangi moja badala ya mabadiliko magumu ya rangi pale inapowezekana. Zaidi ya yote, epuka kujumbisha bitmaps za base64 ndani ya SVG — hii hubadilisha faili ya vector kuwa mchukuzi wa bitmap na ukubwa hucheza mbali. Njia zilizobaki baada ya ubadilishaji zinaweza kufutwa kwa kufinyaza kwenye mhariri mtandaoni.

5. Uwasilishaji: kuboriti kwa usambazaji na kuhifadhi kwa haraka

Kidokezo 8: Washa gzip/Brotli na cache

SVG ni maandishi, kwa hivyo kuwasha gzip au Brotli kwenye seva kwa kawaida hupunguza ukubwa unaotumika kwa usambazaji kwa zaidi ya asilimia 60-80; faili za SVG tuliyo zipeke vichwa vya cache vya muda mrefu. Aikoni ndogo sana zinaweza kujumbishwa moja kwa moja ndani ya HTML, hivyo huthibitisha ombi moja kamili. Misingi iliyo nyuma ya haya inashughulikiwa katika Mwongozo wa faida za SVG; ili kudhibiti ukubwa katika hatua ya kubadilisha, soma Mwongozo wa njia za kubadilisha picha kuwa SVG.

Maagizo yana umuhofu: dhibiti vituo vya kamba na tabaka za rangi chanzo, safisha metadata na sahihi ndani ya faili, kishaendesha SVGO, na mwisho washa kuboriti kwa usambazaji. Kwa tabaka zote nne zilizo hapa, faili za SVG hupungua kwa kawaida kwa mpangilio mmoja kamili.