SVG > les formes basiques

 

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

Note : les attributs stroke, stroke-width et fill sont détaillés plus loin dans ce tutoriel.

Rectangles

Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle dessiné ici. L’image précédente affichait 2 rectangles, ce qui est un peu répétitif. Celui de droite possède des attributs rx et ry définis, ce qui lui donne des coins arrondis. Si ces attributs ne sont pas définis, leur valeur par défaut est de 0, ce qui a pour résultats d’afficher un rectangle avec des angles droits.

 <rect x="10" y="10" width="30" height="30"/>
 <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

x Position du rectangle sur l’axe horizontal par rapport au coin supérieur gauche.

y Position du rectangle sur l’axe vertical par rapport au coin supérieur gauche.

width Largeur du rectangle.

height Hauteur du rectangle.

rx Rayon x des coins du rectangle.

ry Rayon y des coins du rectangle.

Cercles

De la même manière, il est facile de deviner la fonction de l’élément circle. Il dessine à l’écran un cercle. Seuls 3 attributs peuvent être définis pour cet élément.

 <circle cx="25" cy="75" r="20"/>

r Rayon du cercle.

cx Position x du centre du cercle.

cy Position y du centre du cercle.

Ellipses

Les ellipses sont juste des sortes de cercles bien particuliers, où l’on peut modifier les rayons x et y séparemment l’un de l’autre (les matheux appellent ces rayons le grand axe et le petit axe).

 <ellipse cx="75" cy="75" rx="20" ry="5"/>

rx Rayon x de l’ellipse.

ry Rayon y de l’ellipse.

cx Position x du centre de l’ellipse.

cy Position y du centre de l’ellipse.

Lignes

Les lignes droites permettent de créer des figures plus complexes, en les additionnant les unes avec les autres. L’élément line en SVG correspond au segment que l’on apprend en géométrie traditionnelle : c’est une portion de droite délimitée par 2 points. Donc pour définir une droite en SVG, il va falloir lui donner pour attribut les coordonnées des deux points qui la définissent.

 <line x1="10" x2="50" y1="110" y2="150"/>

x1 Position x du premier point.

x2 Position x du deuxième point.

y1 Position y du premier point.

y2 Position y du deuxième point.

Lignes brisées

Constituées d’un ensemble de lignes droites connectées entre elles, donc d’un ensemble de points se reliant entre eux suivant un ordre défini. Comme ce lot de points peut être assez conséquent à déclarer, un seul attribut est utilisé pour déclarer l’ensemble de points :

 <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

points Liste des points, chaque pair de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace. Chaque ensemble de coordonnées est séparé du suivant par une virgule.

Polygones

Le polygone fonctionne exactement de la même manière que la ligne brisée. Au final, un polygone n’est rien d’autre qu’une ligne brisée qui relie une série de points. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée. Il est à noter que le rectangle est un type de polygone particulier. Il est donc possible, pour des besoins de flexibilité, de déclarer un rectangle en utilisant l’élément polygon.

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

points Idem que l’attribut points de l’élément polyline. Liste des points, chaque paire de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace, chaque ensemble de coordonnées est séparé du suivant par une virgule. Une dernière ligne ferme automatiquement la forme en retournant au point de départ.

Chemins

 <path d="M 20 230 Q 40 205, 50 230 T 90230"/>

Un ensemble d’information définissant le chemin à dessiner. Pour en savoir plus, allez à la page à propos des Chemins.

—

text inside rect

If you want to display text inside a rect element you should put them both in a group with the text element coming after the rect element ( so it appears on top ).

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red"></rect>
    <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
  </g>
</svg>

--

SVG Text - <text>

Example 1

<svg height="30" width="200">
   <text x="0" y="15" fill="red">I  love SVG!</text>
</svg>

Example 2 - Rotate the text:

<svg height="60" width="200">
   <text x="0" y="15" fill="red"  transform="rotate(30 20,40)">I  love SVG</text>
</svg>

Example 3

The <text> element can be arranged in any number of sub-groups with the <tspan> element. Each <tspan> element can contain different formatting and position.

Text on several lines (with the <tspan> element):

Several lines: First line. Second line. Sorry, your browser does not support inline SVG.

<svg height="90" width="200">
   <text x="10" y="20" style="fill:red;">Several lines:
      <tspan x="10" y="45">First line.</tspan>
      <tspan x="10" y="70">Second line.</tspan>
   </text>
</svg>

Example 4

Text as a link (with the <a> element):

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
   <a xlink:href="https://www.w3schools.com/graphics/"  target="_blank">
      <text x="0" y="15" fill="red">I love SVG!</text>
   </a>
</svg>

--

Le texte SVG peut également être stylisé avec du CSS contenant les propriétés SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10"  y="20"
        style="font-family: Times New Roman;
               font-size  : 24;
               stroke     : #00ff00;
               fill       : #0000ff;">
    SVG text styling
  </text>
</svg>

--

Les éléments SVG par catégories

Éléments d’animation : <animate>, <animateColor>, <animateMotion>, <animateTransform>, <discard>, <mpath>, <set>

Formes simples : <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>

Éléments conteneurs : <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown>

Éléments descriptifs : <desc>, <metadata>, <title>

Éléments primitives de filtre : <feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feDropShadow>, <feFlood>,<feFuncA>, <feFuncB>, <feFuncG>, <feFuncR>,<feGaussianBlur>, <feImage>, <feMerge>, <feMergeNode>, <feMorphology>, <feOffset>, <feSpecularLighting>, <feTile>, <feTurbulence>

