Dessin vectoriel : le format SVG

SVG (Scalable Vector Graphics) est un format de fichier ouvert [1] pour le dessin vectoriel [2] basé sur la technologie XML et définit par le W3C. Je vous invite à travers ces quelques lignes de découvrir cette technologie trop peu connue.

Images vectorielles et images bitmap

Il existe 2 manières de représenter des images dans un ordinateur. Les images bitmap [3] sont construites à partir d’une matrice de points, on affecte une couleur à chaque point. Les images vectorielles consistent en un assemblage d’objets géométriques élémentaires (points, lignes, cercles) à l’intérieur d’un repère du plan (mais si, souvenez-vous les cours de maths au collège…). Parmi les formats d’images les plus connus, on trouve PNG [4] , JPEG [5] et TIFF qui sont des formats bitmap. SVG est un format d’image vectoriel.

Un standard du W3C

Tout comme XHTML [6], CSS [7] ou encore MathML [8], SVG est un standard du W3C [9]. Comme pour chaque standard du W3C les spécifications du format SVG [10] sont librement accessibles en ligne.

Vous avez dit XML ?

XML est un métalangage en ce sens qu’il sert de base pour l’élaboration d’autres langages comme OpenDocument, XUL (le langage de description d’interfaces de Mozilla) ou encore XMPP [11] (utilisé notamment pour la messagerie instantanée et plus connu sous le nom de Jabber). L’un des principaux objectifs de la technologie XML est de faciliter l’échange de contenus entre systèmes d’informations hétérogènes, notamment sur Internet. XML est donc conçue pour supporter une très grande variété d’applications tout en restant lisible par l’homme. L’article XML en dix points [12] du W3C fournit une très bonne synthèse des concepts de base et donne un aperçu global des importantes applications dérivées d’XML. SVG hérite bien évidemment de ces caractéristiques.

Une précision s’impose cependant ici : ce n’est pas l’utilisation de la technologie XML qui confère au SVG le statut de format ouvert mais bien la publication par le W3C de ses spécifications et la possibilité qui nous est offerte de l’utiliser sans restrictions. Ainsi, comme l’explique Thierry STOEHR sur l’excellent Formats-ouverts.org : le XML a parfois bon dos.

Support du format SVG

Des solutions libres

Le format SVG est supporté par de nombreux logiciels. A l’instar d’autres standards ouverts comme le format OpenDocument évoqué plus haut, on trouve de très bonnes implémentations de SVG dans l’univers des logiciels libres. Le navigateur web Mozilla Firefox sait afficher le format SVG depuis sa version 1.5 sortie le 29 novembre 2005 (signalons au passage que la version 2 est annoncée pour les prochains jours).

Parmi les logiciels de dessin vectoriel, on peut citer Sodipodi [13], Inkscape [14] qui est une version dérivée du premier, Scribus [15], Karbon14 de la suite KDE, Skencil [16] (le successeur de Sketch). Le module Draw de la suite Openoffice.org permet lui aussi d’exporter au format SVG.

Signalons que Gimp, bien qu’il s’agisse d’un logiciel bitmap sait importer les images au format SVG. Le manipulateur d’images ImageMagick [17] et le générateur de diagrames Dia, méritent d’être cité également.

Enfin, le validateur du W3C [18] permet de vérifier la conformité d’un document SVG, c’est à dire qu’il ne comporte pas d’erreurs par rapport aux spécifications.

Des solutions propriétaires

Du côté des logiciels propriétaires, le navigateur web Opéra de la société éponyme supporte SVG depuis sa version 8. La page de leur site consacrée au SVG s’ouvre sur une citation de Tim Berners-Lee, l’inventeur du web Things to watch : SVG - Scalable Vector Graphics - at last, graphics which can be rendered optimally on all sizes of device : Parmi les choses à voir : SVG - Scalable Vector Graphics - enfin, les images peuvent être affichées de manière optimale quelque que soit la taille du dispositif de consultation.

La société Adobe consacre une partie de son site au format SVG, on peut y lire : Open standards promote choice, provide lower-cost solutions, and facilitate interoperability, ce qui pourrait se traduire par : les standards ouverts favorisent le choix, offrent des solutions économiques, et facilitent l’interopérabilité. Adobe fut parmi les premières à proposer un visualisateur SVG : Adobe SVG Viewer. Sa décision de mettre fin au support de cette application au premier janvier 2008 n’est probablement pas sans lien avec son rachat de la société Macromédia fin 2005. En effet, cette dernière est à l’origine - faut-il le rappeler - de la technologie propriétaire Flash face à laquelle SVG offre une alternative ouverte avec tous les avantages que cela comporte. Cette décision est regrettable mais on peut raisonnablement penser que d’ici là le niveau de maturité des solutions libres rendra inutile le recours à un plugin [19] propriétaire. Enfin, Adobe propose un tutoriel pour produire du SVG à partir de son logiciel Illustrator CS2.

Chez Corel on annonce également le support du format SVG dans la suite graphique CorelDRAW X3 et dans Paint Shop Pro Photo XI (en lecture seule).

À l’occasion de la rédaction de cet article, nous avons testé Sketsa SVG Editor 3.3.1 de l’éditeur indonésien Kiyut. Sketsa est un logiciel de dessin vectoriel basé sur SVG. Le choix du langage Java en fait une application multiplateforme.

Les standards ouverts favorisent le choix

Cet inventaire qui n’a absolument pas la prétention d’être exhaustif met en évidence une grande diversité dans l’offre logicielle autour du format SVG. Nous avions fait le même constat pour le format OpenDocument dans le domaine de la bureautique.

Chez APITUX, on vous dira de préférer les logiciels libres mais le plus important, c’est bien d’avoir le choix. Nous voyons bien ici comment les formats ouverts favorisent le choix et permettent une émulation autour d’un standard commun en laissant libre le jeu de la concurrence.

À l’intérieur d’un fichier SVG

Voici le code d’un fichier SVG élémentaire : on se contente d’afficher un rectangle.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Un rectangle</desc>
<rect x="30" y="30" width="100" height="50" />
</svg>

Notez la structure globale d’un fichier SVG.

Au début du fichier, on trouve dans l’ordre :

la déclaration XML :

<?xml version="1.0" standalone="no"?>

le doctype ou DTD :

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

la racine :

<svg>

avec la déclaration de l’espace de nom :

xmlns="http://www.w3.org/2000/svg"

Ensuite, la balise :

<desc>

qui contient une description du contenu de l’image et la balise :

<rect>

dessine le rectangle. Celui ci est défini par les coordonnées de son coin supérieur gauche en x et en y, sa largeur (width) et sa hauteur (height).

Avant de poursuivre, munissez-vous de l’excellent navigateur web Mozilla Firefox puis visualisez le résultat sur Apitux.net : un rectangle.

Découvrons le format SVG pas à pas à travers quelques exemples très simples

Un cercle avec une couleur de remplissage, une couleur et une épaisseur de bordure
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Un cercle rempli en rouge et entoure en noir avec une epaisseur de 3</desc>
<circle cx="50" cy="50" r="30" fill="red" stroke="black" stroke-width="3" />
</svg>

Notez la balise

<circle>

qui dessine un cercle à partir des coordonnées de son centre en x et en y et de son rayon r. Les attributs

fill="red" stroke="black" stroke-width="3"

définissent respectivement la couleur de remplissage (fill), la couleur (stroke) et l’épaisseur de bordure (stroke-width).

Voir le résultat sur Apitux.net : un cercle avec une couleur de remplissage, une couleur et une épaisseur de bordure.

Le bonhomme APITUX composé de formes élémentaires réunies avec la balise
<g>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Plusieurs rectangles groupes</desc>
<g id="apitux">
 <rect x="62" y="50" width="16" height="15" />
 <rect x="81" y="61" width="9" height="6" />
 <rect x="50" y="67" width="40" height="10" />
 <rect x="50" y="77" width="9" height="6" />
 <rect x="61" y="77" width="18" height="8" />
 <rect x="61" y="85" width="29" height="10" />
 <rect x="61" y="95" width="9" height="1" />
 <rect x="81" y="95" width="9" height="9" />
 <rect x="55" y="96" width="15" height="9" />
</g>
</svg>

Notez la balise

<g>

qui défini un groupe.

Voir le résultat sur Apitux.net : le bonhomme APITUX composé de formes élémentaires réunies avec la balise g.

Le bonhomme APITUX rendu par tracé avec la balise path
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Un chemin</desc>
<path id="apitux" d="M 62,50 L 78,50 78,65 62,65 Z M 81,61 L 90,61 90,77 79,77 79,85 90,85 90,104 81,104 81,95 70,95 70,104 55,104 55,95 61,95 61,77 59,77 59,83 50,83 50,67 81,67 Z" />
</svg>
Notez la balise
<path>

qui défini un chemin et les commande M (move to) qui déplace le curseur jusqu’au point suivant, L qui trace une ligne droite jusqu’au point suivant et Z qui ferme le tracé.

Voir le résultat sur Apitux.net : le bonhomme APITUX rendu par tracé avec la balise path.

Le bonhomme APITUX avec une feuille de styles
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="avec-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Avec une feuille de styles</desc>
<path id="apitux" class="logo" d="M 62,50 L 78,50 78,65 62,65 Z M 81,61 L 90,61 90,77 79,77 79,85 90,85 90,104 81,104 81,95 70,95 70,104 55,104 55,95 61,95 61,77 59,77 59,83 50,83 50,67 81,67 Z" />
</svg>

La feuille de styles :

.logo{
fill: #ff8c00;
}

Notez l’appel à la feuille de style

<?xml-stylesheet href="avec-styles.css" type="text/css"?>

au début du fichier. Pour appliquer le style au bonhomme, on lui ajoute l’attribut

class="logo"

Voir le résultat sur Apitux.net : le bonhomme APITUX avec une feuille de styles, la feuille de styles

Le bonhomme APITUX avec une translation de 50 pixels en x et en y
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="avec-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Une translation</desc>
<path id="apitux" class="logo" transform="translate(50,50)" d="M 62,50 L 78,50 78,65 62,65 Z M 81,61 L 90,61 90,77 79,77 79,85 90,85 90,104 81,104 81,95 70,95 70,104 55,104 55,95 61,95 61,77 59,77 59,83 50,83 50,67 81,67 Z" />
</svg>

Notez l’attribut

transform="translate(50,50)"

Voir le résultat sur Apitux.net : le bonhomme APITUX avec une translation de 50 pixels en x et en y

Le bonhomme APITUX redimensionné avec un facteur 3
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="avec-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Un changement d'echelle</desc>
<path id="apitux" class="logo" transform="scale(3)" d="M 62,50 L 78,50 78,65 62,65 Z M 81,61 L 90,61 90,77 79,77 79,85 90,85 90,104 81,104 81,95 70,95 70,104 55,104 55,95 61,95 61,77 59,77 59,83 50,83 50,67 81,67 Z" />
</svg>

Notez l’attribut

transform="scale(3)"

Voir le résultat sur Apitux.net : le bonhomme APITUX redimensionné avec un facteur 3.

Le bonhomme APITUX avec une rotation de -30°
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="avec-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Une rotation</desc>
<path id="apitux" class="logo" transform="rotate(-30)" d="M 62,50 L 78,50 78,65 62,65 Z M 81,61 L 90,61 90,77 79,77 79,85 90,85 90,104 81,104 81,95 70,95 70,104 55,104 55,95 61,95 61,77 59,77 59,83 50,83 50,67 81,67 Z" />
</svg>

Notez l’attribut

transform="rotate(-30)"

Voir le résultat sur Apitux.net : le bonhomme APITUX avec une rotation de -30°.

Le bonhomme APITUX avec plusieurs transformations à la fois
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="avec-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Plusieurs transformations a la fois</desc>
<path id="apitux" class="logo" transform="translate(50,50),scale(3),rotate(-30)" d="M 62,50 L 78,50 78,65 62,65 Z M 81,61 L 90,61 90,77 79,77 79,85 90,85 90,104 81,104 81,95 70,95 70,104 55,104 55,95 61,95 61,77 59,77 59,83 50,83 50,67 81,67 Z" />
</svg>

Notez l’attribut

transform="translate(50,50),scale(3),rotate(-30)"

où l’on retrouve les différentes transformations précédentes séparées par des virgules.

Voir le résultat sur Apitux.net : le bonhomme APITUX avec plusieurs transformations à la fois.

Le bonhomme APITUX avec une transparence
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="avec-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Une transparence</desc>
<path id="apitux" class="logo" transform="translate(50,50),rotate(-30),scale(3)" opacity="0.5" d="M 62,50 L 78,50 78,65 62,65 Z M 81,61 L 90,61 90,77 79,77 79,85 90,85 90,104 81,104 81,95 70,95 70,104 55,104 55,95 61,95 61,77 59,77 59,83 50,83 50,67 81,67 Z" />
</svg>

Notez l’attribut

opacity="0.5"

Voir le résultat sur Apitux.net : le bonhomme APITUX avec une transparence.

Le bonhomme APITUX avec un dégradé
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="avec-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Un degrade</desc>
<defs>
<linearGradient id="mondegrade" gradientUnits="objectBoundingBox">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<path id="apitux" transform="translate(50,50),rotate(-30),scale(3)" fill="url(#mondegrade)" d="M 62,50 L 78,50 78,65 62,65 Z M 81,61 L 90,61 90,77 79,77 79,85 90,85 90,104 81,104 81,95 70,95 70,104 55,104 55,95 61,95 61,77 59,77 59,83 50,83 50,67 81,67 Z" />
</svg>

Notez la définition du dégradé entre les balises

<defs>

l’attribut

fill="url(#degrade)"

