Dessiner avec SVG - sommaire

La version 2 de SVG

Grâce à la version 2 de SVG la création d'images vectorielles statiques ou animées sera beaucoup plus simple. La compatibilité entre SVG et CSS sera considérablement accrue.
Les navigateurs commencent seulement à implémenter cette nouvelle version.

Appliquer des filtres CSS à des objets SVG ?

Les navigateurs récents autorisent désormais l'application de filtres CSS à des éléments SVG.
Or la définition des filtres en CSS est beaucoup plus simple qu'en SVG. Il s'agit donc d'une remarquable avancée en matière de programmation web.

Exemple

Je vous montre ci-dessous que les mêmes définitions de filtres (basées sur la syntaxe CSS) peuvent s'appliquer non seulement à des éléments HTML mais aussi à des éléments SVG de la page web.

Ci-dessous trois éléments HTML et trois objets SVG auxquels j'ai appliqué les mêmes filtres.

Les éléments HTML : 3 balises IMG

Les objets SVG : 3 balises RECT

La première image (élement HTML) et le premier rectangle (objet SVG) sont floutés.
La deuxième image et le deuxième rectangle sont ombrés.
La troisième image et le troisième rectangle sont floutés et ombrés.

Le code correspondant

La feuille de style de cette page web

.flou1 {filter : blur(6px);}
.ombrage1{filter : drop-shadow(10px 10px 10px gray) }
.composite1 {filter : blur(4px) drop-shadow(10px 10px 10px gray); }

Les classes correspondent à des filtres définis avec la syntaxe CSS.
Le troisième filtre est composite : flou et ombrage.

Le code HTML & SVG

Qu'en est-il du SVG externe ?

Un document SVG peut comporter une feuille de style avec la définition de filtres selon la syntaxe CSS.
Ces filtres peuvent s'appliquer aux objets SVG de ce document.

Ci-dessous un document SVG inséré dans cette page web

Le code de ce document nommé "document_css.svg"

Notez la feuille de style interne dans ce document SVG.
Cette feuille de style comprend trois filtres.
Le canevas proprement dit dessine trois rectangles avec des coins arrondis.

Conclusion

Il est quand même utile de connaitre un peu la syntaxe des filtres SVG car les éditeurs WYSIWYG tels Inkscape et Boxy SVG génèrent des filtres selon cette syntaxe.
Sachez par ailleurs qu'il y a réciprocité : un filtre défini en SVG peut s'appliquer aussi à un élément HTML.
Cette situation était fréquente par le passé puisque la norme CSS2 ignorait encore les filtres.

Les filtres avec CSS

Autres tolérances syntaxiques

L'attribut xlink:href

Si vous écrivez href au lieu de xlink:href le navigateur comprendra.
Je rappelle que l'on retrouve l'attribut href avec les éléments image & use du langage SVG.

L'attribut attributType

Dans le cadre des animations SMIL l'attribut attributType est désormais facultatif avec l'élément animate, set, etc.

Les paramètres géométriques passés en propriétés

Dans la version 1 seuls les paramètres de style pouvaient être passé en attributs ou en propriétés.
Avec la version 2 tous les paramètres géométriques d'un objet (qui précisent la taille et la position) peuvent aussi être passés en propriétés.

Exemple 1 : dessin statique

Dessiner d'une ellipse

Si vous naviguez avec Firefox la zone de dessin ne fait apparaitre que le dégradé CSS ... mais pas l'ellipse.
Si, par contre vous visualisez cette page web avec Chrome ou Edge l'ellipse apparait.

Le code correspondant

Tous les paramètres (de style et géométriques) de l'ellipse sont passés en propriétés CSS (via l'attribut STYLE).

Exemple 2 : dessin animé

La possibilité de passer tous les paramètres en propriété permet de systématiser l'animation éventuelle via CSS3.

Le cercle change de rayon et d'opacité selon un cycle répétitif

Sous Firefox le canevas est simplement rempli de jaune, pas de rond animé !

Le code correspondant

Le code SVG

Notez que le cercle est identifié "rond".

Extrait de la feuille de style de cette page web

@keyframes animer
	{ 
	0% {fill-opacity:0.1; r : 10;}
	50% {fill-opacity :1 ; r: 200 ;}
	100% {fill-opacity:0.1; r : 10; }
	}
#rond {animation : animer 20s 0s infinite linear;}

Via le 'keyframes' j'anime l'opacité (paramètre de style) et le rayon (paramètre géométrique).

Conclusion

Tant que certains navigateurs populaires n'auront pas implémenté la possibilité de spécifier touts les attributs géométriques en propriété de style, il sera prematuré de mettre en ligne le code ci-dessus.

Il faudra alors recourir à un mix pour l'animation :
• animer les paramètres de présentation via CSS
• animer les paramètres géométriques via le SMIL

z-index

La norme SVG 2 prévoit que la propriété, très pratique, z-index puisse s'appliquer à des éléments SVG.
Je rappelle que cette propriété CSS permet de gérer l'empilement d'éléments.

Le code SVG 2 envisagé

On pourrait donc avoir le code suivant : <svg viewBox ="0 0 400 200" width ="60%" > <rect x="0" y="0" width="100" height="100" style="fill : blue; z-index : 1;" /> <rect x="10" y="10" width="100" height="100" style="fill : green; z-index : 0;" /> <rect x="20" y="20" width="100" height="100" style="fill : red; z-index :-1 ;" /> </svg>

Le rectangle bleu apparaitrait au premier plan alors que c'est le premier dessiné mais il a le z-index le plus élevé.
Un modèle d'animation CSS pourrait modifier l'ordre d'empilement des objets.

Le rendu actuel (14 juillet 2025)

Aucun navigateur n'a encore implémenté z-index pour les éléments SVG ...