< Générer une illustration SVG avec PHP >
SVG est un format d’images vectoriel basé sur XML. Il fonctionne comme l’HTML, avec des tags, qui ne sont pas plus compliqués à apprendre que les tags HTML. Les fichiers SVG sont donc avant tout des fichiers textes, et il est aussi facile de générer des illustrations SVG à la volée, que des pages HTML.
Génerer des illustrations SVG avec PHP
Le gros avantage d’SVG, comparé à Flash, c’est qu’SVG est un format standard dont les différentes spécifications sont accessibles sur le site du W3C. Avec PHP, il est aussi facile de génèrer des fichiers HTML que des fichiers SVG : ce ne sont que des fichiers textes contenant des tags.
Pour illustrer ce principe, voici un diagramme camembert au format SVG, dont le code est généré par un script PHP.
Vous pouvez voir le code source du fichier svg_camembert.php en cliquant sur le document ci-dessous. Ce code source est suffisamment bien commenté pour être facilement compréhensible.
Comment utiliser ce diagramme dans mon site ?
inclure une illustration SVG dans une page HTML se fait via le tag <EMBED>. Vous devez donc tout d’abord copier ce tag dans votre page html :
<embed src="svg_camembert.php" width="300" height="450" type="image/svg+xml" />
Copier ensuite le fichier PHP svg_camembert.txt sur votre site et renommez le en svg_camembert.php
Modifiez-en les lignes 8 à 11 pour y inclure vos données. Vos données peuvent être issues de tableaux statiques, comme de sources dynamiques, de bases de données, etc ...
Si votre serveur n’accepte pas PHP, ou bien si vous ne pouvez pas y placer le fichier svg_camembert.php (par exemple vous êtes chez un hébergeur de weblogs), vous pouvez utiliser la page suivante pour générer ce diagramme SVG et le télécharger directement sur votre disque dur. Ce fichier SVG statique ne fera plus appel à PHP et pourra ainsi être facilement intégrable à votre site web : Générateur de diagramme camembert SVG
Voir aussi
Un autre tutoriel pour faire des diagrammes camembert en SVG
18 commentaires
Ce petit tutorial est très interessant et le script svg est très bien commenté. Je suis en train de remanier le script pour les camenberts 3d et les histogrammes pour pouvoir insérer des graphs à la volée dans php avec MySql et si possible rendre dynamiques les graphiques.
Je viens de me mettre au SVG depuis 1 mois et les possibilités me semblent infinies.
Encore merci pour tout.
N’hésitez surtout pas à revenir nous donner les adresses de vos créations lorsque celles-ci seront consultables.
Bonjour, lorsque j’essaie d’inclure la création du SVG via
Chez moi la page suivante semble très bien marcher : j’ai bien le diagramme avec les batons bleus.
Petite critique : les chiffres en haut des batons sont à peine lisibles, ou alors faut zoomer. Le diagramme fait un peu plat : je vous conseille de recopier la définition d’ombre de mon diagramme camembert et de donner une ombre aux batons, tout en supprimant le bord noir, et en leur donnant une opacité autour de .7, ça donnera du volume au diagramme.
En tout cas bon courage, c’est un très bon début. :-)
j’ai longtemps cherché comment faire pour que le resultat varie en fonction de mes données contenues dans ma table de mysql, j’ai finalement trouvé ! alors voila le petit ajout /modification du fichier svg_camembert.php à faire pour que ca marche :
//ma requete sur ma table $requete = "SELECT * FROM table" ; $resultat = mysql_query ($requete) ;
//pour avoir mon array(value1,value2,etc.)
$graph_data = array() ;
while ($row = mysql_fetch_array($resultat))
$graph_data[] = $row[’champ_de_ma_table’] ;
//faites de meme pour graph_names
et ca marche ^^
super intéressant
j’ai juste un probleme c’est que je dois passer mon site en asp et que n’arrive pas à traduire le script
help
Tu dois sans doute être la dernière personne au monde à passer du code PHP en ASP. Tous les autres font l’inverse. ASP, c’est vraiment trop naze. Toutes mes condoléances, mais bon courage quand même.
un grand merci à john pour son exemple sur la création d’une variable array dynamique qui varie en fonction des données contenues dans une table. je cherche cette information depuis une semaine, enfin j’ai mon diagramme en barres dynamique. j’utilise jpgraph. cordialement.
3.141592 et pas 3.141692, surtout que tu connais ’que j’aime à faire apprendre ce nombre au(x) sage(s)"
;o)
John , qu’apelles-tu champ de ma table dans $row[’champ_de_ma_table’] ? car je n’arrives pas à récupérer de valeur et donc mon diagramme ne s’affiche pas. Merci pour ton aide.
Bonjour,
J’ai été très interessé par ce didactitiel. D’après vous, existe-t-il un moyen de sortir un pdf en ligne avec un fichier svg (embeded) intégré dans une page html.
Merci
Salut à tous ! Comment on fait pour changer le fond blanc de l’image que l’on obtient ? Je souhaiterai le mettre d’une autre couleur...
pourquoi embed plutot que object ?
Bonjour,
Je souhaite adapter ce script pour des histogrammes (intégrant des valeurs négatives dans les données si possible). Mais débutant en SVG, j’ai des difficultés pour le réaliser correctement. Quelqu’un l’aurait-il déjà fait ?
Merci
Super ce camembert, juste un petit plus pour la compatibilité avec FIREFOX,
voici la déclaration correcte : (Pour l’ instant, firefox ne gère pas les transparences IE et certaines options SVG Viewer comme la gestion des espaces blancs ou images dynamiques).
header("Content-type : image/svg+xml") ;
echo ’< ?’ ; ?>xml version="1.0" standalone="no" ?>
< !DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns :xlink="http://www.w3.org/1999/xlink" width="300" height="450">
Excellent graphique c’est exactement ce qu’il me faut. Ceci dit j’aurais une petite question spécifique par rapport au travail que je fais. J’ai besoin d’afficher plusieurs fois le graphique sur la même page mais avec des données différentes bien sur. Pour cela j’utilise une base de données. Une fois la requête lancée je parcours son résultat via deux boucles WHILE (tout ceci en PHP). La première regroupe un certains type de données la 2ème contient les données. A chaque tour de la 2ème boucle je rempli mes tableaux, ceux des données ainsi que ceux des libellés exactement comme toi et je les stockent dans des variables de session PHP $_SESSION. Ensuite j’appelle le fichier svg_camenbert.php dans la première boucle autant de fois qu’il y a de types de données différentes. Dans le fichier svg_camenber.php je récupère les variables de session qui contiennent les valeurs des tableaux.
Le problème est le suivant. Si le fichier svg_camenber.php est appelé qu’une seul fois cella fonction très bien. Par contre si le fichier est appelé plusieurs, les camemberts s’affichent bien plusieurs fois sur ma page mais avec les données du denier type de données. Autrement dit mes camemberts on tous le dernier et même résultat.
Ce que j’aimerais savoir c’est comment réagit le SVG dans du PHP. Est-ce que le code PHP est d’abord exécuté puis il fait la partie SVG. Et quelle serait la solution pour passer des données au fichier svg_camenber.php et que l’on puisse l’afficher plusieurs fois sur une même page avec des données différentes.
Merci pour votre réponse.
Hello j’ai trouvé chaussure à mon pied tout seul.
Je voulais tout de même donner ma solution au problème. Pour commencer je fais une erreur bête qui est souvent commise par les développeurs, celle de stocker des données dans les variables de session qui ne sont pas fait à cet effet en tout cas pas de cette manière.
Pourquoi ? Simplement parce que les variables de sessions sont mises à jours au même temps donc elle ne garde que les derniers résultats.
Pour résoudre le problème il faut donc trouver une autre solution pour passer des variables de type tableaux à un fichier PHP. Ma solution fut de splitter mon traitement et de passer en paramètre le ID en cour de la première boucle au fichier svg. En effet la partie qui stocke mes tableaux je l’ai reporté sur le fichier svg. Je fais ensuite ma requête avec le ID récupéré en paramètre pour ensuite lire et remplir mes tableaux.
En peut difficile à expliquer mais si jamais quelqu’un à besoin je lui expliquerais volontiers en détaille.
Encore merci et bon développement à tous.



Merci pour cet exemple très pragmatique. et bravo pour avoir mis à disposition des internautes ce générateur de camembert.