Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

HTML5 - Des images vectorielles avec SVG

Par Mathieu ROSSETTO Publié le 15/05/2019 à 13:12:56 Noter cet article:
(0 votes)
En attente de relecture par le comité de lecture

Introduction

SVG est un format d'image vectoriel. Cela veut dire que l'on ne compte pas l'unité élémentaire de l'image comme étant le pixel mais comme étant des vecteurs. Un vecteur est une ligne qui part de A et va vers B qui se définit par une longueur, une direction et un sens.

La balise HTML svg permet de définir une image vectorielle à l'aide de balises HTML et de chemins vectoriels.

Voici un exemple d'une image vectorielle.

La particularité, niveau informatique, des images vectorielles, est que, lorsqu'on zoom, même beaucoup, l'image reste nette, puisqu'elle ne dépend plus du nombre de pixels alloués à cette dernière.

Définir un SVG

La balise qui permet de créer une image vectorielle en HTML5 est la suivante:

			<svg></svg>
		

On peut l'insérer n'importe où dans le DOM HTML, entre les différentes balises body.

			<body></body>
		

Le rectangle

A l'intérieur des balises svg, on peut y déssiner différentes formes, notament le rectangle. Sa balise est rect. Il faut lui préiser dans l'ordre les attributs suivants: x, y, width and height qui sont respectivement la position en X et en Y du coin supérieur gauche du rectangle sur l'écran en pixels, suivis de la largeur et de la hauteur du rectangle.

Sa syntaxe est la suivante:

			<svg><rect x="25px" y="25px" width="480px" height="272px"/></svg>
		

L'ellipse

Une ellipse est comme un cercle qui n'a pas forcément le même rayon en x et en y. Si x = y, alors il s'agit vraiment d'un cercle

Sa syntaxe est la suivante:

			<svg><circle cx="25px" cy="25px" r="10px"/></svg>
		

Il faut préciser les coordinnées en x et en y du centre du cercle, puis le rayon du cercle.

La ligne

Pour dessiner une ligne dans svg, il faut créer un attribut line et lui préciser les coordonnées en x et en y de départ et d'arrivée.

Sa syntaxe est la suivante:

			<svg><line x1="25px" x2="25px" y1="10px" y2="10px" stroke="black" stroke-width="2"/></svg>
		

Vous pouvez lui préciser la largeur de la ligne avec stroke-width et la couleur de coloration de la ligne, avec stroke.

Les chemins

Vous pouvez également définir des formes personnalisés dans votre svg. pour cela, il va falloir préciser différents chemins. Avec M, on déplace le craton aux coordonnées et et y. La syntaxe est la suivante:

			<svg><path d="M 20,20"/></svg>
		

Pour dessiner une ligne jusqu'à un point précis, on utilise la syntaxe "Line To" qui veut dire jusqu'à où on doit lever le crayon.

Sa syntaxe est L, suivi des coordonnées en X et en Y du point d'arrivée de la ligne.

			<svg><path d="M 20,20 L 30,30" stroke="red"
  stroke-width="3"/></svg>
		

Pour faire un arc elliptique, c'est un petit peu plus complexe, voici les différents paramètres à lui préciser:

A, RayonX, RayonX, Rotation(en degrés), LargeArcFlag, SweepFlag, et pour finir, le point d'arrivée de l'arc elliptique.

Voici une explication plus explicite de chaque paramètre à mettre juste après A:

Les 2 premiers paramètres sont la longueur eu rayon en X, et la longueur du rayon en Y. Si ces 2 valeurs sont égales, alors c'est un arc de cercle (et pas juste un arc elliptique)

Ensuite, vient le 3ème paramètre qui est celui de la rotation. Elle d'exprime en degrés.

Puis, on indique si on veut dessiner l'arc le plus petit possible (0) ou le plus grand possible (1).

Ensuite, on décide si on veut dessiner l'arc elliptique dans le sens horaire (1) ou dans le sens anti horaire (0).

Pour finir, on indique les coordonnées du point d'arrivée de l'arc elliptique en X et en Y.

Voici la syntaxe complète:

			<svg><path d="M 20,20 A 10,10 0 0 1 100,100"/></svg>
		

Les logiciels

Vous pouvez également créer des images vectorielles avec un logiciel notoire de la suite d'Abode: Adobe Illustrator. Il intègre une multitude d'outils pour travailler l'image. De plus, il permet d'exporter directement en SVG le résulat final.

Adobe Illustrator est disponible sur Windows et sur OS X.

Lien vers le site officiel: https://www.adobe.com/fr/products/illustrator.html

Des alternatives à Illustrator existent. Certains logiciels sont même open source. On peut parler de InkSpace, de GIMP, de SVG Edit, Karbon, OpenOffice Draw, etc.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels