Introduction à SVG dans HTML

Aperçu

Cet article et son exemple associé montrent comment utiliser duSVG en ligne pour fournir une image de fond à un formulaire. Il montre commentJavaScript etCSS peuvent servir à manipuler l'image comme vous le feriez avec le XHTML dans un script. Notez que l'exemple ne fonctionnera que dans des navigateurs supportant XHTML (pas HTML) et l'intégration SVG.

Source

Voici le code source de cet exemple :

html

<html xmlns="http://www.w3.org/1999/xhtml">  <head>    <title>XTech SVG Demo</title>    <style>      stop.begin {        stop-color: yellow;      }      stop.end {        stop-color: green;      }      body.invalid stop.end {        stop-color: red;      }      #err {        display: none;      }      body.invalid #err {        display: inline;      }    </style>    <script>      function signalError() {        document.getElementById("body").setAttribute("class", "invalid");      }    </script>  </head>  <body      >    <form>      <fieldset>        <legend>HTML Form</legend>        <p>          <label>Enter something:</label>          <input type="text" />          <span>Incorrect value!</span>        </p>        <p><button>Activate!</button></p>      </fieldset>    </form>    <svg      xmlns="http://www.w3.org/2000/svg"      version="1.1"      viewBox="0 0 100 100"      preserveAspectRatio="xMidYMid slice"     >      <linearGradient>        <stop offset="0%" />        <stop offset="100%" />      </linearGradient>      <rect x="0" y="0" width="100" height="100" />      <circle cx="50" cy="50" r="30" />    </svg>  </body></html>

Discussion

La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément <svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attributinvalid à la balise <body> et une règle de style modifie la couleurend-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).

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

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
L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux
Elle est très simple et remplit sa fonction parfaitement
L'image se redimensionne automatiquement à la taille requise de manière intelligente
Nous pouvons avoir des déclarations de styles appliquées à la fois sur le HTML et le SVG
Le même script manipule à la fois le HTML et le SVG
Le document est entièrement basé sur les standards

Détails

L'attributviewBox é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.

L'attributpreserveAspectRatio 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.

L'attributstyle ancre l'élément SVG en arrière plan du formulaire.