HTML5 Inline SVG

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

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