Eskerrik asko SVG

Publié le Mardi 18 Octobre 2005 à Helsinki

Voici comment faire un Lauburu (la croix basque) en SVG :

1. Préparons le document avec l'en-tête, la déclaration, l'élément racine et son espace de nom. Les familiers du XHTML ne seront pas perdus.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128">
...
</svg>

Notre image aura 128 pixels de côté.

2. Créons la branche du Lauburu et plaçons-la dans un conteneur afin de l'utiliser plus tard. Cette branche n'ayant pas une forme canonique, nous devons la dessiner point par point.

<defs>
<path id="branche" d="M 33,49 C 50,49 64,35 66,18 
C 64,16 58,32 49,32 C 40,32 33,25 33,16 
L 33,16 C 33,7 25,0 16,0 C 7,0 0,7 0,16 
C 0,17 0,18 0,18 C 1,35 16,49 33,49 z" />
</defs>

3. Utilisons la branche créée à quatre reprises pour former la croix. Remarquons que chacun des éléments doit subir une translation et une rotation; à condition de maîtriser les espaces vectoriels, une matrice unique aurait suffit pour effectuer ces transformations.

<use xlink:href="#branche" transform="translate(0 44) rotate(0 64 64)" />
<use xlink:href="#branche" transform="translate(-40 0) rotate(90 64 64)" />
<use xlink:href="#branche" transform="translate(0 -36) rotate(180 64 64)" />
<use xlink:href="#branche" transform="translate(40 0) rotate(270 64 64)" />

4. N'oublions pas de préciser dans l'élément racine l'espace de nom du préfixe xlink.

xmlns:xlink="http://www.w3.org/1999/xlink"

Et voilà ! Nous avons un beau Lauburu (un peu bancal je l'admet). Mais nous ne résistons pas à l'envie de l'égayer un peu :

- en l'inscrutant dans un cercle (à placer avant les éléments use):

<circle cx="64" cy="64" r="64" />

- et en l'agrémentant d'une feuille de style interne :

<style type="text/css">
#branche { fill: green; }
circle { fill: none; stroke: black; stroke-width: 6; }
</style>

Voici le résultat :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128">
	<style type="text/css">
	#branche {
		fill: green;
	}
	circle {
		fill: none; 
		stroke: black; 
		stroke-width: 6;
	}
	</style>
	<defs>
		<path id="branche" d="M 33,49 C 50,49 64,35 66,18 C 64,16 58,32 49,32 C 40,32 33,25 33,16 L 33,16 C 33,7 25,0 16,0 C 7,0 0,7 0,16 C 0,17 0,18 0,18 C 1,35 16,49 33,49 z" />
	</defs>
	<circle cx="64" cy="64" r="64" />
	<use xlink:href="#branche" transform="translate(0 44) rotate(0 64 64)" /> 
	<use xlink:href="#branche" transform="translate(-40 0) rotate(90 64 64)" />
	<use xlink:href="#branche" transform="translate(0 -36) rotate(180 64 64)" />
	<use xlink:href="#branche" transform="translate(40 0) rotate(270 64 64)" />
</svg>

Voici le fichier final : mon Lauburu en SVG (oui, il s'agit bien d'une image...).

Je ne suis pas le premier à m'être adonné à cet exercice, j'ai été au moins précédé par une personne : Aitor Avila qui a publié son Lauburu dans OpenClipart.

Même en prenant en compte la présence de metas en RDF chez Aitor, on est frappé par la taille de son fichier qui est six fois plus imposant que le mien.
Cette différence illustre l'éternel dilemme du codage à la main ou via un éditeur (même d'excellente facture comme Sodipodi).

Même si le SVG, comme la plupart des formats XML, n'a pas à être codé par un être humain, cette tâche s'avère pertinente lorsque le projet est simple.

Commentaires

Soumis par Éric le mer, 19/10/2005 - 12:48

Bel exercice de style ! Mais dis moi Pierre, quel est le rapport entre la création d'images en SVG et le regard Hypnotique d'un magnifique chat dans un décors orange pastel ?

Soumis par pierre le mer, 19/10/2005 - 13:42

Les illustrations des billets concernant l'informatique sont souvent purement décoratifs.
C'est une très belle photo prise par Jean qui a décidément du talent pour photographier les animaux.

Soumis par Janny le ven, 21/10/2005 - 08:50

Je n'ai rien compris à la démonstration , mais j'ai reconnu avec émotion note belle Séga, l'horloge aux oiseaux qui vous rendaient fous, le couple sculpté qui danse sur la cheminée , l'atmosphère orangée de ce coin perdu de Chalosse

Soumis par pierre le lun, 31/10/2005 - 22:43

Oui, j'ai un petit pincement au cœur car j'aimais bien cette maison.

Enfin maman, maintenant que tu édites à la main du XHTML pour rédiger ton manuel SAP, tu fais du XML sans le savoir.
Et ma démonstration ne doit pas te paraitre si obscure.

Soumis par Jean le lun, 31/10/2005 - 23:24

J'aimais bien cette maison !!! J'aime, j'aimais et j'aimerai... les mots passent, l'amour reste, toujours différent, surprenant, nourrissant...
Cette maison a traversé deux siècles de rencontres. Tu en fais pleinement partie. Voilà pourquoi je peux affirmer qu'elle t'aime toujours. J'aimais cette maison... Juste une question de concordance des temps que tu auras tout le loisir de corriger dans ta prochaine visite.

Nous t'attendons Pierre...

D'ailleurs, ce serait bien que tu puisses, avec les trois autres "petits" trouver une date pour faire la fête ensemble.

Ajouter un commentaire