HTML 5  Inline SVG graphiques vectoriels 2D pour les pages Web

Une des nouveautés en HTML5 est l’introduction de support pour inline SVG.

  • SVG signifie Scalable Vector Graphics
  • SVG est utilisé pour définir des graphiques vectoriels 2D pour les pages Web
  • SVG définit les graphiques au format XML
  • Les graphiques SVG ne perdent pas de leur qualité si ils sont redimensionnés ou zoomés
  • Les éléments et attributs dans les fichiers SVG peuvent être animés
  • SVG est une recommandation du W3C

Avantages SVG

HTML5 cours tutorial

Les avantages de l'utilisation de SVG par rapport à d’autres formats d'image (comme JPEG et GIF) sont les suivants:

  • Les images SVG peuvent être créés et édités avec n'importe quel éditeur de texte
  • Les images SVG peuvent être recherchés, indexé, scénarisé et comprimé
  • Les images SVG sont redimensionnables et ne perdent pas de leur qualité si ils sont redimensionnés
  • Les images SVG peuvent être imprimés avec de haute qualité à n'importe quelle résolution
  • Les images SVG sont zoomable (et l'image peut être agrandie sans dégradation de la qualité)

Navigateurs pris en charge

Internet Explorer Firefox Opéra Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome et Safari supportent inline SVG.


Intégrer SVG directement dans des pages HTML

En HTML5, vous pouvez incorporer des éléments SVG directement dans votre page HTML:

Exemple

Sélectionner le code

              <!DOCTYPE html>
              <html>
               
              <head>
                <meta http-equiv="X-UA-Compatible" content="IE=9"/>
                <title>HTML5  l’élément SVG</title>
                <script>
               
                  function doCircle(evt)
                  {
                    var theCircle = evt.target;
                    var radius = theCircle.getAttribute("r");
               
                    if (radius == 50)
                    {
                      radius = 100;
                    }
                    else
                    {
                      radius = 50;
                    }
                 
                    theCircle.setAttribute("r",radius);
                  }
               
                </script>
              </head>
               
              <body>
                <h2> Tracer un elipse </h2>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="130px">
                 <defs>
                   <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                     <stop offset="0%"
              style="stop-color:rgb(255,255,0);stop-opacity:1"><stop offset="100%"
              style="stop-color:rgb(255,0,0);stop-opacity:1"></linearGradient>
                 </defs>
                 <ellipse cx="300" cy="70" rx="85" ry="55" fill="url(#grad1)"><text
              fill="#ffffff" font-size="45" font-family="Verdana" x="250"
              y="86">SVG</text>
                 Désolé votre navigateur  ne supporte pas  SVG.
              </svg>
              <h2> Tracer un polygone</h2>
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
                <polygon points="100,10 40,180 190,60 10,60 160,180"
                style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
              </svg>
              <h2> Tracer et animer un cercle </h2>
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px"
              height="300px">
                  <text x="25" y="50" font-size="24"> Element SVG Cercle</text>
                  <text x="25" y="275">Click sur le cercle pour changes sa
              taille.</text>
                  <circle cx="125" cy="150" r="50"
                          fill="pink" stroke="green" stroke-width="5"
                          onclick="doCircle(evt)" />
                </svg>
              </body>
              </html>
            

Résultat:

Pour en savoir plus sur SVG, s'il vous plaît lire notre tutoriel SVG .


Différences entre SVG et Canvas

SVG est un langage de description de graphiques 2D en XML.

Canevas dessine des graphismes en 2D, à la volée (avec un JavaScript).

SVG est basé sur XML, ce qui signifie que chaque élément est disponible dans le DOM de SVG. Donc vous pouvez attacher des gestionnaires d'événements JavaScript pour chaque élément.

En SVG, chaque forme dessinée est stockée dans la mémoire comme un objet. Si les attributs d'un objet SVG sont modifiés, le navigateur peut automatiquement re-rendre la forme.

En Canevas, une fois que le graphique est tiré, il est oublié par le navigateur. Si sa position doit être changée, toute la scène doit être redessiné, y compris les objets qui auraient pu être couverts par le graphique.


Comparaison de Canvas et SVG

Le tableau ci-dessous présente certaines différences importantes entre Canvas et SVG:

Canvas

SVG

  • Résolution dépendante
  • Pas de support pour les gestionnaires d'événements
  • Pauvres capacités de rendu de texte
  • Vous pouvez enregistrer l'image résultante comme. Png ou. Jpg
  • Bien adapté pour les graphiques intensives jeux
  • Indépendant de la résolution
  • Soutien des gestionnaires d'événements
  • Le mieux adapté pour les applications avec des zones de grands rendu (Google Maps)
  • Rendu lent si complexe (car tout ce qui utilise le DOM d'un lot sera lent)
  • Ne convient pas aux applications de jeux
Par carabde 10 juin 2014

chapitre précédent

sommaire

chapitre suivant