Optimiser les modèles SVG à leur plus petite taille

Récemment, j'ai créé un motif de mur de briques dans le cadre de ma série #PetePatterns, qui était un défi et j'avais besoin de créer un motif ou une texture d'aspect naturel avec SVG à moins de 560 octets (ou de la taille de deux tweets). Pour respecter cette limitation, j'ai traversé un voyage qui m'a appris des moyens radicaux d'optimiser les modèles SVG afin qu'ils contiennent le moins de code possible sans affecter la qualité globale de l'image.

Je veux vous guider tout au long du processus et vous montrer comment réduire un modèle SVG qui était à l'origine de 197 octets à seulement 44 octets - une réduction incroyable de 77,7%!

Modèle SVG

Ceci est connu comme le motif de brique "liaison continue". C'est le motif de briques le plus courant, vous devez avoir déjà vu: chaque rangée de briques est compensée de la moitié de la longueur de la brique, formant un motif étalé répété. Cet arrangement est très simple, ce qui rend les SVG<pattern></pattern> Les éléments sont parfaits pour le reproduire en code.

SVG<pattern></pattern> Les éléments utilisent des objets graphiques prédéfinis qui peuvent être répétés à des intervalles fixes sur des axes horizontaux et verticaux (ou "carrelés"). Essentiellement, nous définissons un motif de carreaux rectangulaires qui se répétera pour dessiner la zone de remplissage.

Tout d'abord, définissons la taille des briques et l'écart entre chaque brique. Pour plus de simplicité, utilisons des entiers clairs: les briques ont une largeur de 100 et la hauteur de 30, et les écarts horizontaux et verticaux entre eux sont 10.

Ensuite, nous devons identifier nos tuiles "de base". "Tile" fait référence aux carreaux de motif, pas aux carreaux physiques, et ne doit pas être confondu avec les briques. Utilisons la partie en surbrillance de l'image ci-dessus comme carreaux de motif: il y a deux briques pleines dans la première rangée et une brique complète dans la deuxième rangée prise en sandwich entre deux briques et demie. Notez l'emplacement et la manière de l'écart, car ceux-ci doivent être inclus dans les tuiles de motif répétées.

utiliser<pattern></pattern> Lorsque nous devons définir la largeur et la hauteur du motif, elles correspondent à la largeur et à la hauteur de la tuile de base. Pour obtenir la taille, nous devons faire quelques calculs:

<code>图块宽度= 2（砖块宽度） 2（间隙）= 2（100） 2（10）= 220图块高度= 2（砖块高度） 2（间隙）= 2（30） 2（10）= 80</code>

OK, donc nos carreaux de motif sont 220✕80. Nous devons également définir la propriété patternUnits , où la valeur userSpaceOnUse représente essentiellement le pixel. Enfin, l'ajout de l'ID du motif est nécessaire afin qu'il puisse être référencé lors du dessin d'un autre élément avec.

<code><pattern height="80" patternunits="userSpaceOnUse" width="220"></pattern></code>

Maintenant que nous avons déterminé la taille des carreaux, le défi est de savoir comment créer le code de tuile avec le moins d'octets possible pour rendre le graphique. C'est ce que nous espérons finalement réaliser:

Tag initial (197 octets)

À mon avis, la façon la plus simple et la plus explicite de reproduire ce modèle est de dessiner cinq rectangles. Par défaut, l'élément SVG est rempli en noir et les traits sont transparents. Cela fonctionne très bien pour optimiser les modèles SVG, car nous n'avons pas à les déclarer explicitement dans notre code.

Chaque ligne du code suivant définit un rectangle. La largeur et la hauteur sont toujours définies et les positions x et y sont définies uniquement si le rectangle est décalé de la position 0.

 <code><rect height="30" width="100"></rect><rect height="30" width="100" x="110"></rect><rect height="30" width="45" y="40"></rect><rect height="30" width="100" x="55" y="40"></rect><rect height="30" width="55" x="165" y="40"></rect></code>

La rangée supérieure de la tuile contient deux briques pleine largeur, la deuxième brique positionnée à x = "110", laissant un espace de 10 pixels avant la brique. De même, il y a un espace de 10 pixels par la suite, car la position finale de la brique sur l'axe horizontal est de 210 pixels (110 100 = 210), même si<pattern></pattern> La largeur est de 220 pixels. Nous avons besoin d'un peu d'espace supplémentaire; Sinon, la deuxième brique sera fusionnée avec la première brique dans les tuiles adjacentes.

Les briques de la deuxième ligne (en bas) sont décalées, donc la ligne contient deux brique et demi et une brique complète. Dans ce cas, nous voulons que la moitié des briques se fusionnent, il n'y a donc pas d'écart au début ou à la fin, leur permettant de se fondre parfaitement avec les briques dans des carreaux de motif adjacents. Lors de la compensation de ces briques, nous devons également inclure un demi-espace, donc les valeurs X sont respectivement de 55 et 165.

