Maîtriser les arcs SVG —

Donc, J’adore dessiner des oiseaux avec du code. Inspiré par l’amour de mon frère pour l’observation des oiseaux, j’admire le caractère unique de leurs plumes, de leurs couleurs et de leurs sons. Mais ce que je remarque le plus, c’est la façon dont leurs corps se courbent et différents oiseaux peuvent avoir des courbes radicalement différentes ! J’ai donc pris mon amour pour le dessin avec des graphiques SVG et je l’ai utilisé pour expérimenter les formes d’oiseaux. Au fil du temps, j’ai suffisamment dessiné pour devenir incroyablement habile à travailler avec des formes d’arc.

Voici quelques-unes de mes récentes œuvres. Inspiré par les designs que j’ai découverts Dribblerj’ai créé mes versions avec du code. Vous pouvez parcourir le code de chacun sur mon CodeStylo.

Mais avant de nous lancer dans la création de courbes avec des arcs, faites une pause ici et consultez l’article récent de Myriam Frisano, « Exemples de codage SVG : recettes utiles pour écrire des vecteurs à la main.» C’est une excellente introduction à la syntaxe SVG et il vous donnera un contexte solide pour aborder les concepts que nous abordons ici en matière de maîtrise. Arcs SVG.

Un rafraîchissement rapide du SVG

Vous savez probablement que les SVG sont des illustrations nettes et évolutives à l’infini sans dégradation pixellisée – des vecteurs de victoire ! Ce que vous ne savez peut-être pas, c’est que peu de développeurs écrivent du code SVG. Pourquoi? Eh bien, la syntaxe semble compliquée et peu familière par rapport, disons, au HTML. Mais croyez-moi, une fois que vous l’avez décomposé, il est non seulement possible de coder manuellement du SVG, mais aussi très amusant.

Assurons-nous que vous êtes au courant du SVG viewBox parce que c’est un concept clé lorsqu’il s’agit de évolutif partie de *SVG. Nous utiliserons l’analogie d’un appareil photo, d’un objectif et d’une toile pour expliquer ce concept. Considérez la fenêtre de votre navigateur comme une caméra et le SVG viewBox comme l’objectif de la caméra se concentrant sur la peinture d’un oiseau que vous avez créé (le SVG). Imaginez la peinture sur une grande toile qui peut s’étendre bien au-delà de ce que l’appareil photo capture. Le viewBox définit quelle partie de ce canevas est visible à travers la caméra.

Disons que nous avons un élément SVG que nous dimensionnons 600px carré avec width et height attributs directement sur le <svg> élément.

<svg width="600px" height="600px">

Tournons notre attention vers viewBox attribut:

<svg width="600px" height="600px" viewBox="-300 -300 600 600">

Le viewBox L’attribut définit le système de coordonnées interne du SVG, avec quatre valeurs mappées aux x, y, largeur et hauteur du SVG dans cet ordre.

Voici comment cela se rapporte à notre analogie :

• Position et taille de la caméra
  Le -300, -300 représente la position du bord gauche et supérieur de l’objectif de la caméra. Entre-temps, 600 x 600 est comme la taille du cadre de la caméra, montrant une partie spécifique de cet espace.
• Taille de la toile inchangée
  Changer le x et y les valeurs ajustent l’endroit où la caméra pointe, et width et height déterminer la quantité de toile qu’elle encadre. Il ne redimensionne pas le canevas lui-même (l’élément SVG lui-même, qui reste à 600×600 pixels). Peu importe où la caméra est positionnée ou zoomée, la toile elle-même reste fixe.

Ainsi, lorsque vous ajustez le viewBox coordonnées, vous choisissez simplement une nouvelle zone du canevas sur laquelle vous concentrer sans redimensionner le canevas lui-même. Cela vous permet de contrôler la zone visible sans modifier les dimensions d’affichage réelles du SVG.

Vous disposez désormais du contexte dont vous avez besoin pour apprendre à travailler avec <path> éléments en SVG, c’est là que nous commençons à travailler avec les arcs !

Le <path> Élément

Nous avons un <svg> élément. Et nous observons le contenu de l’élément à travers la « lentille » d’un viewBox.

UN <path> nous permet de dessiner des formes. Nous avons d’autres éléments pour dessiner des formes, à savoir <circle>, <line>et <polygon> – mais imaginez être limité à des formes géométriques strictes en tant qu’artiste. C’est là que la coutume <path> L’élément entre en jeu. Il est utilisé pour dessiner des formes complexes qui ne peuvent pas être créées avec les formes de base. Pensez à <path> en tant que conteneur flexible qui vous permet de mélanger et de faire correspondre différentes commandes de dessin.

Avec un seul <path>vous pouvez combiner plusieurs commandes de dessin en un seul design fluide et élégant. Aujourd’hui, nous nous concentrons sur une commande de chemin très spécifique : arcs. En d’autres termes, nous dessinons des formes d’arc avec <path>.

Voici un exemple rapide et simple qui place un <path> à l’intérieur du <svg> exemple que nous avons vu plus tôt :

<svg width="600px" height="600px" viewBox="-300 -300 600 600">
  <path d="M 0 0 A 100 100 0 1 1 200 0" 
    fill="transparent"
    stroke="black"
    stroke-width="24"
  />
</svg>

Maintenant, je comprends. Regarder cette chaîne de chiffres pour la première fois, c’est comme regarder dans la Matrice, n’est-ce pas ? Mais une fois que vous aurez compris, vous verrez que les arcs ne sont pas aussi effrayants qu’ils le paraissent.

