SVG – Guide Complet

Introduction

Salut tout le monde! avant toute chose, je tiens à vous préciser qu’il serait vraiment préférable d’avoir une compréhension de base en HTML et XML pour pouvoir bien comprendre les SVG.

Definition

SVG est une recommandation du W3C (World Wide Web Consortium), C’est l’abréviation de “Scalable Vector Graphics”, ce qui veut dire en français graphiques vectoriels adaptables. Comme son nom l’indique, elle est utilisée pour définir des graphiques vectoriels au format XML pour le Web, cela signifie que ces graphiques peuvent être recherchés, indexés, scriptés et compressés. En tant que fichiers XML, Ces images peuvent être créées avec n’importe quel éditeur de texte, mais il est souvent plus commode de les créer avec un logiciel de dessin, comme Inkscape (logiciel libre et open source) . Les graphiques vectoriels ne perdent aucune qualité si elles sont agrandies ou redimensionnées. Chaque élément et chaque attribut dans les fichiers SVG peut être animé. SVG s’intègre avec d’autres normes W3C telles que DOM et XSL

Avantages

Les avantages des graphiques vectoriels adaptés par rapport aux autres formats d’images (comme JPEG et GIF) sont les suivants:

• Peuvent être créées et éditées avec n’importe quel éditeur de texte.
• Peuvent être recherchées, indexées, scénarisées et compressées.
• Sont évolutives.
• Peuvent être imprimées avec haute qualité à n’importe quelle résolution.
• Sont zoomables (et l’image peut être agrandie sans dégradation).

Leur principal concurrent est Flash. Le plus grand avantage que SVG ait sur Flash est la conformité à d’autres normes (par exemple XSL et le DOM). Flash s’appuie sur une technologie propriétaire qui n’est pas open source.

SVG en HTML

Intégrable Directement Dans Les pages HTML

Voici un exemple d’un simple graphique SVG:

See the Pen My first SVG by Med Mus (@MedMus) on CodePen.

Explication du code:

• Une image SVG commence par un élément <svg>.
• Les attributs width et height de l’élément <svg> définissent la largeur et la hauteur de l’image.
• L’élément <circle> est utilisé pour dessiner un cercle.
• Les attributs cx et cy définissent les coordonnées x et y du centre du cercle. Si cx et cy sont omis, le centre du cercle est réglé sur (0, 0).
• L’attribut r définit le rayon du cercle.
• Les attributs strock et strock-width controlent la façon dont le contour d’une forme apparaît. Nous définissons le contour du cercle à une “bordure” verte de 4px.
• L’attribut fill (de remplissage) se réfère à la couleur à l’intérieur du cercle. Nous définissons la couleur de remplissage en jaune

Remarque: Étant donné que SVG est écrit en XML, tous les éléments doivent être correctement fermés!

Formes

SVG possède des éléments de forme prédéfinis qui peuvent être utilisés par les développeurs:

• Rectangle <rect>
• Cercle <circle>
• Ellipse <ellipse>
• Ligne <line>
• Polyline <polyline>
• Polygone <polygon>
• Chemin <path>

Ci dessous je vais expliquer chaque élément, je vais commencer par l’élément <rect>

SVG Rectangle – <rect>

Exemple 1

L’élément <rect> est utilisé pour créer un rectangle ainsi que les variations de forme rectangulaire:

See the Pen SVG – Rect by Med Mus (@MedMus) on CodePen.

Explication du code:

• Les attributs width et height attributes  de l’élément <rect> définissent la hauteur et la largeur du rectangle.
• L’attribut style est utilisé pour définir les propriétés CSS pour le rectangle.
• La propriété fill (de remplissage) CSS définit la couleur de remplissage du rectangle.
• La propriété CSS stroke-width définit la largeur de la bordure du rectangle.
• La propriété CSS stroke définit la couleur de la bordure du rectangle.

Example 2

Regardons un autre exemple qui contient de nouveaux attributs:

See the Pen SVG-Rect (2) by Med Mus (@MedMus) on CodePen.

Explication du code:

• L’attribut x définit la position de gauche du rectangle (par exemple, x = “50” place le rectangle 50 px de la marge de gauche).
• L’attribut y définit la position supérieure du rectangle (par exemple y = “20” place le rectangle 20 px de la marge supérieure).
• La propriété CSS fill-opacity définit l’opacité de la couleur de remplissage (plage légale: 0 à 1).
• La propriété CSS trait-opacity définit l’opacité de la couleur du trait (plage légale: 0 à 1).

