Edition de document SVG
Ph Leroy
3/4/2019
Vue d'édition des graphiques vectoriels
La vue svg_edit.html permet d'éditer le contenu d'un fichier SVG [Voir la page sur le SVG page.php?p=svg&l=fr] et aussi de générer des images SVG à partir de données.
Cette page est accessible à partir de l'explorateur de documents en demandant à modifier un document existant de type SVG ( image/svg+xml).
Le principe est simple, une image SVG est définie par un fichier dont le contenu est conforme au standard SVG. On peut modifier directement le contenu du fichier en saisissant les commandes SVG à appliquer.
On peut aussi définir dans un fichier SVG des commentaires, et nous allons utiliser ces commentaires pour enregistrer dans le document les données primaires qui serviront à générer l'image SVG correspondantes. On dispose de deux primitives de génération l’histogramme et le diagramme circulaire.
Structure de la page
La vue présente les parties suivantes
| Partie | Description |
|---|---|
| Contenu | Affiche le contenu du fichier SVG et permet de le modifier, que ce soit des données vectoriels ou des données génératrices |
| Bouton Générer | Lance le processus de génération de l'image à partior des données enregistrées dans le contenu |
| Champs divers | Liste des champs pouvant être modifiés ou pas |
| Bouton Enregistrer | L'appui sur ce bouton permet d'enregistrer les attributs mis à jour et le contenu affiché, il n'y a pas de tentative de génération de graphiques |
| Aperçu | L’aperçu est en fait une page de visualisation de votre navigateur sur doc_vue.php avec comme paramètre le document SVG que vous êtes en train d"'éditer ( iFrame); c'est juste pour vérifier le rendu de vos modifications |
Modification d'une image SVG simple
Il suffit de modifier les commandes constitutives de votre graphique et de faire "Enregister".
Attention Votre navigateur utilise un cache pour conserver les documents qu'il a déjà téléchargé du serveur et vous les réafficher immédiatement. C'est trés bien mais de ce fait vous ne voyez pas l'effet de vos modifications. Vous pouvez soit demander le rafraîchissement du cadre d'aperçu ( Click droit/ Ce cadre / Actualiser le cadre) à chaque fois, soit désactiver le cache dans votre navigateur (cela dépend de chaque navigateur) ou passer le navigateur en mode Debug ( Shift+Control+I) avec désactivation du cache.
Génération de graphique
Raphia permet de générer des graphiques particuliers dans des fichiers SVG, le principe est de conserver dans des commentaires du fichier SVG les données applicatives permettant de générer le graphique.
Prenons un petit exemple, nous voulons faire un diagramme circulaire de production agricole. Nous avons 100 quintaux de blé, 50 de vin et 10 d'huile.
Nous utilisons la primitive de tracé de diagramme circulaire piechart en précisant les données suivantes
| Paramètres généraux | Description |
|---|---|
| Primitive | piechart pour un diagramme circulaire, histogram ôur un histogramme |
| Nombre de valeurs | Nombre de valeurs à afficher |
| Largeur | Largeur nominale du graphique SVG à générer |
| Hauteur | Hauteur nominale du graphique SVG à générer |
| Fond | Couleur du fond à appliquer éventuellement |
et pour chaque valeur à afficher
| Paramètres de valeur | Description |
|---|---|
| Nombre | Valeur numérique caractéristique de la valeur ( par exemple 100.0 pour le blé) |
| Libellé | Description textuelle associé à la valeur |
| Couleur | Couleur à appliquer pour cette valeur ( soit #e0e000 (forme longue) soit #ee0 (forme courte) |
Reprenons notre exemple, on va écrire
<?xml version="1.0" encoding="utf-8"?> <!-- piechart 3 300 200 0 100; Blé; #f1c40f 50; Vin; #e74c3c 10; Huile; #27ae60 --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" viewBox="0 0 300 200" > <path d="M109.24,103.83 L109.24,23.83 A80.00 80.00 0 1 1 52.67 160.40 z" fill=" #f1c40f" / > <path d="M90.19,98.05 L33.62,154.62 A80.00 80.00 0 0 1 59.58 24.14 z" fill=" #e74c3c" / > <path d="M98.05,90.19 L67.43,16.28 A80.00 80.00 0 0 1 98.05 10.19 z" fill=" #27ae60" / > <rect x="200" y="42" width="10" height="10" stroke-width="0" fill=" #f1c40f" / >< text x="216" y="52" font-size="12"> Blé</text> <rect x="200" y="95" width="10" height="10" stroke-width="0" fill=" #e74c3c" / >< text x="216" y="105" font-size="12"> Vin</text> <rect x="200" y="148" width="10" height="10" stroke-width="0" fill=" #27ae60" / >< text x="216" y="158" font-size="12"> Huiles</text> </svg>
La première ligne est impérative, elle définit le standard du fichier et donc entre autre que l'on peut y mettre des commentaires entre <!-- et -->.
Nous mettons donc en deuxième ligne notre commentaire générateur. C'est un diagramme circulaire ayant trois valeurs large de 300pixels, haut de 200 pixels et appliquant un décalage de 0 pixels de chaque segfment. Puis on a nos trois lignes de valeurs.
Et aprés la fin du commentaire on a le code vectoriel proprement dit à partir de <svg jusqu'à la fin. Cette partie du fichier va être remplacée lors de la prochaine génération.
On obtient
Reprenons pour &éclater les quartiers et améliorer les informations.
<?xml version="1.0" encoding="utf-8"?> <!-- piechart 3 300 200 10 #ddf 100; Blé (100qtx); #f1c40f 50; Vin (50qtx); #e74c3c 10; Huile (10qtx); #27ae60 --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" viewBox="0 0 300 200" > <rect x="0" y="0" width="300" height="200" stroke-width="0" fill="#ddf" /><path d="M109.24,103.83 L109.24,23.83 A80.00 80.00 0 1 1 52.67 160.40 z" fill=" #f1c40f" /> <path d="M90.19,98.05 L33.62,154.62 A80.00 80.00 0 0 1 59.58 24.14 z" fill=" #e74c3c" /> <path d="M98.05,90.19 L67.43,16.28 A80.00 80.00 0 0 1 98.05 10.19 z" fill=" #27ae60" /> <rect x="200" y="42" width="10" height="10" stroke-width="0" fill=" #f1c40f" /><text x="216" y="52" font-size="12"> Blé (100qtx)</text> <rect x="200" y="95" width="10" height="10" stroke-width="0" fill=" #e74c3c" /><text x="216" y="105" font-size="12"> Vin (50qtx)</text> <rect x="200" y="148" width="10" height="10" stroke-width="0" fill=" #27ae60" /><text x="216" y="158" font-size="12"> Huile (10qtx)</text> </svg>
Le résultat
note: on aurait du inclure directement dans la page t2t 
pour afficher l'image, mais cela ne marche pas; on a un peu triché et inclus directement ( entre ' ' ' et ' ' ') le code svg généré dans la page t2t en l'encadrant avec <div style="width:100%;"><div style="margin-left:auto; margin-right:auto; width:300px"> et </div></div> pour qu'il soit centré.