Décomposons le <path> dans cet exemple. Nous le détaillerons encore plus dans la section suivante, mais pour l’instant :

• M 0 0 déplace le chemin vers le centre du viewBox mais il ne « dessine » rien pour l’instant.
• A 100 100 0 1 1 200 0 trace un arc de rayon 100 dans les axes X et Y, se terminant à (200, 0).

Vous pouvez visualiser les positions des coordonnées en rouge résultant de différents M commandes dans la démo suivante :

Vous voyez ça ? Nous avons deux points le long de l’axe X qui sont relatifs au viewBoxau centre, et une ligne courbe les relie. Maintenant, sachez que les chiffres dans un M La commande définit les coordonnées et les nombres dans un A commande tracez une ligne le long des axes du SVG. Vous venez de dessiner une courbe en SVG !

Disséquer un arc

Nous pouvons zoomer sur M et A commandes encore plus loin pour mieux comprendre ce qui se passe.

<path d="M 0 0 A 100 100 0 1 1 200 0" />

Tout d’abord, nous travaillons avec un arc, ou plus précisément, un arc elliptiquequi est une ligne courbe. Nous savons qu’un cercle parfait n’est qu’un ellipse avec des rayons égaux dans les directions X et Y. Nous pouvons modifier la forme du cercle en lui attribuant des valeurs de rayon différentes et sans correspondance.

Voici ce que nous savons jusqu’à présent :

• M
  • 0: Coordonnez le long de l’axe X.
  • 0: Coordonnez le long de l’axe Y.
• A
  • 100: Valeur du rayon dans la direction X.
  • 100: Valeur du rayon dans la direction Y.
  • 200: Le point final de l’arc dans la direction X.
  • 0: L’extrémité de l’arc dans la direction Y.

Il y a trois valeurs dans le A commande que nous avons en quelque sorte ignorée. Ce sont comme des « commutateurs » dans le sens où ce sont des valeurs booléennes qui activent ou désactivent certaines choses concernant l’arc.

• 0: Fait pivoter l’arc le long de l’axe X.
• 1: Détermine s’il s’agit d’un « petit » arc (0) avec une envergure supérieure à 180° ou un arc « grand » (1) d’une envergure supérieure à 180°.
• 1: Définit si l’arc « balaye » dans le sens des aiguilles d’une montre ou dans le sens inverse des aiguilles d’une montre, où 0 est égal dans le sens des aiguilles d’une montre et 1 est égal dans le sens inverse des aiguilles d’une montre.

Si nous prenons ces informations et réécrivons le <path> avec ces définitions, alors cela commence à se clarifier :

<path d="
  M <x-coordinate> <y-coordinate> 
  A <radius-x> <radius-y> <rotation-x> <large-arc-flag> <sweep-flag> <endpoint-x> <endpoint-y>
" />

Peut-être pouvons-nous simplifier un peu cela en utilisant des abréviations :

<path d="
  M <x> <y> 
  A <rx> <ry> <rotation> <arc> <sweep> <ex> <ey>
" />

Prenons ces informations et commençons à jouer avec les valeurs pour voir comment elles se comportent.

Visualiser les possibilités

Encore une fois, si c’est le cas <path> nous commençons par :

<path d="M 0 0 A 100 100 0 1 1 200 0"/>

Ensuite, nous pouvons le manipuler de multiples façons. Mathématiquement parlant, vous pouvez créer un nombre infini d’arcs entre deux points quelconques en ajustant les paramètres. Voici quelques variantes d’un arc que nous obtenons lorsque tout ce que nous faisons est de modifier les extrémités de l’arc dans le X (<ex>) et Oui (<ey>) indications.

Ou contrôlons la largeur et la hauteur de l’arc en mettant à jour son rayon dans la direction X (<rx>) et la direction Y (<ry>). Si nous jouons avec le <rx> valeur, nous pouvons manipuler la hauteur de l’arc :

De même, nous pouvons manipuler la largeur de l’arc en mettant à jour le <ry> valeur:

Voyons ce qui se passe lorsque nous faisons pivoter l’arc le long de son axe X (<rotation>). Ce paramètre fait pivoter l’ellipse de l’arc autour de son centre. Cela n’affectera pas les cercles, mais cela changera la donne pour les ellipses.

Même avec un ensemble fixe d’extrémités et de rayons (<rx> et <ry>), et un angle de rotation donné, quatre arcs distincts peuvent les relier. C’est parce que nous avons le <arc> valeur d’indicateur qui peut être l’une des deux valeurs, ainsi que le <sweep> drapeau qui est également l’une des deux valeurs. Deux valeurs booléennes, chacune avec deux arguments, nous donnent quatre possibilités distinctes.

Et enfin, en ajustant le point final de l’arc le long du X (<ex>) et Oui (<ey>) les directions déplacent l’emplacement de l’arc sans modifier la forme globale.

Conclusion

Et voilà, les arcs SVG démystifiés ! Que vous manipuliez les rayons, la rotation ou la direction de l’arc, vous disposez désormais de tous les outils pour maîtriser ces belles courbes. Avec de la pratique, les arcs deviendront simplement un élément supplémentaire de votre boîte à outils SVG, qui vous donnera le pouvoir de créer des designs plus dynamiques et complexes en toute confiance.

Alors continuez à jouer, continuez à expérimenter, et bientôt vous plierez des arcs comme un pro, rendant vos SVG non seulement fonctionnels mais magnifiquement artistiques. Si vous avez apprécié cette plongée dans les arcs, lâchez un like ou partagez-la avec vos amis. Continuons à repousser les limites de ce que SVG peut faire !

(gg, ouais)