<svg> : Démo HTML5
Mise à jour : 2017-01-22
Scalable Vector Graphics est désormais intégré
directement dans le code HTML5.
<svg>
- La spécification SVG est trop riche pour être détaillée ici.
application/xhtml+xml
- Type MIME nécessaire pour le support de SVG (extension .xhtml).
Notes sur le tuto
- Google permet l'utilisation de SVG par les navigateurs qui ne le supportent pas via SVGWeb.
- Adobe propose son SVG Viewer.
- Le validateur du W3C permet de valider la syntaxe SVG.
Exemple de code HTML5
<img> : <img src="img/Svg_logo_basic_red_100x100.svg" alt="Logo SVG"><br> <br> <svg> :<br> <iframe src="_svg.xhtml"></iframe> <!--_svg.xhtml <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"/> <title></title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="440" height="120"> <rect x="20" y="20" rx="20" ry="20" width="400" height="80" fill="green" stroke="lightgreen" stroke-width="5"/> <text x="40" y="60"> Si ce texte est dans une boite verte, <svg> est supportee ! </text> </svg> </body> </html>-->
Démonstration du résultat HTML5
<img> :
<svg> :
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script>isItemSupported("window.SVGSVGElement")</script>