Hurtig Tips Færre noder = Lysere SVG

Nylig fant jeg meg selv å spille på snap.svg-siden (ta en titt hvis du ikke har brukt det selv enda). Den har en veldig fin SVG-polygonbakgrunn på toppteksten, som veier inn på et lite 2,2Kb. Fordi jeg er merkelig, bestemte jeg meg for å prøve å gjøre det mindre.

I Illustrator

SVG-filen selv ser slik ut når den åpnes i Illustrator:

Så hvis du sjekker oversikten (Vis> Oversikt) du ser alle vektorbanene lagt ut uten fyllfarger:

"Hva et rot!" Jeg trodde "Jeg er sikker på at jeg kan rydde opp og redusere filstørrelsen." Så jeg gikk om å rydde opp linjene for å fjerne alt unødvendig overlapping. 

underlige

Med Pathfinder verktøyet du kan bruke objekter til å "cookie cut" deres skjema fra objekter under. På denne måten kan du unngå å ha noen former overlapping, i stedet skape en mer "puslespill" -effekt.

Fra dette… … til dette

Mye bedre. Når jeg hadde gjort det samme med hele illustrasjonen, så jeg på dette:

Jeg tok feil

Ved å gjøre dette krympet filstørrelsen, den vokste. Mens originalen veide 2.217Kb, den nye versjonen veide 2.269Kb. En liten forskjell i reelle termer, men "rydde opp" ting hadde likevel gjort filen tyngre. På en større grafikk kunne effekten ha gjort en stor forskjell.

Men hvorfor? Det er alt til noder, eller ankere; leddene langs en vektorbane. SVG-filer er bare XML-data, og hver knutepunkt langs en sti krever ekstra koordinater. Den opprinnelige filen kan ha blitt bygget fra en haug med overlappende trekanter, men lagdeling koster ikke filstørrelsen i det hele tatt (noen objekter i et XML-dokument vises i rekkefølge i rekkefølge). Det som skapte den ekstra størrelsen var at jeg hadde laget firesidige (firesidige) polygoner fra trekanter. Oops.

Slik ser de ut som SVG-kode, først en av originalene:

Og nå er en av mine "forbedrede" former:

Flere data. Så enkelt som det.

Rengjør nodene dine

Ta bort leksjonen fra dette er å fjerne uønskede noder fra SVG-filene dine, men ikke bekymre deg for overlapping. Shedding noder er nummer én måte å redusere kompleksitet og dermed filstørrelse.

Bruke Slett ankerpunktsverktøy (-) å fjerne et anker fra en sti. Du vil bli overrasket over hvor få ankre en vektorbane trenger mens du fremdeles beholder sin form! Et godt plassert anker vil gjøre jobben til tre dårlige tanke.

Stray Points

Et siste tips er å fjerne bortfallssteder fra SVG. Stray poeng er ofte usynlige fordi de ikke kan fylles, men de vil koste deg data alt det samme. I Illustrator, gå til Velg> Objekt> Stray Points å velge dem alle, og trykk deretter slette for å fjerne dem.

Pesky stray anchor points

Jeg håper du lærte noe fra dette! Det er en av de tilsynelatende åpenbare tingene som jeg aldri hadde tenkt på før. Hadde deg?