Réutilisation des éléments (-43b, 154b au total)

Il semble inefficace de définir chaque brique si clairement. Existe-t-il un moyen d'optimiser les motifs SVG en réutilisant les formes?

Je pense que SVG<use></use> Les éléments ne sont pas largement connus. Vous pouvez l'utiliser pour vous référer à un autre élément et utiliser<use></use> L'élément référencé est rendu n'importe où. Cela permet d'économiser beaucoup d'octets, car nous pouvons omettre de spécifier la largeur et la hauteur de chaque brique sauf la première brique.

C'est-à-dire,<use></use> Il y a vraiment un prix à payer. Autrement dit, nous devons ajouter un ID à l'élément que nous voulons réutiliser.

 <code><rect height="30" width="100"></rect><use href="#b" x="110"></use><use href="#b" x="-55" y="40"></use><use href="#b" x="55" y="40"></use><use href="#b" x="165" y="40"></use></code>

Le plus petit identifiant possible est un personnage, j'ai donc choisi "B" pour la brique.<use></use> Les éléments peuvent être comme<rect></rect> Même positionnement, les propriétés X et Y sont utilisées comme décalages. Puisque nous passons à<use></use> Une fois que chaque brique est maintenant pleine largeur (rappelez-vous, nous avons explicitement coupé la brique en deux dans la deuxième rangée des tuiles de motif), nous devons utiliser une valeur X négative dans la deuxième rangée, puis assurez-vous que la dernière brique déborde des carreaux afin que les briques soient connectées de manière transparente. Celles-ci sont correctes car tout ce qui en dehors des carreaux de motif sera coupé automatiquement.

Pouvez-vous trouver des chaînes en double qui peuvent être écrites plus efficacement? Étudions ces prochains.

Réécrire comme chemin (-54b, 100b au total)

<path></path> Probablement l'élément le plus puissant de SVG. Vous pouvez dessiner presque n'importe quelle forme en utilisant la "commande" dans son attribut d Il y a 20 commandes disponibles, mais nous n'avons besoin que de la commande rectangulaire la plus simple.

C'est ce que j'ai fini avec:

 <code><path d="M0 0h100v30h-100z
         M110 0h100v30h-100
         M0 40h45v30h-45z
         M55 40h100v30h-100z
         M165 40h55v30h-55z"></path></code>

Je sais, des chiffres et des lettres super étranges! Bien sûr, ils ont tous du sens. Voici les circonstances dans ce cas particulier:

• M {x} {y}: passer à un point basé sur les coordonnées.
• Z: Fermez le segment actuel.
• h {x}: tracez une ligne horizontale à partir du point de courant, avec une longueur de x et la direction est définie par le symbole de x. Minkecase X représente les coordonnées relatives.
• v {y}: tracez une ligne verticale à partir du point actuel, avec une longueur de y et la direction est définie par le symbole de y. En minuscule Y indique des coordonnées relatives.

Cette balise est beaucoup plus simple que la balise précédente (les ruptures de ligne et les espaces en retrait sont pour la lisibilité uniquement). Et, hé, nous avons réussi à réduire la taille initiale de moitié à 100 octets. Pourtant, il y a des choses qui me donnent l'impression que cela peut être plus petit…

Révision des carreaux (-38b, 62b au total)

N'y a-t-il pas une partie en double de nos carreaux de motif? De toute évidence, la première ligne répète une brique complète, mais qu'en est-il de la deuxième ligne? C'est un peu difficile à voir, mais il est évident que si nous coupons la brique du milieu en deux.

Eh bien, les briques au milieu ne sont pas complètement coupées en deux. Il y a un léger décalage car nous devons également considérer l'écart. Quoi qu'il en soit, nous venons de trouver un motif de carreaux de base plus simple, ce qui signifie moins d'octets! Cela signifie aussi que nous devons<pattern></pattern> La largeur de l'élément est divisée par deux de 220 à 110.

<code><pattern height="80" patternunits="userSpaceOnUse" width="110"></pattern></code>

Voyons maintenant comment l'utiliser<path></path> Dessinez des carreaux simplifiés:

 <code><path d="M0 0h100v30h-100z
         M0 40h45v30h-45z
         M55 40h55v30h-55z"></path></code>

La taille est réduite à 62 octets, ce qui représente moins un tiers de la taille d'origine! Mais pourquoi s'arrêter ici quand nous pouvons faire plus!

COMMANDE DE PATH CHORNEN (-9B, 53B au total)

Vaut plus de recherches approfondies<path></path> Élément, car il fournit plus de conseils pour optimiser les modèles SVG. Utilisé<path></path> J'ai un malentendu sur le fonctionnement des propriétés de remplissage. J'ai joué beaucoup de peinture MS dans mon enfance et j'ai appris que toute forme que je voulais remplir de couleurs unis devait être fermée, c'est-à-dire pas de points ouverts. Sinon, la peinture s'échappera de la forme et renversera tout.

