Les cookies : Définition et utilisation des cookies en javascript.
Avantages SVG
HTML5 cours tutorialLes 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 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
Exemple : Copier 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 |
|---|---|
|
|