Comment simplifier le code SVG en utilisant des formes de base

Il existe de nombreuses façons de gérer les icônes, mais la meilleure approche inclut toujours SVG, qu'elle soit implémentée en ligne ou comme lien vers un fichier image. En effet, ils sont «dessinés» dans le code, ce qui les rend flexibles, adaptables et évolutifs dans n'importe quel environnement.

Cependant, lors de l'utilisation de SVG, il est toujours possible d'inclure beaucoup de code inutile . Dans certains cas, le code pour SVG incliné peut être si long que le document défile plus longtemps et est inconfortable à utiliser, et oui, un peu plus lourd qu'il ne doit l'être.

Nous pouvons utiliser<use></use> Les éléments réutilisent les blocs de code ou appliquent des variables natives pour gérer nos styles SVG en un seul endroit. Ou, si nous travaillons dans un environnement côté serveur, nous pouvons toujours ajouter du PHP (ou similaire) pour extraire le contenu du fichier SVG au lieu de le mettre directement.

Tout cela est bon, mais ne serait-ce pas bien si nous pouvions résoudre ce problème au niveau du fichier au lieu de recourir à une approche basée sur le code? Je veux me concentrer sur une perspective différente : comment faire le même graphique avec moins de code en utilisant des formes de base . De cette façon, nous pouvons obtenir les avantages des icônes plus petites, plus contrôlables et sémantiques du projet sans sacrifier la qualité ni les changements visuels. Je vais couvrir différents exemples, explorer le code pour les icônes communes et comment les repeindre en utilisant certaines des formes SVG les plus simples que nous puissions faire.

Voici les icônes avec lesquelles nous traiterons:

Examinons les formes de base que nous pouvons utiliser pour faire de ces icônes qui gardent le code petit et simple.

Shh! Voici une liste plus longue des icônes simples que j'ai créées sur holasvg.com! Après avoir lu cet article, vous saurez comment les modifier et les faire.

utiliser<line></line> Élément icône de fermeture simplifiée

Voici le code de l'icône "Close" ou "Cross" téléchargée sur flaticon.com et construite par Pixel-Perfect:

Dans cet exemple, tout se passe<path></path> À l'intérieur, il existe de nombreuses commandes et paramètres dans l'attribut de données (D). Ce que fait ce SVG, c'est suivre la forme de ses limites.

Si vous connaissez Illustrator, cela équivaut à dessiner deux lignes distinctes, à les convertir en formes, puis à combiner les deux avec un chercheur de chemin pour créer une forme composite.

<path></path> Les éléments nous permettent de dessiner des formes complexes, mais dans ce cas, nous pouvons créer la même figure avec deux lignes tout en maintenant la même apparence:

<code><svg height="50" overflow="visible" stroke="black" stroke-linecap="round" stroke-width="10" viewbox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="50" y1="0" y2="50"></line>
<line x1="50" x2="0" y1="0" y2="50"></line></svg></code>

Nous définissons d'abord une Viewbox, de 0,0 à 50,50. Vous pouvez choisir n'importe quelle taille que vous aimez; Le SVG évoluera toujours bien sur n'importe quelle largeur et hauteur que vous définissez. Pour simplifier les opérations, dans ce cas, j'ai également défini 50 unités de largeur et de hauteur en ligne, ce qui évite les calculs supplémentaires dans le dessin.

Pour utiliser<line></line> Élément, nous devons déclarer les coordonnées du premier point de la ligne et les coordonnées du dernier point. Dans cet exemple, nous commençons par x = 0 y = 0 et nous terminons avec x = 50 y = 50.

Voici à quoi ressemble le code:

<code><line x2="50" y2="50"></line></code>

La deuxième ligne commencera par x = 50 y = 0 et se terminera par x = 0 y = 50:

<code><line x1="50" y2="50"></line></code>

Les traits SVG n'ont pas de couleur par défaut - c'est pourquoi nous ajoutons des valeurs noires à l'attribut TRAK. Nous fournissons également 10 unités de largeur pour la propriété de largeur de course et définissons le tram-linecap sur la valeur du cercle pour copier les coins arrondis de la conception d'origine. Ces propriétés sont ajoutées directement à<svg></svg> Dans la balise, les deux lignes les hériteront donc.

Étant donné que la course est de 10 unités plus grande que son unité de taille 1 par défaut, la Viewbox peut recadrer la ligne. Nous pouvons déplacer les unités du point 10 dans la Viewbox, ou ajouter Overflow = Visible au style.

Des valeurs égales à 0 peuvent être supprimées car 0 est la valeur par défaut. Cela signifie que deux lignes se retrouvent avec seulement deux très petites lignes de code:

<code><line x2="50" y2="50"></line><line x1="50" y2="50"></line></code>

Juste à côté de<path></path> Passer à<line></line> , Nous créons non seulement un fichier SVG plus petit, mais créons également un bloc de code plus sémantique et contrôlable, ce qui facilite toute maintenance future. L'effet visuel est exactement le même que l'image d'origine.

Même croix, codes différents.

utiliser<circle></circle> et<path></path> Icône d'horloge simplifiée de l'élément

J'ai obtenu cet exemple d'icône d'horloge de Barracuda dans le projet de nom:

Cette forme est également utilisée<path></path> Dessinez, mais nous avons également de nombreuses directives d'espace de noms et de XML liées à la licence logicielle et de fichier utilisée, que nous pouvons supprimer sans affecter SVG. Pouvez-vous dire quel éditeur d'illustration utiliser pour créer l'icône?

Recréons cela à partir de zéro à l'aide d'un cercle et d'un chemin avec des commandes plus simples. Encore une fois, nous devons commencer par une boîte de vue, cette fois de 0,0 à 100100, et la largeur et la hauteur correspondent à ces unités.

<code><svg fill="none" height="100" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" viewbox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40"></circle><path d="M50 25V50 H75"></path></svg></code>

nous allons<svg></svg> Le style de l'étiquette reste le même que l'icône précédente. Remplissez les défauts par défaut, nous devons donc lui attribuer explicitement une valeur Aucune pour le supprimer. Sinon, le cercle aura un remplissage noir pur, obstruant d'autres formes.

Pour dessiner<circle></circle> , nous devons indiquer le point central où le rayon sera situé. Nous pouvons le faire avec CX (Centre X) et Cy (centre Y). Alors R (Radius) déclarera à quel point notre cercle est grand. Dans cet exemple, le rayon est légèrement plus petit que la boîte de vue, il ne sera donc pas recadré lorsque la largeur de course est de 10 unités.

Que se passe-t-il avec toutes ces lettres? Consultez le guide d'illustration de Chris Coyier pour une introduction à la grammaire SVG.

Nous pouvons utiliser le pointeur de l'horloge<path></path> , car il a des commandes de dessin très utiles et simples. Dans d (données), nous devons commencer par la commande m (déplacer vers) suivie des coordonnées que nous commencerons à dessiner, dans ce cas 50,25 (près du centre supérieur du cercle).

Après la commande V (verticale), nous n'avons besoin que d'une seule valeur, car nous ne pouvons que monter ou descendre en utilisant des nombres négatifs ou positifs. Un nombre positif se déplacera vers le bas. Il en va de même pour H (niveau), suivi d'un nombre positif 75, qui sera dessiné vers la droite. Toutes les commandes sont capitalisées, donc le nombre que nous choisissons sera les points de la grille. Si nous décidons d'utiliser des lettres minuscules (commandes relatives), le nombre sera le nombre d'unités que nous déplaçons dans une direction, pas le point absolu du système de coordonnées.

Même horloge, différents codes.

utiliser<rect></rect> et<polyline></polyline> Icône d'enveloppe simplifiée de l'élément