Example 3

Définissons l’opacité pour l’ensemble de l’élément:

See the Pen SVG-Rect (3) by Med Mus (@MedMus) on CodePen.

Explication du code:

• La propriété CSS opacity définit la valeur d’opacité pour l’ensemble de l’élément (plage légale: 0 à 1)

Example 4

Dernier exemple, créons un rectangle avec des coins arrondis:

See the Pen SVG-Rect (3) by Med Mus (@MedMus) on CodePen.

Explication du code:

• Les attributs rx et ry rondent les coins du rectangle

 SVG Cercle – <circle>

L’élément est utilisé pour créer un cercle:

See the Pen SVG-Circle by Med Mus (@MedMus) on CodePen.

Explication du code:

• Les attributs cx et cy définissent les coordonnées x et y du centre du cercle. Si cx et cy sont omis, le centre du cercle est réglé sur (0,0)
• L’attribut r définit le rayon du cercle

Ellipse – <ellipse>

L’élément <ellipse> est utilisé pour créer une ellipse.

Une ellipse est étroitement liée à un cercle. La différence est que l’ellipse a un rayon x et y qui diffère l’un de l’autre, tandis qu’un cercle a un rayon x et y égaux:

See the Pen SVG-Ellipse by Med Mus (@MedMus) on CodePen.

Explication du code:

• L’attribut cx définit la coordonnée x du centre de l’ellipse.
• L’attribut cy définit la coordonnée y du centre de l’ellipse.
• L’attribut rx définit le rayon horizontal.
• L’attribut ry définit le rayon vertical.

Exemple 2

L’exemple suivant crée trois ellipses les unes sur les autres:

See the Pen SVG-Ellipse (2) by Med Mus (@MedMus) on CodePen.

Exemple 3

L’exemple suivant combine deux ellipses (une jaune et une blanc):

See the Pen SVG-Ellipse (3) by Med Mus (@MedMus) on CodePen.

SVG Ligne  – <line>

L’élément <line> est utilisé pour créer une ligne:

See the Pen SVG-Ligne by Med Mus (@MedMus) on CodePen.

Explication du code:

• L’attribut x1 définit le début de la ligne sur l’axe des x.
• L’attribut y1 définit le début de la ligne sur l’axe des y.
• L’attribut x2 définit la fin de la ligne sur l’axe des x.
• L’attribut y2 définit la fin de la ligne sur l’axe des y.

Polygone – <polygon>

L’élément <polygon> est utilisé pour créer un graphique contenant au moins trois côtés.

Les polygones sont composés de lignes droites, et la forme est “fermée” (toutes les lignes se connectent).

Le polygone vient du grec. “Poly” signifie “plusieur” et “gon” signifie “angle”.

Exemple 1

L’exemple suivant crée un polygone à trois côtés:

See the Pen SVG-PolyGone by Med Mus (@MedMus) on CodePen.

Explication du code:

• L’attribut points définit les coordonnées x et y pour chaque coin du polygone.

Exemple 2

The following example creates a polygon with four sides:

See the Pen SVG-PolyGone (2) by Med Mus (@MedMus) on CodePen.

Exemple 3

Utilisez l’élément <polygon> pour créer une étoile:

See the Pen SVG-PolyGone (3) by Med Mus (@MedMus) on CodePen.

Exemple 4

Modifions la propriété fill-rule à “evenodd”:

See the Pen SVG-Polygone (4) by Med Mus (@MedMus) on CodePen.

Polyline -<polyline>

See the Pen SVG-Polyline by Med Mus (@MedMus) on CodePen.

Exemple 2

Un autre exemple avec seulement des droites:

See the Pen SVG-Polyline (2) by Med Mus (@MedMus) on CodePen.

Chemin -<path>

L’élément <path> est utilisé pour définir un chemin.

Les commandes suivantes sont disponibles pour les chemins des données:

• M = moveto (passer à)
• L = lineto (ligne vers)
• H = horizontal lineto (ligne horizontale vers)
• V = vertical lineto (ligne verticale vers)
• C = curveto (courbe vers)
• S = smooth curveto (courbe lisse vers)
• Q = quadratic Bézier curve (courbe quadratique Bézier)
• T = smooth quadratic Bézier curveto (Courbe Bézier quadratique lisse vers)
• A = elliptical Arc (arc elliptique)
• Z = closepath (chemin fermé)

