Share
Nyligen fann jag mig själv spela på snap.svg-sidan (ta en titt om du inte har använt det själv ännu). Den har en riktigt snygg SVG-polygonbakgrund på rubriken, som väger in på en mager 2.2Kb. Eftersom jag är konstig bestämde jag mig för att försöka göra det mindre.
SVG-filen själv ser ut så här när den öppnas i Illustrator:
Då om du tittar på översikten (Visa> Översikt) du ser alla vektorbanor som läggs ut utan fyllfärger:
"Vad en röra!" Jag tänkte "Jag är säker på att jag kan städa upp det och minska filstorleken." Så jag gick om att rensa upp raderna för att ta bort all onödig överlappning.
Med Stigfinnare verktyg du kan använda objekt för att "cookie cut" sin form från föremål nedanför. På så sätt kan du undvika att ha några former överlappande, istället skapa en mer "pussel" -effekt.
Från detta… 
… till dettaMycket bättre. När jag hade gjort detsamma med hela illustrationen tittade jag på det här:
Genom att göra detta krympades inte filstorleken, den växte. Medan originalet vägde 2.217Kb, den nya versionen vägde 2.269Kb. En liten skillnad i reala termer, men "städa" sakerna hade ändå gjort filen tyngre. På en större grafik kunde effekten ha gjort stor skillnad.
Men varför? Det är allt nere noder, eller ankare; lederna längs en vektorbana. SVG-filer är ingenting annat än XML-data, och varje nod längs en sökväg kräver ytterligare koordinater. Den ursprungliga filen kan ha byggts från en massa överlappande trianglar, men skiktning kostar inte alls filstorlek (alla objekt i ett XML-dokument visas i sin tur i ordning). Vad skapade den extra storleken var att jag hade gjort fyrsidiga (fyrsidiga) polygoner från trianglarna. Hoppsan.
Så här ser de ut som SVG-kod, det första av originalen:
Och nu en av mina "förbättrade" former:
Mer data. Enkelt som det.
Ta bort lektionen från detta är att ta bort oönskade noder från dina SVG-filer, men oroa dig inte för överlappning. Shedding noder är nummer ett sätt att minska komplexiteten och därmed filstorleken.
Använd Ta bort Anchor Point-verktyget (-) att ta bort ett ankar från en bana. Du kommer att bli förvånad över hur få ankrar en vektorväg behöver medan du fortfarande behåller sin form! Ett välplacerat ankare kommer att göra jobbet av tre dåligt genomtänkta.
Ett sista tips är att ta bort bortlöpningspunkter från din SVG. Spraypunkter är ofta osynliga eftersom de inte kan fyllas, men de kostar dig samma data. I Illustrator, gå till Välj> Objekt> Stray Points för att välja dem alla, klicka sedan på radera att ta bort dem.
Pesky stray anchor pointsJag hoppas du lärde dig något av det här! Det är en av de till synes uppenbara saker som jag aldrig hade tänkt på tidigare. Hade du?
Accentsconagua