10 - Plus de SVG

Nous traiterons ici d'autres objets SVG, principalement les objets à base de lignes, droites ou courbes.

Nous pourrons les utiliser pour afficher des courbes et les utiliser pour faire des animations :

Sans la courbe, du moins en la cachant :

1- Les lignes brisées avec la balise polyline

Qu'est-ce qu'une ligne brisée ? Une figure géométrique formée d’une suite de segments de droites placés les uns à la suite des autres.

On parle également d'une ligne polygonale.

Exemple :

Pour créer des lignes brisées, il faut utiliser la balise <polyline>.

On définit dans cette balise les coordonnées x,y des points successifs. Ainsi, si on veut une ligne commençant au point M₁(0,0), passant au point M₂(50,0), au point M₃(50,100) puis au point M₄(100,75) comme sur l'exemple juste au dessus, on écrira :

<polyline points="0,0,50,0,50,100,100,75" ...

Comme pour les lignes simples, on peut définir stroke ...

Nouveau point : on peut définir la couleur de remplissage avec fill qu'on peut définir avec une couleur qui remplira alors la forme créée en reliant les différents points. Le programme reliera alors le premier point au dernier.

Pour annuler cette possibilité, il faut écrire fill="none".

Voici le code permettant de tracer la ligne brisée ci-dessous :

Voici le code permettant de tracer la ligne brisée ci-dessous :

01° Réaliser le schéma ci-dessous qui définit une ligne brisée passant par (0,0), (200,0), (300,50) et (400,100). La seconde droite est tracée entre (200,0) et (200,100).

02° Réaliser maintenant le schéma ci-dessous qui représente une lentille.

2- Les polygones avec la balise polygon

Qu'est-ce qu'un polygone ? En géométrie euclidienne, un polygone est une figure géométrique plane composée d'une ligne brisée fermée sur elle-même.

Dit comme ça, ça parait compliqué mais non. Les exemples courants sont le carré, le triangle, le rectangle, l'hexagone ... Voilà pour les cas simples.

Pour cela, nous allons utiliser la balise polygon. On donnera comme pour polyline la suite des coordonnées x,y successives.

Et si on veut remplir la forme, il faut utiliser fill :

On notera qu'un polygone peut être croisé, c'est à dire que ses segments peuvent s'entrecouper.

On peut ainsi créer une belle étoile :

Mais on peut aussi demander de ne remplir qu'une zone sur 2 avec fill-rule="evenodd".

On notera que par défaut, fill-rule vaut "nonzero". Ainsi, on aura pu utiliser ceci pour créer l'étoile bleue :

Si on veut une étoile rouge sans trait, il suffit de ne pas donner d'informations sur stroke :

03° Dessiner des dessins proches des exemples ci-dessous :

Prochaine activité en SVG : les animations.

3- Les chemins en ligne droite à la carte avec la balise path

On peut déjà dessiner beaucoup de choses avec les balises vues jusqu'à présent. Mais il manque néanmoins au moins les lignes courbes. L'outil lié à Path est l'un des meilleurs qui soit pour dessiner en HTML+SVG : on peut dessiner n'importe quoi ou presque. D'ailleurs, ce n'est pas compliqué : lorsque vous avez utilisé les balises précédentes, le programme convertit votre demande en path !

Le principe est simple : on explique ce qu'on veut faire avec une lettre et on définit clairement le chemin(path) à suivre avec des chiffres.

Vous allez en gros devoir expliquer à l'ordinateur tout ce qu'il va devoir faire à travers un attribut nommé path d, certainement pour path draw. Tout. Commençons :

3.1 - La commande M et m : DEPLACEMENT DU CRAYON et la commande Z

Il faut d'abord lui dire de prendre son crayon et de le placer quelque part. C'est le but de cette instruction :

Ainsi <path d="M 0 50 ... Z" /> veut dire :

• Avec M 0 50 : Place le crayon en x=0 et y=50
• Avec Z : On ferme la courbe sur elle-même : on relie le point final au point initial.

Voilà pour les instructions de base : comment commencer et comment finir.

3.2 - La commande L majuscule et l minuscule : LIGNE DROITE

Si vous voulez dessiner des lignes droites, il faut utiliser l'instruction L suivi des coordonnées de destination de la ligne.

Si vous voulez que le trait apparaise, n'oubliez pas de définir une épaisseur de stroke.

Exemple 1 : On place le crayon en (0;100) et on trace une droite vers (100;100) puis (200;0) :

On voit qu'on a les attributs définis par défaut à fill="black".

Exemple 2 : Idem mais en définissant fill à none et en mettant stroke à black (de base d'épaisseur est définie à stroke-width="1").

Exemple 3 : On veut créer une ligne brisée en forme de dents de scie.

Bon, c'est néanmoins assez génant de devoir donner les positions absolues. Si seulement on pouvait lui d'avancer en x d'autant de pixels et pareil en y...

Ca tombe bien : c'est le principe de la commande l minuscule : on ne donne pas les coordonnées à atteindre mais le déplacement qu'on nommera dx et dy à faire.

Si la valeur de dx est positive : on part à droite. Si la valeur de dx est négative, on part à gauche.

Si la valeur de dy est positive : on descend. Si la valeur de dy est négative, on remonte.

On nomme ceci un déplacement relatif, par opposition au déplacement absolu.

Retournons à l'exemple de la scie :

Exemple 4 : On veut créer une ligne brisée en forme de dents de scie.

Du coup, c'est plus facile à faire : il suffit de faire un déplacement de +50 en x et d'alterner des déplacements de +100 et -100 en y.

04° A vous de réaliser ceci :

Pour la correction : faire un clic droit pour voir le code source de la page ou utiliser l'inspecteur Web.

3.3 - La commande V majuscule et v minuscule : LIGNE DROITE VERTICALE
3.3 - La commande H majuscule et h minuscule : LIGNE DROITE HORIZONTALE

Le dessin précédent peut se coder ainsi :

On remarquera qu'on alterne les mouvements verticaux ou horizontaux et que donc on donne beaucoup de valeur 0. On peut faire mieux avec ceci :

Nous allons utiliser les instructions h et v pour dire de combien on veut bouger en x OU y !

On peut même faire plus clair en supprimant les espaces entre l'instruction et sa valeur :

C'est tout de suite plus simple. Attention, si vous voulez bouger à la fois en x et y, il faut utiliser L ou l. H et V ne s'utilisent que pour les mouvements parfaitement horizontaux ou parfaitement verticaux.

05° A vous de réaliser ceci en modifiant le code précédent ::

Dernier exercice : nous pouvez utiliser l'instruction M(Move) pour déplacer le crayon après avoir fini le dessin précédent. Et comme le code est en coordonnées relatives, on pourra redessiner le même dessin, ailleurs.

06° A vous de réaliser ceci en modifiant le code précédent :

Pour la correction, il suffit de penser au code source.

4- Les courbes à la carte avec la balise path et l'instruction c (pour cubique)

4.1 Courbe de Bézier avec l'instruction C majuscule

Les courbes sont un peu plus compliquées à comprendre mais à peine. Et puis, c'est tellement joli que ça vaut le coup d'y passer un peu de temps. Surtout qu'on pourra utiliser ensuite nos courbes pour déplacer des objets lors de la partie animation. Allez, on s'accroche.

Pour tracer la courbe, on a besoin de (dans l'ordre du spectre du domaine visible):

• Du point initial (en rouge): il n'est en réalité pas donné, c'est la position du crayon juste avant l'instruction.
• Du premier point de Bézier (en orange) qui permet de tracer la tangente à l'origine : plus il est lointain, plus la courbe sera profonde.
• Du second point de Bézier (en vert) qui permet de tracer la tangente sur le point final : plus il est lointain, plus la courbe sera profonde.
• Du point final(en bleu).

Voici quelques exemples pour comprendre l'influence des deux points de Bézier :

Exemple 1 : On prendra

• Point initial en 0 0.
• Point de Bezier intial en 0 300.
• Point de Bezier final en 200 300.
• Point final en 200 0.

Exemple 2 : On remonte un peu les points de Bézier en y :

• Point initial en 0 0.
• Point de Bezier intial en 0 200.
• Point de Bezier final en 200 200.
• Point final en 200 0.

Exemple 3 : On remonte encore en y :

• Point initial en 0 0.
• Point de Bezier intial en 0 100.
• Point de Bezier final en 200 100.
• Point final en 200 0.

Exemple 4 : On augmente en x la valeur du premier point de Bézier

• Point initial en 0 0.
• Point de Bezier intial en 100 300.
• Point de Bezier final en 200 300.
• Point final en 200 0.

Exemple 5 : Idem jusqu'à confondre les deux points de Bézier au même endroit

• Point initial en 0 0.
• Point de Bezier intial en 200 300.
• Point de Bezier final en 200 300.
• Point final en 200 0.

Exemple 6 : On dépasse même le second point de Bézier

• Point initial en 0 0.
• Point de Bezier intial en 300 300.
• Point de Bezier final en 200 300.
• Point final en 200 0.

Comme vous le voyez, on finit même par faire une belle boucle. Le point de départ et le point d'arrivée sans des attaches et la courbe est obligée de rester proche des deux tangentes. Et lorsqu'on force le trait, on en arrive à ce cas de figure.

07° A vous de réaliser ceci en modifiant le code précédent :

• Point initial en 0 50.
• Point de Bezier intial en 0 0.
• Point de Bezier final en 200 50.
• Point final en 200 100.

08° Ou ça :

09° Une courbe où les deux tangentes extrêmes sont orthogonales

4.2 Courbe de Bézier avec l'instruction C minuscule

Le principe est le même sauf qu'on donne le déplacement dx et dy à faire pour atteindre le prochain point. Il ne s'agit plus des coordonnées absolues.

Exemple 7 : Reprenons l'exemple 3 et traitons le avec l'instruction C et l'instruction c :

Exemple 8 : Refaisons la même chose mais en décalant le point d'origine en (50;50), j'ai placé un point en (0;0) pour qu'on puisse voir facilement le coin supérieur gauche :

10° Refaire les dessins ci-dessous à l'aide de l'instruction c : (pensez à utiliser Z)

4.3 Application : les lentilles

Imaginons que nous désirions faire un cours sur l'optique géométrique. Nous allons devoir tracer des rayons et placer des lentilles un peu partout. Les dessiner à la main risque d'être long et répétitif. Autant passer par le SVG.

Cette partie va vous permettre d'utiliser les notions vues ci-dessus avec les instructions M, Z, v, h et c.

Commençons par ce code SVG qui permet de tracer une lentille divergente :

Et voici le code :

Comme vous le voyez, on mélange les instructions M, h, c et Z.

11° A vous d'agir :

12° Idem :

Passons aux lentilles convergentes :

Et voici le code dont la seule modification par rapport au code initial des divergentes est que le -20 se transforme en +20. Merveilleux non ?

13° A vous d'agir :

14° Idem (voir plus bas pour obtenir une courbe plus proche du modèle standard) :

15° Ou encore :

Pour finir, si vous voulez que les extrémités des lentilles soient plus abruptes, il suffit de placer les points de Bézier un peu plus vers le centre.

Obtenue avec le code :

5- Les courbes à la carte avec la balise path et l'instruction s

Il existe une instruction qui permet de créer facilement certaines courbes complexes car composées de plusieurs courbes de Bézier qui se suivent.

Voici un exemple avec deux courbes succesives :

• Point initial en 0 200.
• Point de Bezier intial en 0 0.
• Point de Bezier final en 100 200.
• Point final en 200 200.

• Point initial en 200 200.
• Point de Bezier intial en 300 200.
• Point de Bezier final en 400 100.
• Point final en 400 200.

Voici le code avec deux instructions C :

Si vous regardez bien, vous pouvez voir que :

• Le point finale de la première courbe est le point de départ de la seconde.
• Le premier point de Bézier de la seconde est symétrique de deuxième point de Bézier de la première par rapport au point final de la première courbe.

Et il existe justement une instruction pour construire ces courbes ayant ces deux propriétés : l'instruction S en coordonnées absolues et s en coordonnées "relatives".

Avec l'instruction S (ou s), on ne donne que les coordonnées du second point de Bézier et du point final.

On obtient cette image (identique à la première au dessus) avec :

Comme vous le voyez, on n'a pas besoin de donner le premier point de Bézier de la seconde courbe. Cela permet d'obtenir une belle jonction symétrique. D'où le s de la balise.

Voici un autre exemple : ici les deux points de Bézier de la première courbe sont au même endroit : x = 100 ; y = 0, le point vert en haut à droite.

Avec une balise s, le point initial est au même endroit que le point final de la courbe précédente. De la même façon, inutile de donner les coordonnées du premier point de Bézier : il est calculé par symétrie. Voir le graphique ci-dessous.

16° Créer une courbe C et rajouter des courbes S qui s'enchainent à la suite.

6- Les courbes simples avec la balise path et l'instruction Q (quadratique)

Les courbes Q et S permettent de faire plein de choses mais leur utilisation est parfois un peu compliqué non ? Si on veut faire des courbes simples, sans trop de points d'inflexion étranges, on peut utiliser les courbes quadratiques qui ne nécessitent que trois points : le point de départ, le point d'inflexion et le point final.

Le code précédent (avec les deux points au même endroit est justement caractéristique : inutilement compliqué, il utilise le mauvais outil.

Voyons un premier exemple :

• Point initial en 0 100.
• Point d'inflexion en 100 0.
• Point final en 200 100.

Le code a utilisé sera alors :

17° Utiliser le code pour voir ce qui se passe si on abaisse le point d'inflexion (par exemple en y=50) :

18° Décaler le point d'inflexion vers la gauche, par exemple en x=30 y=0.

Comme vous le voyez, le point d'inflexion déforme la courbe en l'attirant vers lui, sans qu'elle ne le touche.

Si les deux point fixes de départ et d'arrivée ont la même hauteur, la courbe s'infléchit à une distance située à la moitié de celle avec le point d'inflexion.

Voyons ce qui se passe si on abaisse le point final par exemple :

7- Les courbes simples avec la balise path et l'instruction T

Tout comme S avec l'instruction C, il existe une instruction pour poursuivre une courbe Q. C'est l'instruction T.

Son fonctionnement n'a rien de surprenant : il calcule le point d'inflexion en cherchant le syméytrique du point d'inflexion précédent par rapport au point final de la courbe précédente. Les seules informations à fournir sont les coordonnées du point final de la nouvelle courbe.

Exemple :

19° Rajouter quelques instructions T pour obtenir les deux images ci-dessous :

Poursuite de la courbe précédente :

Rapetissement du motif au fur et à mesure :

8- Les autres instructions

Nous voici arriver en fin d'activité sur la balise Path notamment. Pourtant il reste encore beaucoup de choses à voir. Mais il faudra le voir par vous même. Citons les arcs ou les flèches situées sur les schémas.

Deux sites pour aller plus loin (ce ne sont pas les seuls, une recherche Google devrait vous satisfaire assez rapidement :

• Je vous conseille l'excellent site svgground : tout sur SVG, en français.
• En anglais, vous trouverez une bonne documentation sur Mozilla Developer Network, MDN.

Les prochaines activités SVG parleront des animations et de la gestion des dessins via le CSS. En effet, pour l'instant nous avons noté beaucoup de paramètres des images en dur, directement dans le HTML. Si on veut modifier les couleurs de notre site, il va falloir toucher à toutes les couleurs de nos images SVG pour que ça ne pique pas les yeux. C'est dommage. Nous aurions pu gérer tout cela dans un fichier CSS unique !

La prochaine activité parlera elle de la création d'interface positionnée au pixel près. C'est parfois important.