Elements structurels en SVG.

Le texte avec 'tspan'.

Rappel sur les déclarations de jeu de caractères.

Dans un fichier HTML5:

<meta charset="UFT8" />
								

Dans un fichier XML:

<?xml version="1.0" encoding='UFT8'?>
								

Les trois balises pour inclure du texte sont: 'text', 'tspan' et 'textPath'. La balise 'text' permet d'inclure du texte dans un fichier graphique et peut avoir des balises enfants 'tspan'. Il a pour attributs, x qui détermine sa position horizontale (point d'ancrage), par défaut la valeur est 0 et y pour la postion verticale.

<svg width="300" height="100" viewBox="0 0 300 100">
	<style type="text/css">![CDATA[
		svg{
			display: block;
			margin: 0 auto;
			border: solid 2px #5BB728;
			background-color: #D4D5E3;
			margin-bottom: 20px;
			}
		text {
			font-family: "Fredoka One", cursive;
			font-size: 0.8em;
			fill: #32A69D;
			}
		tspan {
			font-family: "Fredoka One", cursive;
			font-size: 1em;
			}
		]]</style>

	<text x="15" y="20">Voici un texte en SVG.
	<tspan fill="#D16DBA">Et ici un autre texte</tspan>
	</text>
	<text x="15" y="40">Un autre texte.</text>
</svg>
								

Nous donnes:

Voici un texte en SVG. Et ici un autre texte Un autre texte.

Pour la taille de la police, 'tspan' hérite de sa balise parente 'text', ici 'tspan' prend 100% de la valeur de 'text'. L'attribut color ne fonctionne pas sur les polices, il faut utiliser: "fill" placé soit dans la CSS ou bien dans directement dans la balise 'text' ou 'tspan'. Tout comme l'ensemble des attributs du texte. La balise 'text' ne force pas un passage à la ligne, se sont les attributs X et Y qui définissent la position du bloc de texte. La balise 'tspan' doit être incluse dans la balise 'text' ! Il faut que chaque balise 'text' doit posséder des attributs X et Y pour son positionnement et donc son affichage.


Gouper les éléments avec 'g'.

Il est possible de regrouper plusieurs tracés et d'en faire un seul objet tout comme le fond les logiciels d'édition graphique qui regroupent plusieurs éléments dans un même layer. Si des styles sont appliqués dans l'élément 'g', alors, tous les éléments enfants contenus dans cette balise se verront affectés par ces styles. On peut aussi, affecter un 'id' et / ou une classe à cette balise. Les styles auraient pu être ainsi définis aussi bien dans une feuille de style interne ou externe.

<svg width="400px" height="120px" viewBox="0 0 400 120">

	<g id="persoBleu" style="fill: #55A0FF; stroke-width: 1; stroke: #170BF5;">
		<desc›Personnage bleu</desc>
		<circle cx="60" cy="25" r="15" />
		<line x1="60" y1="40" x2="60" y2="80" />
		<line x1="30" y1="60" x2="90" y2="60" />
		<line x1="60" y1="80" x2="30" y2="100" />
		<line x1="60" y1="80" x2="90" y2="100" />
	</g>

	<g id="persoRose" style="fill: #D16DBA; stroke-width: 1; stroke: #9A3A75;">
		<desc>Personnage rose</desc>
		<circle cx="160" cy="25" r="15" />
		<line x1="160" y1="40" x2="160" y2="60" />
		<line x1="140" y1="50" x2="180" y2="50" />
		<polyline points="160 60, 120 90, 190 90, 160 60" />
	</g>
</svg>
								

Ce qui affiche:

Personnage bleu Personnage rose

Réutiliser des éléments avec 'use'.

L'élément 'use' permet de réutiliser ou de copier tout élément via une URI 'xlink:href=#id-de-mon-élément'. Il peut s'agir un élément isolé ou bien d'un groupe contenu dans un élément 'g'. On doit définir un couple de coordonnées x et y afin de placer l'élément. Les éléments utilisables par 'use' doivent être mis dans une balise 'defs', définitions. Les éléments compris dans ces balises ne s'affichent pas. Par contre, les styles définis dans 'g' ou dans les éléments ne peuvent être réécrit dans 'use'.

<svg width="400px" height="120px" viewBox="0 0 400 120">
	<defs>
		<g id="persoBleu" style="fill: #55A0FF; stroke-width: 1; stroke: #170BF5;">
			<desc>Personnage bleu</desc>
			<circle cx="60" cy="25" r="15" />
			<line x1="60" y1="40" x2="60" y2="80" />
			<line x1="30" y1="60" x2="90" y2="60" />
			<line x1="60" y1="80" x2="30" y2="100" />
			<line x1="60" y1="80" x2="90" y2="100" />
		</g>

		<g id="persoRose" style="fill: #D16DBA; stroke-width: 1; stroke: #9A3A75;">
			<desc>Personnage rose</desc>
			<circle cx="160" cy="25" r="15" />
			<line x1="160" y1="40" x2="160" y2="60" />
			<line x1="140" y1="50" x2="180" y2="50" />
			<polyline points="160 60, 120 90, 190 90, 160 60" />
		</g>

		<g id="couple">
			<desc>Je reunie mes deux figures dans un nouveau groupe</desc>
			<use xlink:href="#persoBleu" />
			<use xlink:href="#persoRose" />
		</g>
	</defs>

	<use xlink:href="#persoBleu" x="20" y="10" />
	<use xlink:href="#persoRose" x="20" y="10" />

	<use xlink:href="#couple" x="160" y="10" />

</svg>

								

Ce qui affiche:

Personnage bleu Personnage rose Je reunie mes deux figures dans un nouveau groupe

Attention ! Les URIs faisant références à des fichiers externes ne sont pas supportées par tous les navigateurs !


Documents et sources:

#

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

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11