Différences entre les versions de « VISUALISEUR 2D »
m |
m |
||
| Ligne 15 : | Ligne 15 : | ||
=== Afficher du svg === | === Afficher du svg === | ||
Le tutoriel suivant vous permet de faire vos premiers pas pour afficher du SVG dans votre page WEB : | Le tutoriel suivant vous permet de faire vos premiers pas pour afficher du SVG dans votre page WEB : [https://www.w3schools.com/graphics/svg_inhtml.asp]. | ||
Figure 10 Dessin SVG simple intégré dans la page WEB | Figure 10 Dessin SVG simple intégré dans la page WEB | ||
Version du 15 janvier 2022 à 15:40
Le format SVG
Dans cette partie, nous allons exploiter le format SVG :
« Le Scalable Vector Graphics (en français « graphique vectoriel adaptable1 »), ou SVG, est un format de données ASCII conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML. Ce format inspiré directement du VML et du PGML est spécifié par le World Wide Web Consortium »[1].
Une introduction au SVG est disponible ici.
Un fichier SVG peut être visualiser ou éditer avec :
- Le logiciel open source Inkscape.
- Un éditeur en ligne tel que SVGedit.
Afficher du svg
Le tutoriel suivant vous permet de faire vos premiers pas pour afficher du SVG dans votre page WEB : [2].
Figure 10 Dessin SVG simple intégré dans la page WEB
Ancrer un fichier SVG tier dans la page
Il est possible d’ancrer un contenu SVG issu d’un fichier tier dans le DOM. La page web suivante explique différentes manières de réaliser cela :
https://vecta.io/blog/best-way-to-embed-svg
La balise « embed » est l’option que nous proposons d’exploiter :
<embed src="./static/svg/smd_art.svg" width="100%" id="embedSVG" />
Nous proposons d’intégrer un fichier SVG qui est un schéma mécanique correspondant à la scène 3D précédente.
Le fichier SVG à afficher est disponible dans le jeu de données fourni.
Vous devriez pour créer la page suivante :
Figure 11 Ancrage d’un fichier SVG dans une page WEB
[1] https://fr.wikipedia.org/wiki/Scalable_Vector_Graphics