Éléments pour polices de caractères : <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern>

Éléments de dégradés : <linearGradient>, <meshgradient>, <radialGradient>, <stop>

Éléments graphiques : <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>

Éléments de référencement graphique : <mesh>, <use>

Éléments de source de lumière : <feDistantLight>, <fePointLight>, <feSpotLight>

Éléments sans‑rendu : <clipPath>, <defs>, <hatch>, <linearGradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialGradient>, <script>, <style>, <symbol>, <title>

Éléments de service pour peinture : <hatch>, <linearGradient>, <meshgradient>, <pattern>, <radialGradient>, <solidcolor>

Éléments avec rendu : <a>, <circle>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textPath>, <tspan>, <unknown>, <use>

Éléments de formes : <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>

Éléments structurels : <defs>, <g>, <svg>, <symbol>, <use>

Éléments de contenu textuel : <altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyph>, <glyphRef>, <textPath>, <text>, <tref>, <tspan>

Éléments de contenu textuel enfant : <altGlyph>, <textPath>, <tref>, <tspan>

Éléments non catégorisés : <clipPath>, <color-profile>, <cursor>, <filter>, <foreignObject>, <hatchpath>, <meshpatch>, <meshrow>, <script>, <style>, <view>

--

L’attribut stroke-linecap définit la forme de la fin des lignes SVG.

 

Note: stroke-linecap étant un attribut de présentation, il peut être utilisé comme propriété CSS.

 

Cet attribut peut être appliqué à tous les éléments, en revanche il n’aura d’effet que sur les éléments suivants: <altGlyph>, <path>, <polyline>, <text>, <textPath>, <tref>, et <tspan>

 

<svg viewBox="0 0 6 6″ xmlns="http://www.w3.org/2000/svg">

 

<!-- Effet de la valeur "butt" (valeur par défaut) -->

<line x1="1″ y1="1″ x2="5″ y2="1″ stroke="black"

stroke-linecap="butt" />

 

<!-- Effet de la valeur "round" -->

<line x1="1″ y1="3″ x2="5″ y2="3″ stroke="black"

stroke-linecap="round" />

 

<!-- Effet de la valeur "square" -->

<line x1="1″ y1="5″ x2="5″ y2="5″ stroke="black"

stroke-linecap="square" />

 

<!--

Les lignes roses indiquent la position

du chemin pour chaque trait

-->

<path d="M1,1 h4 M1,3 h4 M1,5 h4″ stroke="pink" stroke-width="0.025″ />

</svg>

--

SVG Stroke Properties

 

SVG offers a wide range of stroke properties. In this chapter we will look at the following:

 

stroke

stroke-width

stroke-linecap

stroke-dasharray

 

All the stroke properties can be applied to any kind of lines, text and outlines of elements like a circle.

SVG stroke Property

 

The stroke property defines the color of a line, text or outline of an element:

Sorry, your browser does not support inline SVG.

 

Here is the SVG code:

Example

<svg height="80″ width="300″>

<g fill="none">

<path stroke="red" d="M5 20 l215 0″ />

<path stroke="black" d="M5 40 l215 0″ />

<path stroke="blue" d="M5 60 l215 0″ />

</g>

</svg>

SVG stroke-width Property

 

The stroke-width property defines the thickness of a line, text or outline of an element:

Sorry, your browser does not support inline SVG.

 

Here is the SVG code:

Example

<svg height="80″ width="300″>

<g fill="none" stroke="black">

<path stroke-width="2″ d="M5 20 l215 0″ />

<path stroke-width="4″ d="M5 40 l215 0″ />

<path stroke-width="6″ d="M5 60 l215 0″ />

</g>

</svg>

SVG stroke-linecap Property

 

The stroke-linecap property defines different types of endings to an open path:

Sorry, your browser does not support inline SVG.

 

Here is the SVG code:

Example

<svg height="80″ width="300″>

<g fill="none" stroke="black" stroke-width="6″>

<path stroke-linecap="butt" d="M5 20 l215 0″ />

<path stroke-linecap="round" d="M5 40 l215 0″ />

<path stroke-linecap="square" d="M5 60 l215 0″ />

</g>

</svg>

SVG stroke-dasharray Property

 

The stroke-dasharray property is used to create dashed lines:

Sorry, your browser does not support inline SVG.

 

Here is the SVG code:

Example

<svg height="80″ width="300″>

<g fill="none" stroke="black" stroke-width="4″>

<path stroke-dasharray="5,5″ d="M5 20 l215 0″ />

<path stroke-dasharray="10,10″ d="M5 40 l215 0″ />

<path stroke-dasharray="20,10,5,5,5,10″ d="M5 60 l215 0″ />

</g>

</svg>

--

L’attribut stroke-width définit l’épaisseur du contour à appliquer à une forme SVG.

 

Note: stroke-width étant un attribut de présentation, il peut être utilisé comme propriété CSS.

 

Cet attribut peut être appliqué à tous les éléments, en revanche il n’aura d’effet que sur les éléments suivants: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, et <tspan>

 

<svg viewBox="0 0 30 10″ xmlns="http://www.w3.org/2000/svg">

<!-- Épaisseur par défaut: 1 -->

<circle cx="5″ cy="5″ r="3″ stroke="green" />

 

<!-- Définit l’épaisseur avec un nombre -->

<circle cx="15″ cy="5″ r="3″ stroke="green"

stroke-width="3″ />

 

<!-- Définit l’épaisseur avec un pourcentage -->

<circle cx="25″ cy="5″ r="3″ stroke="green"

stroke-width="2%" />

</svg>

--