Des astuces SVG pour vous

J'ai été motivé par l'essentiel de Bytes #293 à propos du HTML. Leur motivation est venue de l'enquête State of HTML 2023 (et de l'argent... mais laissons la section sponsorisée du mailing).

Il semble que

Point d'entrée

Si vous n'êtes pas du tout familier avec ce genre de choses, je peux vous aider avec un tas de liens pour commencer. Après cela, rien ne changera mais vous en saurez plus sur le svg
¯_(ツ)_/¯

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction
• Tutoriel SVG de MDN : https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

Tl;DR

Les éléments SVG sont des éléments graphiques vectoriels. Cela peut être compris comme un ensemble de figures géométriques représentées par des caractères. Vous pouvez en créer un par exemple avec Adobe Illustrator ou Inkscape comme alternative gratuite.

Point de départ

D'après les réponses des gens, nous pouvons voir quelques tendances. Je n'en choisirai pas un en particulier mais j'essaierai de partager quelques connaissances sur ces sujets afin que vous puissiez trouver ici quelques trucs et astuces, partage d'expériences et autres connaissances communes autour de ce sujet.

Je vais ignorer le sujet des sprites SVG comme cet exemple. C'est un sujet distinct et n'est pas très lié à la balise svg. Je peux simplement convenir que vous pourriez encore leur trouver quelques cas d'utilisation rares.

Syntaxe du fichier

Un fichier SVG approprié doit être une représentation des figures géométriques mentionnées. Il est très simple de vérifier si notre icône est préparée dans le bon format par le concepteur ou le site Web où vous la prenez.

Mauvais exemple :

<svg ...><image link:href="data:image/png;base64 .../>

Syntaxe attendue :

<svg><g><path r=""/><circle /></g></svg>

Au cours de ma carrière, je me suis lancé dans ce domaine à plusieurs reprises. Cela vaut la peine de s’en souvenir. Cela se produit lorsque vous prenez des graphiques raster, que vous les importez dans un programme graphique vectoriel et que vous essayez de les exporter dans l'extension .svg. Cela ne convertit pas comme par magie votre image en graphique vectoriel.

Balises SVG notables

Je peux vous présenter un aide-mémoire pour la plupart des éléments svg génériques.

Tag	Description	Animated attributes
	used for grouping elements	-
	main tag for your actual icon. Avoid modifying the d="" attribute on your own ? It is possible but be careful with that. Grab a link with an explanation for each character group. To animate your path use animateMotion tag	-
	Basic rectangle shape in SVG. Simple as that	✅
	Simple as that. The line between two points. Don't mistake with the stroke attribute! It can also be used on the line tag.	✅
	You can think about it as an enhancement version of the g tag but it keeps the elements inside invisible for later use with, let's guess it... use tag	-
	Next basic shape. Be careful as the size is defined by radius and you position your circle with cx and cy attributes.	✅
	Let's call it a custom shape. They are connected straight lines where the last point connects to the first point.	✅
	Very similar to the previous one but with a notable difference. The last point doesn't need to be connected to the first point.	✅

Veuillez noter qu'il ne s'agit que de quelques éléments SVG sélectionnés. Je viens de décrire les plus courants. Il y en a beaucoup plus à votre disposition. Une liste complète peut être trouvée ici.

Dimensionnement et positionnement

Comme nous sommes maintenant familiers avec certaines des balises svg courantes, nous pouvons passer au paragraphe suivant consacré à la modification des paramètres de base de notre icône.

Disons que nous travaillons avec un jeune designer. Il/Elle ne sait pas encore vraiment comment préparer les choses pour le Web comme vous. En conséquence, vous obtenez parfois des tailles d'icône légèrement différentes avec un rembourrage coupé manquant sur les côtés.

good one	wrong one

Cas classique. Je sais que nous devrions avoir un appel rapide avec un designer et clarifier cela, mais nous voulons apprendre quelques notions de SVG ici. Nous ne faisons pas cela dans ce scénario. Nous pouvons le réparer nous-mêmes.

Du point de vue du code, tout est question d'attributs. Le fichier croisé SVG original ressemble à ceci :

<svg ...><image link:href="data:image/png;base64 .../>

Résultats en :

Presque ce que nous voulons ! Examinons plus en détail comment préserver le remplissage comme dans la première icône.

Nous avons 2 options. Nous pouvons conserver la même valeur viewBox ou ajuster chaque valeur de largeur, hauteur, x et y sur chaque balise imbriquée.

La première option semble simple et fonctionne plutôt bien pour nous, mais il pourrait y avoir un problème. Dans mon cas, j'avais cet étrange attribut de transformation sur ma balise de groupe.

<svg><g><path r=""/><circle /></g></svg>

Maintenant, la taille de notre icône est réglable. Veuillez noter qu'il s'agit de graphiques vectoriels afin que nous ne perdions pas la qualité des icônes après le redimensionnement.

Alors pourquoi viewBox est-il si important ?

C'est la clé lorsque nous voulons mettre correctement à l'échelle ou définir une certaine position pour notre icône. Il a 4 arguments viewBox="min-x min-y width height".

Par exemple, viewBox="0 0 100 100" signifie que le coin supérieur gauche est à (0, 0) et que la viewBox mesure 100 unités de largeur et 100 unités de hauteur.

Cela signifie que vous devez ajuster les attributs de votre icône x et y après avoir modifié viewBox car ils sont définis en fonction de leur valeur.

Gestion des couleurs et du remplissage

Différentes icônes permettent un remplissage différent. Bien sûr, cela peut être aussi simple que d'ajouter un style de couleur, mais c'est un type de code de niveau débutant.

Les vrais développeurs ajoutent fill-rule="evenodd" à l'élément principal et suppriment tous les autres attributs de remplissage manuel des balises ?

Vous vous demandez peut-être pourquoi.

Je fournirai la réponse la plus courte possible à cette question. Pour personnaliser librement les couleurs de nos icônes avec une seule ligne de code directement depuis notre IDE.

Comment est-ce possible, pourriez-vous demander.

Si vous avez affaire à une simple icône du système de conception de votre entreprise, vous ne devriez pouvoir importer qu'une seule icône. Des modifications ou des duplications de taille ou de couleur ne sont pas nécessaires.

Du point de vue du code, il vous suffit d'ajouter du remplissage sur l'élément svg comme vous le feriez normalement avec par exemple l'attribut color.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="93.582886"
   height="93.582893"
   viewBox="0 0 24.760471 24.760474"
   version="1.1"
  >



<p>This is our raw svg exported from Inkscape. There are a few other things to fix, bear with me so we can fix them.</p>

<p>We know that 200px image is our goal. Here we have some ugly width/height values on the main svg tag.</p>

<p>Simply:<br>
</p>

<pre class="brush:php;toolbar:false"><svg
-   width="93.582886"
+   width="200"
-   height="93.582893"
+   height="200"

Il existe un piège pour les valeurs paires et impaires qui s'applique lorsque vous dessinez des polygones ou des chemins. Il remplira uniquement l'intérieur des segments du chemin de croisement.

Envisagez d'analyser cet exemple au cas où vous auriez des difficultés avec celui-ci.

Donc, dans le cas de notre icône en forme de croix, cela donnera quelque chose comme ceci :

Optimisation

Avant de publier notre icône sur le Web (ou juste après l'avoir téléchargée depuis Figma), nous devons nous assurer qu'elle est correctement optimisée. Celui-ci est très important. J'ai attrapé et été attrapé bien trop de fois lors de la révision du code sur ce dernier kilomètre.

SVGO (ou SVGR pour React) en fait un processus très simple. Dans les coulisses, cela supprime principalement toutes les choses inutiles pour nous.

En général, c'est un outil incontournable. Soit vous souhaitez l'intégrer à votre bundler, soit l'utiliser depuis CLI. Il est prêt à être utilisé juste après l'installation car nous obtenons le préréglage par défaut configuré immédiatement.

Remarque : vous pouvez écraser le préréglage par défaut si vous le souhaitez vraiment. Vérifiez la configuration dans le README du projet et la liste des plugins dans la documentation

Résultat

Le code final de l'icône ressemble à ceci :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g fill-rule="evenodd"><path d= "M9 24h32v3H9z">



<p>Nous avons réduit la taille de 871 octets avec l'icône brute exportée depuis l'espace d'encre à seulement 322 octets.</p>

<h2>
  
  
  Douleur avec les animations
</h2>

<p>Le dernier sujet qui est doux-amer pour moi. Cela a également été introduit dans les réponses à l’enquête à plusieurs reprises. Je ne connais pas de meilleures façons de le faire, sauf en utilisant Lottie ou en animant manuellement des éléments SVG en CSS. La deuxième option est une torture absolue lorsque vous avez plus de 5 éléments à animer.</p>

<p>Bien sûr, c'est possible et nous pouvons le faire mais pour être honnête, il y a des choses plus intéressantes à faire ?</p>

<p>Supposons que vous soyez toujours curieux de savoir comment procéder. Je laisse ici un lien vers un excellent article. Cela devrait vous convaincre que cela demande de la patience et prend plus de 5 minutes. Je me demande si un robot IA peut vous aider ! Si oui, c'est peut-être un peu moins douloureux.</p>

<p>C'est tout pour l'instant.<br>
J'espère que vous avez retenu quelque chose de ce post et passez une bonne journée ?</p>


          

            
        

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!