Des formats ouverts pour des données libres
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.
Sur le même sujet
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 [6] qui sont des formats bitmap. SVG est un format d’image vectoriel.
Tout comme XHTML [7], CSS [8] ou encore MathML [9], SVG est un standard du W3C [10]. Comme pour chaque standard du W3C les spécifications du format SVG [11] sont librement accessibles en ligne. La traduction en français de la recommandation SVG 1.0 disponible sur Yoyodesign.org pourra intéresser le lecteur même s’il ne s’agit pas de la version officielle [12].
XML est un métalangage en ce sens qu’il sert de base pour l’élaboration d’autres langages comme OpenDocument, XUL [13] (le langage de description d’interfaces de Mozilla) ou encore XMPP [14] (utilisé notamment pour la messagerie instantanée et plus connu sous le nom de Jabber [15]). 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 [16] 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 » [17].
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 [18] 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, gardons donc un oeil sur la page consacrée à Firefox sur le site de la Fondation Mozilla Europe [19]).
Parmi les logiciels de dessin vectoriel, on peut citer Sodipodi [20], Inkscape [21] qui est une version dérivée du premier, Scribus [22], Karbon14 [23] de la suite KDE, Skencil [24] (le successeur de Sketch). Le module Draw [25] de la suite Openoffice.org permet lui aussi d’exporter au format SVG.
Signalons que Gimp [26], bien qu’il s’agisse d’un logiciel bitmap sait importer les images au format SVG. Le manipulateur d’images ImageMagick [27] et le générateur de diagrames Dia [28], méritent d’être cité également.
Enfin, le validateur du W3C [29] 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 [30] 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 [31] : « 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 [32]. Sa décision de mettre fin au support de cette application au premier janvier 2008 [33] n’est problemment pas sans lien avec son rachat de la société Macromédia fin 2005 [34]. 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 [35] propriétaire. Enfin, Adobe propose un tutoriel pour produire du SVG à partir de son logiciel Illustrator CS2 [36].
Chez Corel on annonce également le support du format SVG dans la suite graphique CorelDRAW X3 [37] et dans Paint Shop Pro Photo XI [38] (en lecture seule).
A l’occasion de la rédaction de cet article, nous avons testé Sketsa SVG Editor 3.3.1 [39] 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.
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 [40] : <?xml version="1.0" standalone="no"?>
le doctype ou DTD [41] :
<!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 [42] 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)
A 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
[43]. Mozilla Firefox 2 est d’ores et déjà disponible en béta et la version finale devrait sortir dans les jours à venir [44].
<?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).
Divers : du dessin technique au dessin artistique
Musique : une portée avec ses notes
Sport : Ikkyo omote ura - une technique d’Aïkido
Biologie : le schéma en coupe d’une feuille
Mathématiques : un cercle trigonométrique, des cubes, un plan projectif
Technique : un raccord pour les tuyaux d’incendie
Physique : un microscope à balayage électronique, une éolienne, un réacteur à eau pressurisée
Chimie : la fermentation de l’éthanol
Informatique : à l’intérieur d’un ordinateur
Géomatique : des cartes et des plans au format SVG
Un plannisphère
Une carte de France
Les Iles Malouines
Une carte géologique de la lorraine
Le plan du RER
Un plan de la cathédrale de Tarragone en Espagne et celle de Gérone
Et pour fêter la sortie de Mozilla Firefox 2.0
Le logo Mozilla Firefox
Des SVG animés
Une horloge en SVG, [et une autre plus habillée] (avec un fond bitmap en PNG)->http://oskamp.dyndns.org/SiemensClock/SVG/SiemensClock.svg
Le Soleil, la Terre et la Lune en mouvement
Un dessin qui réagit au passage de la souris
Des SVG interactifs
Modifier un texte en réponse à un clic de souris ou faire tourner un rectangle
Agrandir un objet au passage de la souris
Déplacer des objets
Et aussi
Croczilla : une suite de tests qui illustre différentes possibilités du format SVG
Un jeu de cartes en SVG
Openclipart, collection de cliparts libres
Et pour finir
La cartographie du cerveau sous toutes ses facettes !
Sur Wikipédia :
SVG (Scalable Vector Graphics)
Format ouvert
Image matricielle
Dessin vectoriel
W3C (World Wide Web Consortium)
XHTML
CSS
MathML
PNG (Portable Network Graphics)
JPEG (Joint Photographic Experts Group)
TIFF (Tagged Image File Format)
XML (Extensible Markup Language)
XUL (XML-based User interface Language)
XMPP (Extensible messaging and presence protocol) Extensible messaging and presence protocol
Logiciel libre
Mozilla Firefox
Inkscape
Sodipodi
Scribus
Karbon14
Skencil
OpenOffice.org Draw
Gimp
ImageMagick
Dia
Opéra
Adobe Illustrator
CorelDraw
Corel Paint Shop Pro
Sur Apitux.org : le site de l’auteur consacré aux enjeux du logiciel libre, aux standards ouverts et à l’interopérabilité
Formats ouverts et interopérabilité
Les formats de fichiers
ODF : le format OpenDocument
Et aussi
Le portail francophone consacré au SVG
Un cours complet sur XML mis à jour le 30 janvier 2006. Voir et en particulier les chapitres Un format de dessin vectoriel en XML : SVG et L’animation dans le SVG. Le tout est sous licence libre GNU Free Documentation License.
Introduction à SVG statique suivi de Introduction à SVG dynamique, Génération de graphismes vectoriels
avec XSLT, Génération de graphismes vectoriels
avec PHP
La cartographie en mode vectoriel sur le Web : les possibilités de SVG
Un cours sur le langage SVG
Jean-Christophe BECQUET est le fondateur d’APITUX, cabinet spécialisé dans la formation et le conseil en informatique libre. Il est également l’auteur du site Apitux.org consacré aux enjeux du logiciel libre, aux standards ouverts et à l’interopérabilité Cet article est publié selon les termes de la licence Créative Commons BY-SA.
[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 [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] Le format d’image TIFF sur le site d’Adobe (en anglais) [7] XHTML : le langage de balisage hypertexte extensible - spécifications en français [8] CSS : les feuilles de style en cascade - spécifications en français [9] MathML : le langage de balisage mathématique - spécifications en français [10] Le site du W3C (en anglais) [11] Les spécifications SVG 1.1 (en anglais) [12] Les spécifications SVG 1.0 (traduction en français) [13] XUL : le langage de description d’interfaces de Mozilla [14] XMPP : le protocole de communication en temps réel [17] Vous avez dit XML. Mais du vrai XML ? [19] la page consacrée à Firefox sur Mozilla Europe [25] Le module Draw de la suite Openoffice.org [27] ImageMagick (en anglais) [29] Le validateur du W3C (en anglais) [30] SVG dans le navigateur web Opéra (en anglais) [31] Le site d’Adobe consacré au format SVG (en anglais) [32] Adobe SVG Viewer (en anglais) [33] Adobe abandonne son plugin SVG [34] Adobe Completes Acquisition of Macromedia (en anglais) [35] certains préfèrent parler de greffon [36] Creating SVG with Adobe Illustrator CS2 (en anglais) [37] Formats de fichier supportés par CorelDRAW X3 [38] Quels sont les formats pris en charge par Paint Shop Pro Photo XI ? [39] Sketsa SVG Editor (en anglais) [41] Déclarations de Type de Document [42] Mozilla Firefox en Français
Mis en ligne le mardi 24 octobre 2006
Le format SVG est très intéressant et l’organisation Open Source est une très belle initiative. Cependant (standard pour standard), il existe depuis bien longtemps un format vectoriel qui lui reste toujours très nettement supérieur. Il s’agit du VML. Initié au vectoriel avec SVG, je n’ai pas tardé à étudier d’autres alternatives sous toutes les coutures. Il n’est jamais facile de casser les habitudes et de manifester de l’intérêt envers un format étranger lorsqu’on est familiarisé. Cependant, au plus je décortiquai VML et SVG, au plus je fus convaincu que VML avait déjà instauré l’essentiel, avec même beaucoup de supériorité.
Je ne ferai pas ici un rapport complet et détaillé traduisant ces propos, mais je puis avancer que SVG est loin de pouvoir reproduire le détail des capacités offertes par VML dans deux nombreux secteurs comme les dégradés de couleurs, certains effets de transparence d’images, effets 3D, l’intégration directe dans HTML, etc… VML permet aussi dans tous les cas (je le souligne car beaucoup prétendent le contraire) des fichiers beaucoup plus légers que SVG.
SVG offre des avantages sur des fonctions qui ne trouvent pas vraiment leur utilité dans le domaine vectoriel comme les filtres sur images par exemple. Le seul plus du SVG sur VML étant un affichage antialiasing plus fin.
En conclusion rapide, SVG n’est pas déplaisant, mais VML était déjà le résultat d’un travail très sophistiqué, et il est dommage que pour élire un standard vectoriel officiel, des querelles de clochers (…) tendent à mettre au placard les réalisations les plus valeureuses.
Pour SVG, la compatibilité avec les navigateurs pose problème. IE est le seul navigateur sur lequel SVG puisse s’exprimer totalement. OPERA est proche d’IE à ce niveau, mais le rendu des filtres d’images est très douteux. Quand à Firefox, il ne veut du SVG qu’à l’état natif (filtres d’images, animations, remplissages par motifs… impossibles avec Firefox).
Pour VML, c’est encore plus triste… il n’y a qu’Internet Explorer.
Un site intéressant pour ceux qui n’ont pas de parti pris pour SVG : http://midiwebconcept.free.fr/
- Des agendas partagés en toute liberté avec Webcalendar
- Le format SVG
- Jabber : la messagerie instantanée libre et bien plus encore
- Conférence : Y a t-il une économie du libre ?
- Le format Opendocument
Generationcyb.net est motorisé par Spip 1.9.2c
associé à un squelette graphique Rizom