pour l’appliquer et la suppression de l’attribut class="logo" pour le laisser apparaître (sinon, il est masqué par le style

fill: #ff8c00;)

Voir le résultat sur Apitux.net : le bonhomme APITUX avec un dégradé.

Définir un motif réutilisable avec la balise <symbol>
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="avec-deux-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <desc>Definition et utilisation d'un symbole</desc>
 <symbol id="apitux">
 <circle cx="73" cy="77" r="45" fill="white" stroke="black" stroke-width="1" />
 <path d="M 62,50 L 78,50 78,65 62,65 Z M 81,61 L 90,61 90,77 79,77 79,85 90,85 90,104 81,104 81,95 70,95 70,104 55,104 55,95 61,95 61,77 59,77 59,83 50,83 50,67 81,67 Z" />
 </symbol>
<use x="50" y="300" class="logo" xlink:href="#apitux"/>
<use x="100" y="200" class="logo" xlink:href="#apitux"/>
<use x="150" y="100" class="nouveau" xlink:href="#apitux"/>
</svg>

Notez l’ajout de l’espace de nom

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

Le motif est défini entre les balises

<symbol>

La balise

<use>

permet de faire appel au motif. On peut ajouter des attributs pour modifier l’apparence du motif.

Voir le résultat sur Apitux.net : un motif réutilisable.

Un peu d’interactivité : le bonhomme APITUX réactif au clic de souris
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="avec-deux-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Reaction au clic de souris</desc>
<script type="text/ecmascript"> <![CDATA[
 function restyle(evt) {
 var cible = evt.target;
 cible.setAttribute("class", "nouveau");
 }
]]> </script>
<path onclick="restyle(evt)" id="apitux" class="logo" transform="translate(50,50),scale(3),rotate(-30)" d="M 62,50 L 78,50 78,65 62,65 Z M 81,61 L 90,61 90,77 79,77 79,85 90,85 90,104 81,104 81,95 70,95 70,104 55,104 55,95 61,95 61,77 59,77 59,83 50,83 50,67 81,67 Z" />
</svg>

Notez la fonction restyle imbriquée dans une balise

<script>

Cette fonction récupère l’objet concerné par le clic et change la valeur de son attribut class. Pour que l’objet réagisse au clic de souris, on lui rajoute l’attribut

onclick="restyle(evt)"

Voir le résultat sur Apitux.net : le bonhomme APITUX réactif au clic de souris (cliquez sur le bonhomme !).

Le bonhomme APITUX réactif au passage de la souris
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="avec-deux-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<desc>Reaction au passage de la souris</desc>
<script type="text/ecmascript"> <![CDATA[
 function dorestyle(evt) {
 var cible = evt.target;
 cible.setAttribute("class", "nouveau");
 }
 function undorestyle(evt) {
 var cible = evt.target;
 cible.setAttribute("class", "logo");
 }
]]> </script>
<path onmouseover="dorestyle(evt)" onmouseout="undorestyle(evt)" id="apitux" class="logo" transform="translate(50,50),scale(3),rotate(-30)" d="M 62,50 L 78,50 78,65 62,65 Z M 81,61 L 90,61 90,77 79,77 79,85 90,85 90,104 81,104 81,95 70,95 70,104 55,104 55,95 61,95 61,77 59,77 59,83 50,83 50,67 81,67 Z" />
</svg>

On utilise cette fois les l’attributs

onmouseover="dorestyle(evt)"

et

onmouseout="undorestyle(evt)"

La balise

</script>

contient la définition des fonctions dorestyle et undorestyle.

Voir le résultat sur Apitux.net : le bonhomme APITUX réactif au passage de la souris (survolez le bonhomme avec la souris !).

Bonus : un texte sur une forme (seulement visible avec Mozilla Firefox 2.0)

À l’heure où j’écris ces lignes, la version courante de Mozilla Firefox est la 1.5.0.7. Une des nouveautés de la version 2.0 sera le support de la fonction

svg:textPath

Mozilla Firefox 2 est d’ores et déjà disponible en béta et la version finale devrait sortir dans les jours à venir.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <desc>Un texte sur une forme</desc>
 <defs>
 <path id="maforme" d="M25, 100 C10,10 175,10 175,100" />
 </defs>
<text fill="#ff8c00">
<textPath xlink:href="#maforme">APITUX : le choix du libre</textPath>
</text>
</svg>

Voir le résultat sur Apitux.net : un texte sur une forme (nécessite Mozilla Firefox 2.0).

Juste pour le plaisir : une petite sélection d’utilisations du SVG

Divers : du dessin technique au dessin artistique
Géomatique : des cartes et des plans au format SVG
Et pour fêter la sortie de Mozilla Firefox 2.0
  • Le logo Mozilla Firefox
Des SVG animés
Des SVG interactifs
Et aussi

Pour en savoir plus

Sur Wikipédia :
Et aussi

Voir également nos articles consacrés au format OpenDocument pour la bureautique et au protocole Jabber pour la messagerie instantanée.

Comme tous les supports de formation d'APITUX, ces articles sont partagés sous licence Creative Commons BY-SA.

Voir aussi

Notes

[1] Pour une définition précise de la notion de format ouvert, voir le premier article de notre série Des formats ouverts pour des données libres : Bureautique : le format Opendocument

[2] Dessin vectoriel

[3] Image matricielle

[4] La page officielle du format PNG sur le site du W3C (en anglais)

[5] Le site officiel du « Joint Photographic Experts Group » (en anglais)

[6] XHTML : le langage de balisage hypertexte extensible - spécifications en français

[7] CSS : les feuilles de style en cascade - spécifications en français

[8] MathML : le langage de balisage mathématique - spécifications en français

[9] Le site du W3C (en anglais)

[10] Les spécifications SVG 1.1 (en anglais)

[11] XMPP : le protocole de communication en temps réel

[12] XML en 10 points

[13] Sodipodi sur wikipédia

[14] Inkscape

[15] Scribus (en anglais)

[16] Skencil (en anglais)

[17] ImageMagick (en anglais)

[18] Le validateur du W3C (en anglais)

[19] certains préfèrent parler de greffon