Intégrer du SVG dans HTML.

Fichier SVG externe.

En HTML5, on inclut un fichier SVG externe avec la balise ‹picture› comprenant conjointement les balises 'source' et 'img' comme suit:

<picture>
	<source type="images/svg+xml" srcset="url-vers-fichier.svg" />
	<img href="fichier-remplacement.png" title="nom fichier" alt="une petite description" />
</picture>
								

Ou bien:

<img src="chemin/fichier.svg" title="nom fichier" alt="une petite description" />
								

Et par la balise object:

<object data="fichier.svg" type="images/svg+xml"></object>
								

Et via la CSS de cette manière:

.fond-page { 
background-image: url("fichier.svg")
}
								

Fichier SVG interne.

Le fichier SVG peut être aussi directement inclus dans le code de la page HTML:

<body>
	<svg xmlns="http://www.w3.org/2000/svg" 
	xmlns:xlink="http://www.w3.org/1999/xlink 
	width="100" height="100" viewBox="0 0 100 100">
		/* déclaration xmlns demandée par Midori ! */	
		/* xlink si des liens internes */
	</svg>
</body>
								

Que le fichier SVG soit applelé via la balise IMG ou bien par le biais d'un CSS, si aucune dimension n'est spécifiée, ce sont les dimensions intrinsèques du fichier (viewport et viewBox) qui seront utilisées. Si une seule dimension est utilisée (widht ou height), l'autre sera déterminée en fonction du viewBox et conservera son aspect ratio. La mise à l'échelle se fera donc automatiquement.

L'avantage d'inclure le SVG dans la page est d'éviter une requête suplémentaire sur le serveur. De plus, il est possible de mettre directement une feuille de style dans le code SVG. Pour servir du SVG, faire attention à ce que le serveur web soit configuré correctement pour prendre en charge les fichiers avec une extension .svg et que le header du type média (image/svg+xml) soit activé.


CSS et SVG.

CSS interne au SVG ou dans le 'head'.

La CSS peut s'inclure directement dans le code SVG au sein d'une page HTML comme suit: (La place du code CSS dans le SVG n'a pas d'importance, c'est juste une convention que de le mettre dans les blocs de 'defs').

<body>
	<svg width="100" height="100" viewBox="0 0 100 100">
		<defs>
			<style type="text/css">![CDATA[
				circle  { 
					fill: red; /* accepte les comms */							
					}
			]]</style>
		</defs>	
		<circle id="lune" cx="50" r="70" />
	</svg>
</body>
								

Ou bien:

<style type="text/css">
	circle  { 
	fill: red;
	}
	#lune {
		...	
	}
	</style>
</head>
<body>
	<svg width="100" height="100" viewBox="0 0 100 100" >
		<circle id="lune" cx="50" r="70" />
	</svg>
</body>
								

CSS externe au SVG.

	<link rel="stylesheet" type="text/css" href="style-pour-svg">
</head>
<body>
	<svg width="100" height="100" viewBox="0 0 100 100" >
		<defs>
			<circle id="lune" cx="50" r="70" />
		</defs>
	</svg>
</body>
								

Ne pas oublier l'ordre de priorité dans l'application des styles en CSS ! On commence par le fichier externe, puis par le code compris entre les balises 'head' de la page HTML, puis par le code dans le SVG. Tout comme pour le SVG en lui-même, il est préférable, si possible d'inclure la CSS appliquée au SVG, au lieu d'utiliser une CSS externe afin de limiter les requêtes...

CSS interne à un SVG standalone.

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="fr" 
	xmlns:xlink="http://www.w3.org/1999/xlink"
	width="100px" height="100px" viewbox="0 0 100 100">
	<title>Mon svg</title>
	<defs>
		<style type="text/css"›![CDATA[
			circle  { 
				fill: red;
			} ]]
		</style>
	<defs/>
	<circle id="lune" cx="50" r="70" />
</svg>
								

Style dans les éléments SVG.

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="fr" xmlns:xlink="http://www.w3.org/1999/xlink"
	width="100px" height="100px" viewbox="0 0 100 100">
	<title>Mon svg</title>
	<circle id="lune" cx="50" r="70" style="fill: none; stroke: pink;" />
</svg>
								

Documents et sources:

Article sur www.w3.org

Keep and Try it ! Dernière mise à jour: 22/10/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11