La version 2 de SVG

Grâce à la version 2 de SVG la création d'images vectorielles statiques ou animées est beaucoup plus simple. La compatibilité entre SVG et CSS sera considérablement accrue.
Les navigateurs les plus utilisés (Chrome, Edge & Firefox) commencent enfin à implémenter SVG2.

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 définis en CSS.

Les éléments HTML : 3 balises IMG

Les objets SVG : 3 balises RECT

La première image (élément 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

...
<p><img class ="gauche flou1"  src ="../images/bikini7.jpg"  />
<img class ="gauche ombrage1"  src ="../images/bikini5.jpg"  />
<br><img class ="gauche composite1"  src ="../images/bikini16.jpg"  />

...
<svg width="50%"  viewBox ="0 0 400 400">
	<rect x="25" y="25" fill = "orange"	width = '100' height = '100'  ry ='10' class ="flou1" />
	<rect x="150" y="75" fill = 'yellow' width = '200' height = '100'  rx = '20' class ="ombrage1" />
	<rect x="150" y="275" fill = 'yellow' width = '150' height = '100'  rx = '25' class ="composite1" />
</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"

<svg version="1.1" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" 
	xmlns:xlink="http://www.w3.org/1999/xlink" >
<style>
	.flou1 {filter : blur(6px);}
	.ombrage1{filter : drop-shadow(10px 10px 10px gray) }
	.composite1 {filter : blur(4px) drop-shadow(10px 10px 10px gray); }
</style>
	<rect x="25" y="25" fill = "orange"	 width = '100' height = '100'  ry ='10' class ="flou1" />
	<rect x="150" y="75" fill = 'yellow'  width = '200' height = '100'  rx = '20' class ="ombrage1" />
	<rect x="150" y="225" fill = 'yellow'  width = '150' height = '150'  rx = '25' class ="composite1" />
</svg>

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

Remarque

Il est quand même utile de connaitre 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

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

Dans la version 1, les paramètres géométriques (qui précisent la taille et la position) ne peuvent être passés qu'en attributs.
Avec la version 2 tous les paramètres géométriques d'un objet peuvent être contrôlés par le CSS (être passés en propriétés).
En juin 2026 les navigateurs Chrome, Edge et FireFox ont implémenté cette nouveauté SVG2 mais pas Safari.

Exemple 1 : un dessin statique

Dessiner d'une ellipse

Ne fonctionne pas encore sous Safari.

Le code correspondant

La règle de style dans cette page web

.ellipse {cx : 200px ; cy : 200px ; rx : 150px ; ry : 75px ; }

Le code SVG

<svg xmlns="http://www.w3.org/2000/svg"
	style ="background : linear-gradient(90deg,green,lime,white );" 
	viewBox ="0 0 400 400" width ="60%"  >
	<ellipse class ="ellipse" fill ="olive" />
</svg>

Tous les paramètres géométriques de l'ellipse sont contrôlés via la classe CSS "ellipse".

Exemple 2 : dessin animé

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

Ne fonctionne pas encore sous Safari.

Le code correspondant

Le code SVG

<svg xmlns="http://www.w3.org/2000/svg"
	viewBox ="0 0 400 400" style ="background : yellow" width ="60%" >
	<circle style ="cx : 200px ; cy : 200px ; r : 100px; fill : black ;" id ="rond" /> 	 
</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 : 10px;}
	50% {fill-opacity :1 ; r: 200px ;}
	100% {fill-opacity:0.1; r : 10px; }
	}
#rond {animation : animer 20s 0s infinite linear;}

Via le 'keyframes' j'anime l'opacité (un paramètre de style) et le rayon (un paramètre géométrique) de l'objet SVG.
Donc dès que le navigateur Safari aura implémenté la version 2 de SVG, le SMIL (avec ses balises animate, animateMotion, ...) sera une technologie obsolète.

Le paramètre paint-order

Par défaut, le remplissage est peint avant le contour, qui lui-même est peint avant les marqueurs. Cette séquence peut créer des effets indésirables : par exemple, un contour épais peut masquer partiellement le remplissage ou les marqueurs.
Le paramètre paint-order permet de modifier cet ordre afin d’obtenir le rendu visuel souhaité sans changer les valeurs des propriété fill, stroke, marker.

Non utilisation de ce paramètre

Le code SVG

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="80">
    <text x="100" y="50"
        fill="green" stroke="black" stroke-width="6"
        text-anchor="middle"
        font-size="40">Bonjour
	</text>
</svg>

Le rendu

Les lettres sont en dessinées uniquement en noir ; pas de vert ...

Utilisation de paint-order

Le rendu

Les lettres ont cette fois un fond vert avec un contour noir.

Le code correspondant

<svg ...
   <text...
       paint-order="stroke fill" ... >
   ...
	</text>
</svg>

Il suffit donc d'insérer dans l'élément text l'attribut paint-order="stroke fill" : le contour est peint avant le remplissage.

L'attribut xlink:href devient href

L'attribut xlink:href devient tout simplement href.
Par ailleurs l'attribut xmlns:xlink="http://www.w3.org/1999/xlink" dans l'élément SVG devient inutile !

Un document SVG avec la spécification SVG 1

<svg viewBox ="0 0 600 600"
	xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

<image xlink:href="../images/jolie_fille.jpg"  height="200" />
<img xlink:href="../images/jolie_fille.jpg"  height ="100"  x = '300' y ='200' />
<image xlink:href="../images/jolie_fille.jpg" width="240"  x = '450' y ='300' />
</svg>

