Astuce moins de nœuds = SVG plus léger

Récemment, je me suis retrouvé à jouer sur le site snap.svg (jetez un œil si vous ne l'avez pas encore utilisé vous-même). L'en-tête contient un arrière-plan de polygone SVG vraiment sympa, qui ne pèse que 2,2 Ko. Parce que je suis bizarre, j'ai décidé d'essayer de le réduire.

Dans Illustrator

Le fichier SVG lui-même ressemble à ceci lorsqu'il est ouvert dans Illustrator:

Ensuite, si vous vérifiez la vue d'ensemble (Voir> Contour) vous voyez tous les chemins vectoriels tracés sans couleurs de remplissage:

«Quel gâchis!» Je me suis dit «Je suis sûr que je peux ranger tout ça et réduire la taille du fichier.. 

Déroutant

Avec le Éclaireur outil, vous pouvez utiliser des objets pour “couper” leur forme à partir d'objets situés en dessous. De cette façon, vous pouvez éviter de superposer des formes, mais créer un effet plus «casse-tête»..

À partir de cela… … pour ça

Beaucoup mieux. Une fois que j'avais fait de même avec toute l'illustration, je regardais ceci:

J'avais tort

Ce faisant, la taille du fichier n'a pas diminué, elle a augmenté. Alors que l'original pesait 2.217Ko, la nouvelle version pesait 2.269Ko. Une toute petite différence en termes réels, mais le fait de «ranger» les choses avait néanmoins alourdi le fichier. Sur un graphique plus large, l'effet aurait pu faire une grande différence.

Mais pourquoi? C'est tout à noeuds, ou les ancres; les articulations le long d'un chemin vectoriel. Les fichiers SVG ne sont rien d'autre que des données XML et chaque nœud d'un chemin nécessite des coordonnées supplémentaires. Le fichier original a peut-être été construit à partir de plusieurs triangles superposés, mais superposition ne coûte pas du tout la taille du fichier (tous les objets d'un document XML sont affichés de manière inhérente dans l'ordre). Ce qui a créé la taille supplémentaire, c’est ma création de polygones quadrilatéraux à partir des triangles. Oops.

Voici à quoi ils ressemblent en tant que code SVG, le premier des originaux:

Et maintenant une de mes formes «améliorées»:

Plus de données. Aussi simple que cela.

Nettoyez vos nœuds

La leçon à retenir de ceci est de supprimer tous les nœuds indésirables de vos fichiers SVG, sans vous soucier du chevauchement. La suppression des nœuds est le moyen numéro un de réduire la complexité et donc la taille du fichier..

Utilisez le Supprimer l'outil Point d'ancrage (-) enlever une ancre d'un chemin. Vous serez surpris du nombre d'ancrages dont a besoin un chemin vectoriel tout en conservant sa forme! Une ancre bien placée fera le travail de trois mal pensées.

Points de fuite

Un dernier conseil consiste à supprimer les points parasites de votre fichier SVG. Les points perdus sont souvent invisibles car ils ne peuvent pas être remplis, mais ils vous coûteront tout de même les données. Dans Illustrator, accédez à Sélectionnez> Objet> Points parasites pour tous les sélectionner, puis appuyez sur effacer pour les enlever.

Points d'ancrage errants Pesky

J'espère que vous avez appris quelque chose de ça! C'est une de ces choses apparemment évidentes auxquelles je n'avais jamais pensé auparavant. As-tu?