generationcyb.net pointcyb lien vers les points cyb
Inscription à la lettre d'information | Fil infos rss 

 

Accueil > Boîte à outils > Logiciels libres

Le format SVG


Version imprimable Version imprimable


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.



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 [6] qui sont des formats bitmap. SVG est un format d’image vectoriel.

Un standard du W3C

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].

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 [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].

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 [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.

A 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 [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).

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

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 !

Pour en savoir plus

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

A propos de l’auteur

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

[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] 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

[15] Jabber

[16] XML en 10 points

[17] Vous avez dit XML. Mais du vrai XML ?

[18] SVG dans Mozilla Firefox

[19] la page consacrée à Firefox sur Mozilla Europe

[20] Sodipodi (en anglais)

[21] Inkscape

[22] Scribus

[23] Karbon14 (en anglais)

[24] Skencil (en anglais)

[25] Le module Draw de la suite Openoffice.org

[26] Gimp (en anglais)

[27] ImageMagick (en anglais)

[28] Dia (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)

[40] Déclaration XML

[41] Déclarations de Type de Document

[42] Mozilla Firefox en Français

[43] Quoi de neuf dans cette version Beta 2 de Firefox 2 ?

[44] Fête de lancement de Firefox 2 à Paris le 26/10/2006

Mis en ligne le mardi 24 octobre 2006



Répondre à cet article

Forum

Des mêmes auteurs

apitux | (APITUX) : Formateur et conseil en informatique libre. Auteur du site http://www.apitux.org/ consacré aux enjeux du logiciel libre, aux standards ouverts et à l’interopérabilité. APITUX vous accompagne dans votre migration vers le logiciel libre.

- Jabber : la messagerie instantanée libre et bien plus encore
- Le format Opendocument
- Le format SVG
- Des agendas partagés en toute liberté avec Webcalendar

Contact | Plan du site | Espace privé
Dernier ajout : vendredi 24 mai 2013 | 821 articles sur ce site.

Generationcyb.net est motoris´ par Spip 1.9.2e associ´ a un squelette spip Rizom
Sauf indication, les articles sont mis a disposition sous un contrat Creative Commons
Ministere en charge de la jeunesse Institut national de la jeunesse et de l'education populaire Information jeunesse Centre d'information et de documentation jeunesse