Insertion par erreur d'un élément HTML dans le code SVG (balise img) ; cette instruction est ignorée. Voir le paragraphe suivant.

Document équivalent avec la spécification SVG 2

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

<image href="../images/jolie_fille.jpg"  height="200" />
<img href="../images/jolie_fille.jpg"  height ="100"  x = '300' y ='200' />
<image href="../images/jolie_fille.jpg" width="240"  x = '450' y ='300' />
</svg>

Un espace de nom a disparu.
l'attribut de chaque élément image est simplement href.

La version 2 insérée dans cette page web

L'image n'apparait que deux fois ...

Insertion du document SVG avec l'élément object compte tenu de la complexité du code SVG : lien vers des ressources externes.

Simplifications syntaxiques autorisées par les navigateurs

Le SVG est un format XML ; il doit donc être bien‑formé pour être accepté par les navigateurs.
Toutefois, les implémentations modernes sont un peu plus indulgentes que le strict standard XML.

attributs optionnels manquants (viewBox, preserveAspectRatio, xmlns): Le SVG s’affiche avec les valeurs par défaut
balises inconnues (ex : balises HTML utilisées au sein du code SVG) : elles sont ignorées.
espaces de noms omis (ex. xmlns:xlink) : oubli toléré par certains navigateurs
ordre des attributs : les attributs peuvent être dans n’importe quel ordre
commentaires XML () : n’influencent pas le rendu
espaces blancs et sauts de ligne : ignorés par le parseur
balises auto‑fermées à la place de la balise fin : acceptées  à condition que cet élément n'ait pas d'enfant.
Ex : <line … /> équivaut à <line … > </line>
valeurs numériques avec unités implicites (ex : width="100" au lieu de width="100px") : SVG définit des unités par défaut : px

Les valeurs context-stroke & fill-stroke

Dans la définition d'un marqueur les attributs fill & stroke peuvent prendre la valeur "context-stroke" ou "fill-stroke" afin que le marqueur hérite de la couleur de trait ou de la couleur de remplissage de son élément de contexte.

Les marqueurs sont des anneaux

Pour le chemin en rouge, les traits des marqueurs sont en rouge ; pour le chemin en vert ils sont verts et pour le chemin en bleu ils sont bleus?

Le code correspondant

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width ="60%">
	<style> 
		.chemin { fill: none; stroke-width: 2px; marker: url(#anneau); } 
	</style>
	<defs>
		<marker id="anneau" markerWidth="12" markerHeight="12" refX="6" refY="6" markerUnits="userSpaceOnUse">
			<circle cx="6" cy="6" r="3" fill="white" stroke="context-stroke" stroke-width="2"/>
		</marker>
	</defs>

  <path d="M 10,50 v -20 h 40 v -20" stroke="red" class ="chemin"/>
  <path d="M 30,70 v -20 h 40 v -20" stroke="green" class ="chemin" />
  <path d="M 50,90 v -20 h 40 v -20" stroke="blue" class ="chemin"/>
</svg>

Dans la règle de style notez l'utilisation du raccourci marker qui remplace marker-start, marker-mid, marker-end.
Notez que la valeur de l'attribut stroke dans la balise circle (enfant de marker) est "context-stroke" ; ainsi chaque marqueur adopte pour son contour la couleur du chemin dont il dépend.
Notez aussi que ce SVG interne a une structure identique à un document SVG : feuille de style à l'intérieur du conteneur SVG.

Variante : les marqueurs sont maintenant des ronds pleins

Pour le chemin en rouge, les marqueurs sont remplis de rouge ; pour le chemin en vert ils sont verts et pour le chemin en bleu ils sont remplis de bleus.

Le code - extraits

Code identique à l'exemple précédent sauf ... ... .chemin2 {...; marker: url(#anneau2); } </style> ... <marker id="anneau2" ...> <circle ... fill="context-stroke" /> </marker> </defs> <path ... class ="chemin2"/> ... ...

La valeur de l'attribut fill dans la balise circle (enfant de marker) est "context-stroke" ; ainsi chaque marqueur adopte pour son remplissage la couleur du chemin dont il dépend.

Autres exemples d'animations SVG gérées uniquement en CSS

Visitez aussi : animation d'objets SVG via CSS

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins vectoriels statiques

Dessins vectoriels animés

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

La version 2 de SVG

Appliquer des filtres CSS à des objets SVG ?

Exemple

Les éléments HTML : 3 balises IMG

Les objets SVG : 3 balises RECT

Le code correspondant

La feuille de style de cette page web

Le code HTML & SVG

Qu'en est-il du SVG externe ?

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

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

Remarque

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

Exemple 1 : un dessin statique

Dessiner d'une ellipse

Le code correspondant

La règle de style dans cette page web

Le code SVG

Exemple 2 : dessin animé

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

Le code correspondant

Le code SVG

Extrait de la feuille de style de cette page web

Le paramètre paint-order

Non utilisation de ce paramètre

Le code SVG

Le rendu

Utilisation de paint-order

Le rendu

Le code correspondant

L'attribut xlink:href devient href

Un document SVG avec la spécification SVG 1

Document équivalent avec la spécification SVG 2

La version 2 insérée dans cette page web

Simplifications syntaxiques autorisées par les navigateurs

Les valeurs context-stroke & fill-stroke

Les marqueurs sont des anneaux

Le code correspondant

Variante : les marqueurs sont maintenant des ronds pleins

Le code - extraits

Autres exemples d'animations SVG gérées uniquement en CSS