J'ai dessiné l'icône de l'enveloppe dans Illustrator sans étendre la forme d'origine. Voici le code obtenu à partir de l'exportation:

Illustrator offre quelques options SVG pour l'exportation des graphiques. J'ai sélectionné "STYLE Élément" dans le menu déroulant "CSS Properties" afin que je puisse avoir une balise avec la catégorie que je pourrais vouloir passer dans le fichier CSS. Bien sûr, il existe de nombreuses façons d'appliquer les styles SVG.

Nous avons déjà des formes de base dans ce code! Je n'ai pas choisi l'option "forme à chemin" dans Illustrator, qui aide beaucoup ici. Nous pouvons l'optimiser davantage en utilisant SVGOMG pour supprimer les commentaires, les directives XML et les données inutiles telles que les éléments vides. Nous pouvons supprimer manuellement des extras supplémentaires à partir de là si nécessaire.

Nous avons déjà quelque chose de plus simple:

<code><svg version="1.1" viewbox="0 0 310 190" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0">
 .St0 {remplissage: Aucun; AVC: # 000; AVC-largeur: 10; AVC-Linecap: Round; AVC-Linejoin: Round; AVC-mitrerimit: 10}
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

Nous pouvons supprimer plus de contenu sans affecter l'apparence visuelle de l'enveloppe, notamment:

• version = "1.1" (déprécié depuis SVG 2)
• (Cela n'a pas de sens ou de but)
• x = "0" (c'est une valeur par défaut)
• y = "0" (c'est une valeur par défaut)
• XML: Space = "Preserve" (déprécié depuis SVG 2)

<code><svg viewbox="0 0 310 190" xmlns="http://www.w3.org/2000/svg">
 .St0 {remplissage: Aucun; AVC: # 000; AVC-largeur: 10; AVC-Linecap: Round; AVC-Linejoin: Round; AVC-mitrerimit: 10}
  
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

Si nous voulons vraiment être très agressifs, nous pouvons déplacer les styles CSS dans une feuille de style séparée.

<rect></rect> Besoin d'un point de départ où nous allons élargir la largeur et la hauteur à partir de là, utilisons donc x = "5" et y = "5" comme points d'angle supérieur gauche. De là, nous créerons un rectangle d'une largeur de 300 unités et une hauteur de 180 unités. Tout comme l'icône de l'horloge, nous utiliserons 5,5 comme point de départ car nous avons un accident vasculaire cérébral de 10 unités qui sera recadré si les coordonnées sont à 0,0.

<polyline></polyline> Similaire à<line></line> , mais cet élément définit toujours une forme fermée. Voici un exemple directement de MDN:

Vous vous souvenez des cercles que nous avons dessinés pour l'icône de l'horloge avant? Remplacez R (rayon) par Rx et Ry. Vous avez maintenant deux valeurs de rayon différentes. Voici un autre exemple de MDN:

Résumer

Nous avons couvert beaucoup de contenu en peu de temps! Alors que nous utilisons des exemples pour démontrer le processus d'optimisation de SVG, j'espère que vous obtiendrez ce qui suit de cet article:

• N'oubliez pas que la compression commence par la façon dont SVG est dessinée dans le logiciel d'illustration.
• Utilisez des outils disponibles tels que SVOMG pour compresser SVG.
• Supprimer manuellement les métadonnées inutiles si nécessaire.
• Remplacez les chemins complexes par des formes de base.
• <use></use> Est un excellent moyen de "en ligne des SVG et de créer votre propre bibliothèque d'icônes réutilisable.

Combien d'icônes peuvent être créées en combinant ces formes de base?

Je fais ma liste sur holasvg.com/icons, et je vais continuer à télécharger plus d'icônes et de fonctionnalités ici, maintenant vous savez comment les modifier facilement en modifiant quelques chiffres. Continuez, laissez-les être à vous!

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!