() translation by (you can also view the original English article)
Récemment, je me suis retrouvé à jouer sur le site snap.svg (jetez un coup d'oeil si vous ne l'avez pas encore utilisé). Il a un fond de polygone SVG sur l'en-tête très agréable, qui pèse à un maigre de 2.2Kb. Parce que je suis un peu bizarre, j'ai décidé d'essayer de le rendre plus petit.
Dans Illustrator
Le fichier SVG lui-même ressemble à ceci lorsqu'il est ouvert dans Illustrator:
Ensuite, si vous cochez la vue de contour (View > Outline), vous voyez tous les chemins de vecteurs disposés sans couleurs de remplissage:
"Quel gâchis!" J'ai pensé "je suis sûr que je peux ranger cela et réduire la taille du fichier." Alors je suis allé sur le nettoyage des lignes pour enlever tout le chevauchement inutile.
Puzzling
Avec l'outil Pathfinder, vous pouvez utiliser des objets pour «cookie cut» leur forme à partir d'objets situés en dessous. De cette façon, vous pouvez éviter d'avoir des formes superposées, créant ainsi un effet plus "puzzle".
Beaucoup mieux. Une fois que j'avais fait la même chose avec toute l'illustration, je regardais ceci:
J'avais tort
En faisant cela, la taille du fichier n'a pas diminué, il a augmenté. Alors que l'original pesait 2.217Kb, mais la nouvelle version pesait 2.269Kb. Une toute petite différence en termes réels, mais le fait de "ranger" les choses avait néanmoins alourdi le dossier. Sur un graphique plus large, l'effet aurait pu faire une grande différence.
Mais pourquoi? Tout est descendu aux nœuds ou aux ancres; les articulations le long d'un chemin vectoriel. Les fichiers SVG ne sont justement des données XML, et chaque nœud le long d'un chemin requiert des coordonnées supplémentaires. Le fichier d'origine peut avoir été construit à partir d'un tas de triangles superposés, mais la superposition ne coûte pas du tout la taille du fichier (tous les objets d'un document XML sont affichés dans l'ordre). Ce qui a créé la taille supplémentaire, c'est que j'ai fait des polygones quadrilatéraux (à quatre côtés) à partir des triangles. Oops.
Voici comment ils ressemblent au code SVG, le premier des originaux:
1 |
<polygon fill="#46CEB4" points="1434.5,-21.75 1644.5,-21.75 1524.5,158.25 "/> |
Et maintenant une de mes formes "améliorées":
1 |
<polygon fill="#97E8DA" points="1584.5,258.2 1744.5,228.2 1745,228.2 1634.5,88.2 1550.2,256.8 "/> |
Plus de données. Aussi simple que cela.
Nettoyez vos noeuds
La leçon à emporter à partir de ceci est de supprimer tous les nœuds indésirables de vos fichiers SVG, mais ne vous inquiétez pas de chevauchement. Les noeuds de shedding sont la seul manière numéro pour réduire la complexité et ainsi la taille de fichier.
Utilisez l'outil Delete Anchor Point tool (-) pour supprimer une ancre d'un chemin. Vous serez surpris du peu d'ancres dont un chemin vectoriel a besoin tout en conservant sa forme! Une ancre bien placée fera le travail de trois personnes mal pensées.
Stray Points
Une dernière astuce consiste à supprimer les points parasites de votre SVG. Les Stray points sont souvent invisibles car ils ne peuvent pas être remplis, mais ils vous coûteront tout de même des données. Dans Illustrator, sélectionnez Select > Object > Stray Points pour les tous sélectionner , puis appuyez sur delete pour les supprimer.
J'espère que vous avez appris quelque chose de cela! C'est une de ces choses apparemment évidentes auxquelles je n'avais jamais pensé auparavant. As-tu?
