25: Manuell optimalisering av SVG i Illustrator - CSS-triks

Innholdsfortegnelse

Videoen ble fjernet på denne. Jeg skyter den en gang snart. Hvis du leser dette, og jeg ikke har gjort det ennå, kan du gjerne kontakte meg og bugge meg om det.

Noen ganger ser SVG-en du vil bruke, perfekt ut i Illustrator, men det er ikke helt hvordan du vil bruke den på nettet.

En av tingene vi ser på i denne videoen er en enkel form som virker som om det ville være en enkelt form, men faktisk er fire former som sitter oppå hverandre. For å forenkle det, velger vi bare alle figurene og bruker Pathfinder-verktøyene i Illustrator for å kombinere dem i en enkelt form. Vi kan se det gjenspeiles umiddelbart i koden. Noen ganger er det ganske morsomt å ha SVG-filen åpen både i Illustrator og i en kodeditor, så når du lagrer den, kan du se hva den gjør med koden.

Pathfinder er flott for manuell optimalisering av former - det er verdt å bli kjent med hva knappene gjør - og hva de gjør med alternativtasten også.

Størrelsen på en SVG-fil bestemmes i stor grad av hvor mange punkter det foregår i figurene. Det er andre faktorer, men det er biggie. En annen ting vi ser på i denne videoen, er å bruke Illustrators Simplify Path-funksjonen for å redusere antall punkter på noen teksturformede former for å få filstørrelsen ned.

En annen ting å vite: sammensatte stier kan være nyttige. To former som er helt atskilt fra hverandre, kan fortsatt være en vei. Som, bokstavelig talt en. Syntaksen tillater i det vesentlige "å ta opp pennen, flytte den et annet sted, tegne noe nytt". Så når du oppretter en sammensatt bane i Illustrator (f.eks. Flere uavhengige former, Objekt> Sammensatt bane> Lag), blir det slik den sendes ut. Kan føre til forenklet / optimalisert SVG-utgang.

Interessante artikler...