Remarque: Toutes les commandes ci-dessus peuvent être exprimées aussi avec des lettres miniscules. Les lettres majuscules signifient absolument positionnés, les cas inférieurs signifient relativement positionnés.

Exemple 1

L’exemple ci-dessous définit un chemin qui commence à la position 150,0 avec une ligne à la position 75 200 puis à partir de là, une ligne à 225 200 et enfin la fermeture du chemin vers 150,0:

See the Pen SVG-Path by Med Mus (@MedMus) on CodePen.

Exemple 2
Les courbes de Bézier sont utilisées pour modéliser des courbes lisses qui peuvent être mises à l’échelle indéfiniment. Généralement, l’utilisateur sélectionne deux points d’extrémité et un ou deux points de contrôle. Une courbe de Bézier avec un point de contrôle s’appelle une courbe quadratique Bézier et le type avec deux points de contrôle s’appelle cubique.

L’exemple suivant crée une courbe quadratique de Bézier, où A et C sont les points de début et de fin, B est le point de contrôle:

See the Pen SVG-Path (2) by Med Mus (@MedMus) on CodePen.

Complexe? OUI!!!! En raison de la complexité impliquée dans le dessin des chemins, il est fortement recommandé d’utiliser un éditeur pour créer des graphiques complexes.

Texte – <text>

L’élément <text> est utilisé pour définir un texte.

Exemple 1

Écrivez un texte:

I love SVG!

See the Pen SGV-Text by Med Mus (@MedMus) on CodePen.

Exemple 2

Faites pivoter le texte:

See the Pen SVG-Text (2) by Med Mus (@MedMus) on CodePen.

Example 3

L’élément <text> peut être organisé dans n’importe quel nombre de sous-groupes avec l’élément <tspan>. Chaque élément <tspan> peut contenir différents formats et position.

Texte sur plusieurs lignes (avec l’élément <tspan>):

See the Pen SVG-Text (3) by Med Mus (@MedMus) on CodePen.

Exemple 4

Texte en tant que lien (avec l’élément):

See the Pen SVG-Text (4) by Med Mus (@MedMus) on CodePen.

Propriétés Stroke SVG

Les Graphiques vectoriels adaptables offrent une large gamme de propriétés de stroke (trait). Dans cette section, nous examinerons ce qui suit:

• stroke (trait)
• stroke-width (largeur du trait)
• stroke-line cap (trait-cap de ligne)
• stroke-dasharray

Toutes les propriétés de stroke peuvent être appliquées à n’importe quel type de lignes, de texte et de contours d’éléments comme un cercle.

Propriété stroke

La propriété de trait définit la couleur d’une ligne, d’un texte ou d’un contour d’un élément:

See the Pen Propriété SVG stroke by Med Mus (@MedMus) on CodePen.

Propriété de stroke-width

La propriété width-stroke définit l’épaisseur d’une ligne, d’un texte ou d’un contour d’un élément:

See the Pen Propriété de SVG stroke-width by Med Mus (@MedMus) on CodePen.

Propriété stroke-linecap

La propriété stroke-linecap définit différents types de terminaisons dans un chemin ouvert:

See the Pen Propriété SVG stroke-linecap by Med Mus (@MedMus) on CodePen.

Filtres

Les filtres SVG sont utilisés pour ajouter des effets spéciaux aux graphiques SVG.

Compatibilité

Éléments De Filtre

Dans les chapitres suivants, nous démontrerons seulement les effets des filtres possibles – et vous donner une idée de ce qui peut être fait d’eux.

Les éléments de filtre disponibles dans SVG sont:

<FeBlend> – filtre pour combiner des images
<FeColorMatrix> – filtre pour transformations de couleur
<FeComponentTransfer>
<FeComposite>
<FeConvolveMatrix>
<FeDiffuseLighting>
<FeDisplacementMap>
<FeFlood>
<FeGaussianBlur>
<FeImage>
<FeMerge>
<FeMorphology>
<FeOffset> – filtre pour les ombres descendantes
<FeSpecularLighting>
<FeTile>
<FeTurbulence>
<FeDistantLight> – filtre pour éclairage
<FePointLight> – filtre pour éclairage
<FeSpotLight> – filtre pour éclairage

