Trouve la dernière occurrence d'un caractère dans une chaîne
Une des nouveautés en HTML5 est l’introduction de support pour inline SVG
Une des nouveautés en HTML5 est l’introduction de support pour inline SVG.
Les avantages de l'utilisation de SVG par rapport à d’autres formats d'image (comme JPEG et GIF) sont les suivants:
Internet Explorer 9, Firefox, Opera, Chrome et Safari supportent inline SVG.
En HTML5, vous pouvez incorporer des éléments SVG directement dans votre page HTML:
<!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 .
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.
Le tableau ci-dessous présente certaines différences importantes entre Canvas et SVG:
Canvas |
SVG |
---|---|
|
|
SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent