Share
Onlangs vond ik mezelf aan het spelen op de snap.svg-site (kijk eens of je het nog niet zelf hebt gebruikt). Het heeft een hele leuke SVG-polygoonachtergrond op de kop, die weegt op een magere 2.2Kb. Omdat ik raar ben, heb ik besloten om het kleiner te maken.
Het SVG-bestand zelf ziet er als volgt uit wanneer het wordt geopend in Illustrator:
Als u vervolgens de overzichtsweergave controleert (Bekijken> Overzicht) je ziet alle vectorpaden aangelegd zonder opvulkleuren:
"Wat een puinhoop!" Ik dacht: "Ik weet zeker dat ik dit op kan ruimen en de bestandsgrootte kan verkleinen." Dus ging ik over het opruimen van de regels om alle overbodige overlappingen te verwijderen.
Met de verkenner tool kun je objecten gebruiken om hun vorm uit de onderliggende objecten te "snijden". Op deze manier kunt u voorkomen dat om het even welke vorm overlapt, in plaats daarvan creëert u een meer "puzzel" -effect.
Van dit… 
... hiernaar toeVeel beter. Toen ik hetzelfde had gedaan met de hele illustratie, keek ik hiernaar:
Daarbij nam de bestandsgrootte niet af, maar groeide. Terwijl het origineel 2.217Kb woog, woog de nieuwe versie 2.269Kb. Een klein verschil in reële termen, maar het opruimen van dingen had het dossier desondanks zwaarder gemaakt. Op een grotere afbeelding zou het effect een groot verschil kunnen hebben gemaakt.
Maar waarom? Het komt allemaal aan nodes, of ankers; de gewrichten langs een vectorpad. SVG-bestanden zijn niets anders dan XML-gegevens en elk knooppunt langs een pad vereist extra coördinaten. Het originele bestand is mogelijk gemaakt van een veelvoud van overlappende driehoeken, maar gelaagdheid kost helemaal geen bestandsgrootte (alle objecten in een XML-document worden inherent in volgorde weergegeven). Wat de extra grootte creëerde, was dat ik vierhoekige (vierzijdige) polygonen uit de driehoeken heb gemaakt. Oops.
Zo zien ze eruit als SVG-code, eerst een van de originelen:
En nu een van mijn 'verbeterde' vormen:
Meer gegevens. Simpel als dat.
De take-away-les hiervan is om ongewenste knooppunten uit je SVG-bestanden te verwijderen, maar maak je geen zorgen over overlapping. Het afwerpen van knooppunten is de belangrijkste manier om de complexiteit en daarmee de bestandsgrootte te verminderen.
Gebruik de Ankerpuntgereedschap verwijderen (-) om een anker van een pad te verwijderen. Je zult verbaasd zijn over hoe weinig ankers een vectorpad nodig heeft en toch zijn vorm behoudt! Een goed geplaatst anker zal het werk doen van drie slecht doordachte ankers.
Een laatste tip is om verdwaalde punten van je SVG te verwijderen. Verdwaalde punten zijn vaak onzichtbaar omdat ze niet kunnen worden ingevuld, maar ze kosten je gegevens allemaal hetzelfde. Ga in Illustrator naar Selecteer> Object> Straalpunten om ze allemaal te selecteren, druk dan op verwijderen om ze te verwijderen.
Vervelende zwerf ankerpuntenIk hoop dat je hier iets van hebt geleerd! Het is een van die ogenschijnlijk voor de hand liggende dingen waar ik nog nooit aan had gedacht. Had je?
Accentsconagua