Astuce: Vous pouvez appliquer plusieurs filtres sur chaque élément SVG!

Effets flou

<Defs> et <filter>

Tous les filtres SVG Internet sont définis dans un élément <defs>. L’élément <defs> est l’abréviation de définitions et contient la définition d’éléments spéciaux (tels que les filtres).

L’élément <filter> est utilisé pour définir un filtre. L’élément <filter> a un attribut d’identification requis qui identifie le filtre. Le graphique indique ensuite le filtre à utiliser.

<feGaussianBlur>

Example 1

L’élément <feGaussianBlur> est utilisé pour créer des effets de flou:

The Element by Med Mus (@MedMus) on CodePen.

Explication du code:

• L’attribut id de l’élément <filter> définit un nom unique pour le filtre.
• L’effet flou est défini avec l’élément <feGaussianBlur>.
• La partie in = “SourceGraphic” définit que l’effet est créé pour l’élément entier.
• L’attribut stdDeviation définit le montant du flou
• L’attribut de filtre de l’élément <rect> relie l’élément au filtre “f1”.

Drop Shadows

<feOffset>

Exemple 1

L’élément <feOffset> est utilisé pour créer des effets d’ombre portée. L’idée est de prendre un graphique SVG (image ou élément) et le déplacer un peu dans le plan xy.

Le premier exemple décompose un rectangle (avec <feOffset>), puis mélange l’original sur l’image décalée (avec <feBlend>):

SVG by Med Mus (@MedMus) on CodePen.

Explication du code:

• L’attribut id de l’élément <filter> définit un nom unique pour le filtre.
• L’attribut de filtre de l’élément <rect> relie l’élément au filtre “f1”

Exemple 2

Maintenant, l’image décalée peut être floue (avec <feGaussianBlur>):

SVG (2) by Med Mus (@MedMus) on CodePen.

Explication du code:

• L’attribut stdDeviation de l’élément <feGaussianBlur> définit la quantité de flou.

Exemple 3

Maintenant, rendre l’ombre noir:

SVG (3) by Med Mus (@MedMus) on CodePen.

Explication du code:

• L’attribut de l’élément <feOffset> est changé en “SourceAlpha” qui utilise le canal Alpha pour le flou au lieu de l’intégralité du pixel RGBA

Exemple 4

Maintenant, on va traiter l’ombre comme une couleur:

SVG (4) by Med Mus (@MedMus) on CodePen.

Explication du code:

• Le filtre <feColorMatrix> sert à transformer les couleurs de l’image décalée en noir. Les trois valeurs de «0.2» dans la matrice sont multipliées par les canaux rouge, vert et bleu. Réduire leurs valeurs rapproche les couleurs du noir (le noir est 0).

SVG Dégradés – Linéaire

SVG Dégradés

Un dégradé est une transition en douceur d’une couleur à une autre. De plus, plusieurs transitions de couleurs peuvent être appliquées au même élément.

Il existe deux principaux types de dégradés en SVG:

• Linéaire
• Radial

 SVG Dégradé Linéaire – <linearGradient>

L’élément <linearGradient> est utilisé pour définir un dégradé linéaire.

L’élément <linearGradient> doit être imbriqué dans une balise <defs>. La balise <defs> est courte pour les définitions et contient la définition d’éléments spéciaux (tels que les dégradés).

Les dégradés linéaires peuvent être définis comme des dégradés horizontaux, verticaux ou angulaires:

• Les dégradés horizontaux sont créés lorsque y1 et y2 sont égaux et x1 et x2 diffèrent.
• Les dégradés verticaux sont créés lorsque x1 et x2 sont égaux et y1 et y2 diffèrent.
• Les dégradés angulaires sont créés lorsque x1 et x2 diffèrent et y1 et y2 diffèrent.

Exemple 1

See the Pen SVG Dégradé linéaire by Med Mus (@MedMus) on CodePen.

Explication du code:

• L’attribut id de la balise <linearGradient> définit un nom unique pour le dégradé.
• Les attributs x1, x2, y1, y2 de la balise <linearGradient> définissent la position de début et de fin du dégradé.
• La gamme de couleurs pour un dégradé peut être composée de deux couleurs ou plus. Chaque couleur est spécifiée avec une balise <stop>. L’attribut offset est utilisé pour définir l’origine et la fin de la couleur du dégradé.
• L’attribut fill de remplissage relie l’élément ellipse au dégradé.

