La technique pour créer des images avec XML à partir d’un fichier SVG

Découvrez les fichiers SVG basé sur le langage XML pour réaliser très simplement des graphiques et des dessins.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

La technique pour créer des images avec XML à partir d’un fichier SVG

Bonjour à tous et bienvenu sur Développement Facile.

Ici Matthieu expert en développement applicatif, on continu ensemble la série de cours dédiée au langage XML et là, vous allez découvrir les fichiers SVG, je ne sais pas si vous avez déjà vu des fichiers SVG.

Les fichiers SVG

Enfaite, ça permet de créer une image affichable par les navigateurs, par le flash sur vos sites Internet, si vous avez regardé un fichier SVG c’est simplement un ensemble de balises XML donc avec un ensemble de balises XML vous pouvez créer des images complètes avec le format SVG tout simplement.

Vous avez text pour ajouter du texte dans le document et les attributs donc ça décrit les propriétés et la balise, le contenu texte le contenu affiché, vous avez un exemple text, X Y la position de votre texte, style, la taille de caractères du texte et ensuite le contenu affiché exemple SVG contenu texte, c’est aussi simple que ça.

Le format SVG est simple à appréhender suivant la complexité des images que vous voulez générer, il vous faudra plus ou moins de connaissances, bien évidemment. Là je vous ai listé toutes les possibilités que vous pouvez utiliser dans SVG, vous pouvez mettre la vidéo sur pose et tout lire, par exemple, vous pouvez créer des rectangle avec rect, positionner les coordonnées, width, height c’est la longueur et la hauteur, circle vous pouvez créer un cercle, cx, cy en précisant les coordonnées du centre du cercle, R le rayon du cercle, vous pouvez créer des ellipses aussi également, toujours en précisant le centre, les coordonnées avec un rayon d’abscisse en ordonnée cx et cy.

Vous avez également de la possibilité de créer des lignes avec line, de créer plusieurs lignes avec des x1, y1, x2, y2, les coordonnées des points de départ et des points d’arrivée, vous pouvez également créer des polygones en définissant les coordonnées des différents points. Vous pouvez faire énormément de choses avec SVG, voilà tout est listé, je vous laisserais lire ce sera beaucoup plus simple, vous mettez la vidéo sur pause c’est de la qualité HD, comme ça vous lisez à tête reposée toutes les possibilités du format SVG.

Ensemble voilà, vous pouvez faire énormément de choses avec le document SVG, plutôt que de vous lire ça, autant mettre la vidéo sur pause et le lire, vous avez également des attributs de formes géométriques avec fill, ça permet de définir la couleur du fond de la forme, si vous créez un rectangle, un cercle, une ellipse, vous pouvez définir la couleur du fond, stroke c’est la couleur du trait de contour, suivant la même syntaxe, vous définissez red blue green, ou alors le code RGB ou alors le code hexadécimal pour donner la couleur, c’est le même fonctionnement que le CSS finalement, fill opacity ça permet de définir l’opacité ou la transparence d’une forme, c’est équivalent à alpha en CSS ou en flash alpha, il faut savoir que zéro c’est invisible et un c’est plein, donc vous pouvez l’associer à un pourcentage de 0 à 1 et il y a plusieurs valeurs au milieu, une infinité de valeurs en fait.

Exemple de document SVG

Voici un exemple de document SVG, toujours il y a un en-tête du document avec le type d’encodage et la structure du document SVG est définie via la balise SVG tout simplement, pensez à fermer la balise SVG à la fin de votre document.

Il y a une petite, pas de soucis, ici voici un exemple pour créer trois rectangles avec de la couleur donc on utilise la balise red que vous voyez sur votre écran avec les coordonnées X et Y, la largeur width, la hauteur de 30 fill la couleur de fond red, stroke la couleur de leur de la ligne et l’épaisseur de la ligne trois et donc on reprend trois exemples différents pour définir trois rectangles différents.

Vous pouvez également créer des ellipses avec la balise ellipse en définissant les rayons, rx ry cx cy l’opacité, fill opacity à 1 ou 0 pour que ce soit visible, ou 0.5 pour ce soit à 50 % donc fill c’est la couleur de fond de l’ellipse qui sera jaune, yellow, donc comme d’habitude reprenez le code en mettant la vidéo sur pause, vous reprenez le code vous le réécrivez, vous créez votre propre document SVG et il suffit ensuite de l’envoyer sur votre site Internet avec votre navigateur, vous appelez le document SVG qui va s’afficher.

Vous pouvez également créer un cercle avec le nœud circle, vous pouvez aussi ajouter une légende donc avec le texte juste en dessous de votre cercle, vous ajoutez un texte avec ces coordonné XY taille de font size à 13 exemple d’image avec SVG, et pensez bien à fermer la balise SVG que vous avez ouverte tout au début du document, vous avez ouvert une balise SVG, il faut penser à la fermer à la fin du document.

Exemple de graphique avec SVG

Là je vous montre un exemple, avec le format SVG vous pouvez créer des graphique de type camembert donc là vous avez un exemple ça va créer un camembert découpé en deux arc de cercle, vous créez deux balises path, je vous laisserai tester ce code pour voir le résultat directement, visuellement je préfère que vous le testiez de votre côté, que vous le mettiez en pratique plutôt que de simplement vous donner le code source, là au moins vous mettez en pratique, vous faites des erreurs vous les corrigez, tout en sachant que vous avez l’équipe développement facile qui est là pour vous soutenir et vous aidez en cas de besoin simplement.

Les documents SVG

Enfaite, avec l’ajout de SVG vous pouvez créer des rendus graphiques à partir de données statistiques, c’est-à-dire dans certains domaines, vous avez beaucoup de stats à afficher, grâce au document SVG vous pouvez créer des graphiques tout simplement, avec un script il faut construire et mettre à jour les valeurs du graphique à partir des résultats de calculs qui sont par exemple disponibles soit dans une base de données, soit dans un document XML, vous prenez les infos du document XML ou de la base de données et vous reconstruisez votre graphique qui est tout le temps à jour. Vous pouvez ajouter de l’interaction dans vos documents SVG avec des  clique sur une partie graphique, tout ça c’est possible avec SVG.

Votre plan d’actions !

A vous de jouer comme je vous l’ai dit vous n’avez pas de code source à télécharger dans ces nouveaux cours, le nouveau format de cours que je mets en place, je préfère que vous mettiez la vidéo sur pause, vous voyez le code qui s’affiche, vous le copiez de votre côté et vous le testez de votre côté pour voir les résultats, je pense que c’est beaucoup plus pédagogique, c’est comme ça que vous allez progresser beaucoup plus rapidement, bien évidemment si vous avez des questions posez les directement sous cette vidéo, l’équipe développement facile est à votre disposition pour vous répondre, maintenant juste au-dessus de moi il y a une image lancer la vidéo deux, cliquez sur cette image pour lancer la deuxième vidéo et dans la deuxième vidéo vous allez apprendre à combiner XML avec le langage PHP, JavaScript à utiliser les bases de données MySQL, vous allez découvrir les nouvelles propriétés CSS3, les nouvelles balises HTML 5 donc tout ça c’est dans la deuxième vidéo donc cliquez bien sur l’image lancer la vidéo deux, moi je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle] [/ppmaccordion]

Montrez nous vos exemples de fichiers SVG  et le résultat obtenu.

Utilisez la zone commentaire pour poster vos exemples de code SVG