SVG

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Origine et but

  • SVG traduit: Graphiques Vectoriels Adaptables
  • SVG est un standard W3C (en XML) et s’intègre bien aux autres formats W3C.
  • http://www.w3.org/TR/SVG/

De la spécification: "SVG est un langage de description de graphiques bi-dimensionnels en XML. SVG admet trois types d’objets graphiques : des contours graphiques vectoriels (par exemple, des tracés consistant en lignes droites et courbes), des images et du texte. Les objets graphiques peuvent être regroupés, stylés, transformés et composés dans des objets précédemment rendus. L’ensemble de fonctions comprend des transformations imbriquées, des tracés de rognage, des masques basés sur la couche alpha et des objets de gabarit.

Les dessins SVG peuvent être interactifs et dynamiques. On peut définir et déclencher des animations, soit déclarativement (i.e., en incorporant les éléments d’animation SVG dans un contenu SVG), soit via un script.

Utilisations les plus intéressantes (actuellement):
  • visualisation de contenus (économiques, processus, cartes, etc.)
  • interface utilisateurs pour certains types d’applications Internet
  • dessins statiques, animés ou même interactifs dans le monde de l’éducation
  • animations multimédia de contenus formalisables (chimie, maths, etc.)

Pourquoi SVG ?

Avantages de "vector graphics"
  • rendering correct dans multiples média et à différentes tailles (adaptation)
  • possibilité d’appliquer des styles (adaptation 2)
  • possibilité d’indexer le texte qui fait partie du graphisme
  • taille de l’image (après compression en tout cas)
  • facilités d’édition: les éléments sont des objets, hierarchies, etc.
Avantages particuliers de SVG (par rapport à Flash et similaires)
  • insertion dans le monde XML/XHTML
    • génération de SVG avec XSLT/PHP etc. à partir de données XML
    • Intégration dans XHTML, viewers SMIL etc.
    • utilisation de CSS
    • scriptable avec JavaScript via DOM (standard)
  • possibilité de partager du code, de travailler directement avec le format
  • modèle de couleurs sophistiqué, filtres comme dans photoshop
  • une spécification assez claire
  • meilleurs capacités graphiques dans l’ensemble, voir:
  • http://www.carto.net/papers/svg/comparison_flash_svg.html

Outils

Validation on-line:
Viewers:
  • Navigateurs Firefox 1.5+, Opéra 9+ ou Safari 3+
  • On conseille le viewer 6a de Adobe pour faire du SVG dynamique/SMIL
  • http://www.adobe.com/svg/viewer/install/beta.html (V. 6a difficile à trouver !)
    • Ne prenez pas la version "officielle" 3, car elle ne marche pas avec Mozilla !
Editeurs SVG statique et dynamique
Editeurs SVG statique et exporteurs
  • Prenez Inkscape (gratuit) pour faire des dessins.
  • Note: OpenOffice "Draw", Illustrator etc. permettent de sauver du SVG
SVG avec un éditeur XML
Installation d’une DTD dans Xemacs (pas nécessaire pour Exchanger lite !)
  • Il faut copier le fichier avec la DTD qq part sur votre système (de préférence au même endroit que le CATALOG.
  • Ensuite éditer le fichier ...XEmacs/xemacs-packages/etc/psgml-dts/CATALOG qui se trouve dans l’installation Xemacs.
  • Ajouter une ligne qui associe un identificateur public avec un fichier
Exemple Unix: PUBLIC "-//W3C//DTD SVG 1.0//EN" /web/lib/xml/dtd/svg10.dtd

Exemple Dos:  PUBLIC "-//W3C//DTD SVG 1.0//EN" svg10.dtd
  • N’oubliez pas de dire à Emacs que *.svg est associé à XML, éditez le fichier ~/.xemacs/init.el et ajoutez:
(setq auto-mode-alist

   (append ’(("\.svg"  . xml-mode)) auto-mode-alist))

Note: Votre home (~) sous windows est qq. part dans c:\Documents and Settings\xxxx\. Alternativement on peut aussi insérer cette instruction dans ... XEmacs\site-packages\lisp\site-start.el

Ressources

Spécification (SVG 1.1 Specification, W3C recommendation Jan 2003)

SVG de base

Viewer et serveur

SVG avec un viewer ou plugin

  • Pour regarder les exemples il vous faut un viewer SVG ou un navigateur avec SVG natif
  • SVG dans Firefox:
    • SVG est inclu par défaut dans Firefox 1.5, Opéra 9 et Safari 3.
    • Désavantage: Il manque les animations (!), certains filtres, fonctionalités pour des fontes, etc.
    • Avantage: On peut combiner XHTML et SVG
  • Pour arrêter/mettre en marche SVG natif dans FireFox
    • entrez l’URL: about:config
    • Tapez "svg" dans la fenêtre "filter"
    • Double-clic sur svg.enabled
  • On conseille éventuellement d’installer le plug-in de Adobe (fait du SVG dynamique !)
    • ... mais sur ma machine ca plante souvent depuis la version 2.0 (DKS)

Mime-types que votre serveur doit définir (!)

  • Lorsque votre navigateur n’affiche pas un fichier svg provenant d’un serveur, il faut configurer les serveur web avec les mime-types suivants.

*.svg image/svg+xml

*.svgz image/svg+xml

Structure d’une simple page SVG

  • Une déclaration XML standarde, par exemple

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

  • Pour un document non "standalone", il faut indiquer le DTD:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

  • La racine d’un contenu SVG est "svg":
<svg>

 .....

</svg>
  • Il faut déclarer un name space dans la racine (si ce n’était pas fait dans un parent):

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

....

</svg>

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=SVG&oldid=13499 »