Exemple 2

Définissons une ellipse avec un dégradé linéaire vertical du jaune au rouge:

See the Pen SVG Dégradé Linéaire (2) by Med Mus (@MedMus) on CodePen.

Exemple 3

Définissons une ellipse avec un dégradé linéaire horizontal du jaune au rouge et ajoutez un texte à l’intérieur de l’ellipse:

See the Pen SVG Dégradé Linéaire (3) by Med Mus (@MedMus) on CodePen.

Explication du code:

• L’élément <text> est utilisé pour ajouter un texte.

SVG Dégradés – Radial <radialGradient>

L’élément <radialGradient> est utilisé pour définir un dégradé radial.

L’élément <radialGradient> doit être imbriqué dans une balise <defs>. La balise <defs> est courte pour les définitions et contient la définition d’éléments spéciaux (tels que les dégradés).

Exemple 1

Définissons une ellipse avec un dégradé radial du blanc au bleu:

See the Pen SVG Dégradés – Radial by Med Mus (@MedMus) on CodePen.

Explication du code:

• L’attribut id de la balise <radialGradient> définit un nom unique pour le dégradé
• Les attributs cx, cy et r définissent le cercle le plus externe et le fx et fy définissent le cercle le plus interne.
• La gamme de couleurs pour un dégradé peut être composée de deux couleurs ou plus. Chaque couleur est spécifiée avec une balise <stop>. L’attribut offset est utilisé pour définir l’origine et la fin de la couleur du dégradé.
• L’attribut fill (de remplissage) relie l’élément ellipse au dégradé.

Exemple 2

Définissons une autre ellipse avec un dégradé radial du blanc au bleu:

See the Pen SVG Dégradés – Radial (2) by Med Mus (@MedMus) on CodePen.

Exemples

Les exemples ci-dessous intègrent le code SVG directement dans le code HTML.

Ceci est pris en charge par Firefox, Internet Explorer 9, Google Chrome, Opera et Safari.

Formes Basiques

Un cercle
Un rectangle
Un rectangle avec opacité
Un rectangle avec opacité 2
Un rectangle avec coins arrondis
Une  ellipse
Trois ellipses l’une sur l’autre
Deux ellipses
Une Ligne
Un polygone à trois côtés
Un polygone à quatre côtés
Une étoile
Une autre étoile
A polyline
Une autre polyligne
Un chemin
Une courbe quadratique Bézier
Écrire un Texte
Faire pivoter un texte
Texte sur plusieurs lignes
Un text comme un lien
Définit la couleur d’une ligne, d’un texte ou d’un contour (trait)
Définit la largeur d’une ligne, d’un texte ou d’un contour (largeur de trait)
Définit différents types de fins sur un chemin ouvert (cap de ligne du trait)
Définit les lignes pointillées (traits-pointillés)

Les Filtres

eGaussianBlur – Effet flou
feOffset – Décaler un rectangle, puis mélanger l’original sur l’image décalée
feOffset -Effet flou sur l’image décalée
feOffset -Faire un ombre noir
feOffset -Traitez l’ombre comme une couleur
Filtre feBlend
Filtre 1
Filtre2
Filtre 3
Filtre 4
Filtre 5
Filtre 6

Les Filtres Dégradés

Une ellipse avec un dégradé linéaire horizontal du jaune au rouge
Une ellipse avec un dégradé linéaire vertical du jaune au rouge
Une ellipse avec un dégradé linéaire horizontal du jaune au rouge, et un texte
Une ellipse avec un dégradé radial du blanc au bleu
Une autre ellipse avec un dégradé radial du blanc au bleu

Divers

Rectangle qui disparaît à plusieurs reprises pendant 5 secondes
Un rectangle croissant qui change de couleur
Trois rectangles qui changent de couleur
Déplacer du texte le long d’un chemin en mouvement
Déplacer, faire pivoter et rédiger un texte sur un chemin en mouvement
Déplacez, faites pivoter et faites passer le texte le long d’un chemin en mouvement + un rectangle croissant qui change de couleur
Faire tourner des ellipses

Note: Je souhaite que ce guide vous aidera durant votre trajet éducatif 🙂