Les images SVG

Catégories : HTML

Mots-clés : html images balise svg

245 lectures

Auteur : user Benoit

Date :

Il est de plus en plus courant d'utiliser des images SVG (Scalable Vector Graphics) pour créer des logos et icônes à afficher dans les pages web.

Il existe une balise HTML spécifique, la balise <svg> qui permet de créer des images directement dans les pages HTML.

On commencera par créer la balise elle-même en indiquant le “namespace XML”, la version, une largeur et une hauteur

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

</svg>

Les formes de base

Après avoir créé la balise SVG, vous pouvez ajouter des formes dans la balise SVG.

Le rectangle

On pourra utiliser la balise <rect> pour créer un rectangle. On donnera une coordonnée x et une coordonnée y représentant la position du coin supérieur gauche du rectangle. On donnera également la largeur et la hauteur du rectangle directement.

On pourra préciser aussi la couleur et l'épaisseur de bordure (stroke) et la couleur de remplissage (fill)

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

Si on souhaite que le rectangle ait des coins arrondis, on pourra également donner les rayons horizontal (rx) et vertival (ry)

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

Le cercle

De la même façon que le rectangle, il est possible de créer des cercles avec la balise <circle>. Dans ce cas, la position du centre (cx et cy) ainsi que le rayon (r) sont nécessaires.

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

L'ellipse

Une ellipse est un “cercle aplati”, elle aura donc un rayon horizontal (rx) et vertical (ry) qui seront différents. On utilisera la balise <ellipse>

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

La ligne

On pourra également tracer des lignes droites avec la balise <line>, qui seront composées de 2 jeux de coordonnées représentant le point de départ(x1, y1) et le point d'arrivée (x2, y2)

<line x1="10" y1="110" x2="50" y2="150" stroke="orange" stroke-width="5" />

La ligne multiple

Il existe une ligne composée d'un ensemble de points qui forment dans ce cas une ligne multiple ou <polyline>. On donnera l'ensemble des coordonnées successives sous cette forme x1 y1 x2 y2 x3 y3 x4 y4…

<polyline points="60 110 65 120 70 115 75 130 80 125 85 140" fill="transparent" stroke="orange" stroke-width="5" />

Le polygone

Tout comme la ligne multiple, le polygone (<polygon>) sera composé des différents points. La différence est que ce polygone sera systématiquement fermé en revenant aux coordonnées du 1er point.

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

Le chemin

Un chemin (<path>) est une succession d'actions qui, mises bout à bout, donnent une forme. Il existe une multitude d'actions pour les chemins, celles-ci sont décrites sur la page dédiée au path sur le site MDN.

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

Le Sprite

Un sprite est un ensemble de symboles indépendants rassemblés au sein du même SVG, sous forme de balise HTML ou dans un fichier indépendant.

Chaque symbole utilisera une balise <symbol> pour le décrire comme dans l'exemple ci-dessous. Il aura également un attribut id pour pouvoir être facilement réutilisé.

<svg width="0" height="0" class="hidden" xmlns="http://www.w3.org/2000/svg">
    <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="comment">
        <path d="M6 0C2.7 0 0 2.36 0 5.27c0 2.9 2.7 5.26 6 5.26.35 0 .7-.02 1.04-.08l2.72 1.49a.5.5 0 00.74-.44V8.71A4.9 4.9 0 0012 5.27C12 2.37 9.3 0 6 0z" fill="currentColor"/>
    </symbol>
    <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="search">
        <path d="M11.72 10.3L9.18 7.78a5 5 0 10-1.4 1.41l2.53 2.54a1 1 0 001.41-1.41zm-9.7-5.28a3 3 0 116 0 3 3 0 01-6 0z" fill="currentColor"/>
    </symbol>
    <symbol id="lock" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <path fill="currentColor" fill-rule="evenodd" d="M7 10V7a5 5 0 1110 0v3h1a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8a2 2 0 012-2h1zm-1 2v8h12v-8H6zm3-2h6V7a3 3 0 00-6 0v3zm5 4h2v4h-2v-4z" clip-rule="evenodd"/>
    </symbol>
    <symbol id="cross" viewBox="0 0 20 20">
        <path d="M17.1 5.2l-2.6-2.6-4.6 4.7-4.7-4.7-2.5 2.6 4.7 4.7-4.7 4.7 2.5 2.5 4.7-4.7 4.6 4.7 2.6-2.5-4.7-4.7"/>
    </symbol>
</svg>

Dans cet exemple, 4 symboles sont présents.

Si l'image SVG globale s'appelle, par exemple, sprite.svg, nous pourrons aller chercher le symbole ayant l'id “search” en écrivant ce code dans la page HTML

<svg width="100" height="100">
	<use xlink:href="/sprite.svg#search" ></use>
</svg>

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat