Videon togs bort på den här. Jag ska skjuta det igen snart. Om du läser det här och jag inte har gjort det än är du välkommen att kontakta mig och bugga mig om det.
Ibland ser SVG du vill använda perfekt ut i Illustrator, men det är inte riktigt hur du vill använda det på webben.
En av de saker vi tittar på i den här videon är en enkel form som verkar som om det skulle vara en enda form men egentligen är fyra former som sitter ovanpå varandra. För att förenkla det väljer vi bara alla former och använder Pathfinder-verktygen i Illustrator för att kombinera dem i en enda form. Vi kan se det återspeglas omedelbart i koden. Ibland är det ganska kul att ha SVG-filen öppnad både i Illustrator och i en kodredigerare så när du sparar den kan du se vad den gör med koden.
Pathfinder är utmärkt för manuell optimering av former - det är värt att lära känna vad dessa knappar gör - och vad de gör med alternativtangenten också.
Storleken på en SVG-fil bestäms till stor del av hur många punkter det pågår i formerna. Det finns andra faktorer, men det är biggie. En annan sak vi tittar på i den här videon använder Illustrators Simplify Path-funktionen för att minska antalet punkter på vissa texturformiga former för att få filstorleken långt ner.
En annan sak att veta: sammansatta vägar kan vara användbara. Två former som är helt åtskilda från varandra kan fortfarande vara en väg. Som, bokstavligen en. Syntaxen möjliggör i huvudsak "plocka upp pennan, flytta den någon annanstans, rita något nytt". Så när du skapar en sammansatt sökväg i Illustrator (t.ex. flera oberoende former, Objekt> Sammansatt sökväg> Gör) så matas det ut. Kan leda till förenklad / optimerad SVG-utgång.