Cependant, ce n'est pas le cas dans SVG. Permettez-moi de citer la spécification elle-même:

L'opération de remplissage remplit le sous-chemin ouvert en effectuant une opération de remplissage, comme si une commande supplémentaire "ClosePath" était ajoutée au chemin pour connecter le dernier point du sous-chemin au premier point de la sous-cheminée.

Cela signifie que nous pouvons omettre la commande de chemin fermé (z) car le sous-chemin est automatiquement considéré comme rempli lorsqu'il est rempli.

Une autre chose utile à propos des commandes de chemin est qu'ils ont des variantes de cas. Les lettres minuscules indiquent l'utilisation de coordonnées relatives;

La situation est un peu délicate pour les commandes H et V car elles ne contiennent qu'une seule coordonnée. Voici ma description:

• H {x}: tracez une ligne horizontale du point actuel pour coordonner x.
• V {y}: tracez une ligne verticale du point actuel à la coordonnée y.

Lorsque nous dessinons la première brique de la tuile de motif, nous commençons par les coordonnées (0,0). Ensuite, nous dessinons une ligne horizontale sur (100,0) et une ligne verticale à (100,30), et enfin, tracez une ligne horizontale à (0,30). Nous avons utilisé la commande H-100 sur la dernière ligne, mais elle équivaut à H0, qui est de cinq octets au lieu de deux octets. Nous pouvons remplacer deux apparitions similaires et<path></path> Le code est réduit à:

<code><path d="M0 0h100v30H0
         M0 40h45v30H0
         M55 40h55v30H55"></path></code>

Réduit de 9 octets - combien pouvons-nous réduire?

Pont (-5b, 48b au total)

La commande la plus longue qui nous empêche d'optimiser pleinement les modèles SVG est la commande "Déplacer vers", qui occupe respectivement 4, 5 et 6 octets. Nous avons une limitation:

Le segment de données de chemin (si présent) doit commencer par la commande "MoveTo".

Mais cela n'a pas d'importance. Le premier est le plus court. Si nous échangeons des lignes, nous pouvons obtenir une définition de chemin où nous avons juste besoin de nous déplacer horizontalement ou verticalement entre les briques. Et si nous pouvions utiliser les commandes H et V là-bas au lieu de M?

L'image ci-dessus montre comment dessiner trois formes en utilisant un seul chemin. Notez que nous tirons parti du fait que l'opération de remplissage ferme automatiquement la partie ouverte entre (110,0) et (0,0). Avec ce réarrangement, nous déplaçons également l'écart vers la gauche de la deuxième rangée de briques pleine largeur. Voici à quoi ressemble le code, toujours divisé en une brique par ligne:

<code><path d="M0 0v30h50V0
         h10v30h50
         v10H10v30h100V0"></path></code>

Bien sûr, nous avons maintenant trouvé la solution minimale absolue parce que nous avons réduit à 48 octets, non? ! D'accord……

Coupage numérique (-4b, 44b au total)

Si vous êtes un peu flexible avec la taille, nous pouvons également optimiser les modèles SVG. Nous avons utilisé une largeur de brique de 100 pixels, mais cela prend trois octets. Le changer en 90 signifie que chaque fois que nous devons l'écrire, il sera réduit d'un octet. Encore une fois, nous avons utilisé un écart de 10 pixels - mais si nous le passons à 8, nous enregistrons un octet à chaque fois que nous apparaissons.

<code><path d="M0 0v30h45V0
         h8v30h45
         v8H8v30h90V0"></path></code>

Bien sûr, cela signifie également que nous devons ajuster la taille du motif en conséquence. Voici le dernier code de modèle SVG optimisé:

 <code><pattern height="76" patternunits="userSpaceOnUse" width="98"><path d="M0 0v30h45V0h8v30h45v8H8v30h90V0"></path></pattern></code>

La deuxième ligne de l'extrait de code ci-dessus (excluant l'indentation) est de 44 octets . Nous avons atteint ici de 197 octets à six itérations. Il s'agit d'une énorme réduction de taille de 77,7% !

Cependant, je me demande… est-ce vraiment la plus petite taille? Avons-nous examiné toutes les façons possibles d'optimiser les modèles SVG?

Je vous invite à essayer davantage ce code et j'essaie même d'utiliser une alternative pour optimiser votre modèle SVG. J'aimerais voir si nous pouvons utiliser la sagesse des masses pour trouver le véritable minimum mondial!

Plus d'informations sur la création et l'optimisation des modèles SVG

Si vous souhaitez en savoir plus sur la création et l'optimisation des modèles SVG, lisez mon article sur la création de modèles à l'aide de filtres SVG. Ou, si vous souhaitez consulter une galerie de plus de 60 modèles, vous pouvez consulter la collection Petitepatterns Codepen. Enfin, vous êtes invités à regarder mon tutoriel sur YouTube pour vous aider à mieux comprendre les modèles SVG.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!