La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément invalid à la balise et une règle de style modifie la couleur end-stop du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur).\n

Cette approche bénéficie des points suivants en sa faveur :\n

\n
• Nous avons choisi un formulaire XHTML classique qui pourrait faire partie d'un site Web existant, et lui avons ajouté un fond attractif et interactif\n
• L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux\n
• Elle est très simple et remplit sa fonction parfaitement\n
• L'image se redimensionne automatiquement à la taille requise de manière intelligente\n
• Nous pouvons avoir des déclarations de styles appliquées à la fois sur le HTML et le SVG\n
• Le même script manipule à la fois le HTML et le SVG\n
• Le document est entièrement basé sur les standards\n"}},{"type":"prose","value":{"id":"détails","title":"Détails","isH3":true,"content":"

  L'attribut viewBox établit un système de coordonnées logiques sur lequel les coordonnées de l'image SVG s'appuient de façon relative. Dans ce cas, notre image s'étend dans un cadre de visualisation de 100 sur 100.\n

  L'attribut preserveAspectRatio spécifie que le ratio de rendu doit être préservé en centrant l'image dans l'espace disponible, en augmentant la largeur ou la hauteur à leur maximum et en tronquant les débordements.\n

  L'attribut style ancre l'élément SVG en arrière plan du formulaire."}},{"type":"prose","value":{"id":"liens_sur_le_sujet","title":"Liens sur le sujet","isH3":true,"content":"

  \n
  • L'article Wikipédia sur le format SVG\n
  • La page Inline SVG sur le wiki SVG\n"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"fr","mdn_url":"/fr/docs/Web/SVG/Guides/SVG_in_HTML","modified":"1970-01-01T00:00:00.000Z","native":"Français","noIndexing":false,"other_translations":[{"locale":"en-US","title":"SVG in HTML introduction","native":"English (US)"},{"locale":"de","title":"Einführung in SVG in HTML","native":"Deutsch"},{"locale":"ja","title":"HTML 内の SVG 入門","native":"日本語"},{"locale":"ko","title":"SVG In HTML Introduction","native":"한국어"},{"locale":"ru","title":"SVG в HTML. Введение","native":"Русский"},{"locale":"zh-CN","title":"SVG In HTML Introduction","native":"中文 (简体)"}],"pageTitle":"Introduction à SVG dans HTML - SVG (Scalable Vector Graphics) | MDN","parents":[{"uri":"/fr/docs/Web","title":"Technologies web pour développeurs"},{"uri":"/fr/docs/Web/SVG","title":"SVG (Scalable Vector Graphics)"},{"uri":"/en-US/docs/Web/SVG/Guides","title":"Guides"},{"uri":"/fr/docs/Web/SVG/Guides/SVG_in_HTML","title":"Introduction à SVG dans HTML"}],"popularity":null,"short_title":"Introduction à SVG dans HTML","sidebarHTML":"
    1. SVG (Scalable Vector Graphics)
    2. Tutoriels
    3. Introducing SVG from scratch

       1. Introduction
       2. Premiers pas
       3. Positionnement
       4. Formes de base
       5. Paths
       6. Remplissages et contours
       7. Gradients SVG
       8. Motifs
       9. Textes
       10. Transformations de base
       11. Découpages et masquages
       12. Contenu embarqué dans le SVG
       13. Filtres
       14. Polices SVG
       15. SVG: Elément image
       16. Outils pour SVG
       17. SVG et CSS
       18. Guides
       19. 1. Content type
           2. Linking
           3. Namespaces crash course
           4. Scripting
           5. Animation SVG avec SMIL
           6. SVG en tant qu'image
           7. Application d'effets SVG à du contenu HTML
           8. SVG filters
           9. Introduction à SVG dans HTML
           10. Références
           11. Éléments

               1. a
               3. animateMotion
               4. animateTransform
               5. circle
               8. desc
               9. ellipse