cet article est une traduction française du document anglais crée par google sur :
http://codinginparadise.org/projects/svgweb/docs/QuickStart.htmlDémarrage rapide
ceci est un guide de démarrage rapide d'utilisation du toolkit SVG
Qu'est ce que le SVG ?
SVG ou Scalable Vector Graphics (ndt: Graphique Vectoriel Redimensionnable est un standard du web ouvert qui permet d'ajouter simplement des graphiques vectoriels à vos pages web. De la même manière que HTML vous offre des balises simples comme <form> ou <table> à ajouter à vos pages web, SVG vous offre des tags simples comme <circle> ou <rect> pour un rectangle. Travailler avec le SVG ressemble beaucoup à travailler avec HTML. Vous utilisez javascript pour animer les choses, CSS (Cascading Style Sheet (ndt: Feuille de style en cascade)) pour ajouter des styles, etc. Une bonne introduction au SVG peut être trouvée à
www.svgbasics.com (note: si vous connaissez un bon tutoriel sur le SVG qui introduit les notions de balisage, de scripting, et SMIL
contactez-nous (ndt: c'est à dire google, pas moi)
Qu'est ce que le toolkit WEB SVG ?
SVG WEB est une bibliothèque Javascript qui permet un support du SVG dans de nombreux navigateurs : Internet Explorer, Firefox, et Safari. En utilisant cette bibliothèque et le support natif des navigateurs, vous pouvez cibler instantanément ~95% des utilisateurs.
A partir de là, vous optenez un support partiel du SVG 1.1, des animations SVG (SMIL), Fonts, Vidéo et Audio, scripting par le DOM et les styles via JavaScript et bien plus pour une bibliothèque d'à peu près 60k. Votre contenu SVG peut être directement inclu dans du HTML5 normal ou à travers la balise OBJECT. Si le support SVG est déja présent dans le navigateur, alors il est utilisé bien que vous puissiez surclasser cela et faire en sorte que le SVG WEB Toolkit gère les choses à la place.
SVG WEB peut tout aussi bien être utiliser via des pages HTML et JavaScript ou des applications 100% flash ou flex. Ce guide de démarrage rapide ne décrit que l'utilisation du SVG WEB Toolkit via HTML et javascript plutôt que via les application flash ou flex.
Gardez bien à l'esprit que le SVG WEB Toolkit est en alpha. Si vous trouvez quelque chose
remplissez un bugSi vous utilisez SVG WEB, dit le à la communauté sur notre page de wiki
"Projects Using SVG Web"Ressources
A n'importe quel moment lorsque vous travaillez sur ce guide de démarrage rapide, les ressources suivantes sont a votre disposition :
*
An in-depth technical User Manual *
The demo viewer * des exemples de fichier
SVG et
HTML que vous pouvez observer
* si tout le reste à échoué le
SVG Web Google Group est là si vous avez des questions à poser.
Démarrage
1.
téléchargez et décompressez la dernière archive zip du SVG WEB 2. SVG web est livré avec un petit serveur web que vous pouvez lancer en local de manière à démarrer rapidement. En développant, vous ne pouvez pas simplement charger des choses avec des URL's du style
file:// car certains navigateurs et flash ont des problèmes quand ils chargent des choses depuis le système local. Au lieu de cela, vous devez charger vos pages via
http://; le petit serveur web intégré rend cela très simple. Vous devez avoir JAVA d'installé pour l'utiliser.
Pour lancer le serveur web allez simplement dans le répertoire de SVG WEB et tapper ces commandes :
java -jar src/tools/webserver.jar Par défaut, cela démarre le serveur web sur 127.0.0.1 sur le port 8080
vous pouvez également utiliser d'autres adresses IP locales si vous voulez écouter sur plusieurs adresses IP; Cela peut être très utile si par exemple vous avez une instance de machine virtuelle Parallels tournant sur Windows XP, et que vous voulez accéder à vos fichiers pendant que vous travaillez. Par défaut, Parallels installe un loopback sur l'adresse 10.211.55.2 Vous pouvez utiliser le paramètre optionel -h pour démarrer sur de multiples adresses IP avec le server web joint :
java -jar src/tools/webserver.jar -h 127.0.0.1 10.211.55.2 Ce qui démarrera le serveur web local sur
127.0.0.1:8080 et
10.211.55.2:8080.
3. Assurez-vous que le serveur local est démarré en ouvrant votre navigateur sur la page
http://127.0.0.1:8080/samples/javascript-samples/helloworld.html .Vous devriez voir deux images SVG côte à côte, avec un cercle bleu et le texte : "Hello World From Embedded SVG!" et "Hello World From An SVG File!".
Vous êtes désormais prêt à jouer avec le SVG et la bibliothèque SVG WEB ! Commençons par plonger dans l'exemple
helloworld.html.
A partir de maintenant nous allons partir du principe que vous avez lancé votre serveur web.
La balise SVG WEB
Pour utiliser SVG WEB vous devez placer une balise de
script dans votre page HTML. Cela
doit être la première balise de script de votre page.
<script src="svg.js"></script><!--D'autre balises de script peuvent suivre après la balise de script SVG WEB -->
Si votre page HTML et votre bibliothèque SVG WEB sont dans des répertoires différents, vous
devez aussi indiquer un
atttribut HTML 5 data-pathpointant vers l'endroit où se trouve le fichier SVG WEB. Cela permet à SVG WEB de savoir où sont les fichiers supplémentaires dont il à besoin.
Par exemple,, si la bibliothèque SVG Web est dans
../../src, vous devriez avoir la balise script suivante :
<script src="../../src/svg/svg.js" data-path="../../src"></script>
Placer du SVG dans votre page
Il y as actuellement deux manières d'ajouter du SVG dans votre page en utilisant SVG Web:
* En insérant directement du SVG dans votre page web en l'incluant dans du HTML normal non XHTML
* En utilisant la balise OBJECT pour insérer votre SVG dans votre page.
L'exemple
helloworld.html illustre les deux façon de faire. regardons donc ce fichier pour voir en action ces deux manières d'insérer du SVG.
Insertion direct
SVG Web vous permet d'ajouter directement du SVG dans vos page HTML, même pour des pages normales non-XHTML.
Pour ajouter directement du SVG, placez votre SVG dans un bloc SCRIPT et placez l'attibut type à image/svg+xml. Ceci est une
syntaxe HTML 5 valide pour ajouter des blocs de données et permet à votre SVG d'être lu correctement. Voici un exemple direct que l'on retrouve dans le fichier
helloworld.html :
<h1>This is some HTML here!</h1>
<script type="image/svg+xml">
<svg
width="200" height="200"
style="background-color: #D2B48C; display: block; margin-bottom: 5px;"
id="embeddedSVG">
<g
id="myGroup"
fill="blue"
style="font-size: 18px; text-anchor: middle; font-family: serif;">
<circle
id="myCircle"
cx="100" cy="75" r="50"
stroke="firebrick"
stroke-width="3" />
<text x="100" y="155">Hello World</text>
<text x="100" y="175">From Embedded SVG!</text>
</g>
</svg>
</script>
Quand vous ajoutez directement du SVG vous devriez supprimer la déclaration XML et le DOCTYPE SVG comme
<?xml version="1.0"?> Vous n'avez pas non plus besoin de déclarer le Xlink ou l'espace de nom SVG car ceux ci seront considérez comme par défaut.
Insérer avec la balise OBJECT
vous pouvez également ajouter votre SVG avec la balise OBJECT . Cela peut être pratique lorsque vous souhaitez garder votre SVG sur un fichier hors de votre page web.
Dans un mode idéal, nous utiliserions une seule balise OBJECT; malheureusement, nous devons utiliser une syntaxe autrement plus complexe pour permettre à Internet Explorer et nous devons répéter la balise OBJECT deux fois avec des noms d'attributs bien différent. Voici un exemple de notre fichier
helloworld.html :
<!--[if IE]>
<object src="../svg-files/helloworld.svg" classid="image/svg+xml"
width="200" height="200"
id="mySVGObject">
<![endif]-->
<!--[if !IE]>-->
<object data="../svg-files/helloworld.svg" type="image/svg+xml"
width="200" height="200"
id="mySVGObject">
<!--<![endif]-->
</object>
En général, vous n'aurez qu'a utiliser directement cette syntaxe en la modifiant comme cela :
* Changez les attributs
src et
data pour pointer vers là où se trouve votre fichier svg sur les deux balise OBJECT
* Changer la valeur de
height et
width suivant la hauteur et la largeur dont vous avez besoin.
* Si vous avez un attribut
id ou
class prenez garde à ce qu'il soit sur les deux balise OBJECT.
Notez que votre fichier SVG doit provenir du même hote que la page où il est rendu.
Il est également important que vottre fichier SVG ai une déclaration XML à la première ligne et que tout les espaces de nom soient convenablement déclarés; De base le fichier doit être un fichier XML valide, ce qui est un peu différent que lorsque vous intégrez du SVG directement dans votre page Web. Voici le fichier helloworld.svg :
<?xml version="1.0"?>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200"
style="background-color: #D2B48C;">
<g
id="myGroup"
fill="blue"
style="font-size: 18px; text-anchor: middle; font-family: serif;">
<circle
id="myCircle"
cx="100" cy="75" r="50"
stroke="firebrick"
stroke-width="3" />
<text x="100" y="155">Hello World</text>
<text x="100" y="175">From An SVG File!</text>
</g>
</svg>
Both the direct embed and OBJECT options can provide optional fallback content;
see the User Manual for more details. (ndt: désolé mais cette phrase m'échappe)
Le SVG Hello World
Le SVG que l'on retrouve dans l'exemple helloworld.html montre un aperçu de SVG nous allons donc le revoir rapidement ici. Le revoici :
<?xml version="1.0"?>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200"
style="background-color: #D2B48C;">
<g
id="myGroup"
fill="blue"
style="font-size: 18px; text-anchor: middle; font-family: serif;">
<circle
id="myCircle"
cx="100" cy="75" r="50"
stroke="firebrick"
stroke-width="3" />
<text x="100" y="155">Hello World</text>
<text x="100" y="175">From An SVG File!</text>
</g>
</svg>
Dans un premier temps, notez que l'on spécifie une hauteur et une largeurà notre SVG nous donnons aussi une couleur de fond pour le fichier SVG entier. si vous laissez le fond sans couleur, il serra transparent ce qui peut être une bonne chose si vous voulez que votre page HTML soit visible au travers.
ensuite remarquez l'élément
g , qui est un élément de groupement. Vous pouvez vous représenter exactement de la même façon que l'opération de groupement de Photoshop . Grouper des éléments ensemble est un façon très simple de les traiter tous ensemble quand vous les scriptez ou les transformez. De plus vous pouvez placer des valeurs par défauts pour certains styles qui se propagerons à tous leurs enfants. Dans l'exemple ci dessus on donne la valeur par défaut
fill="blue" dont tous les enfants vont hériter: on choisit une police de 18 pixels; on centre le texte au milieu de l'image et on choisit la police sherif.
On utilise ensuite un élément
circle a dessiner à l'écran. on choisit l'emplacement du centre du cercle en utilisant
cx et
cy et on décide d'un rayon avec
r . On peut spécifier la couleur de la ligne de contour à utiliser avec l'attribut
stroke, et on donne la largeur de la ligne avec
stroke-width.
In SVG, text doesn't line wrap (ndt: désolé encore une fois, le sens m'échappe), donc nous créons deux élément
text et nous donnons la localisation
x et
y pour les placer.
Changer le rendu
Par défaut, nous utilisons le rendu flash sur Internet Explorer alors que nous utilisons le rendu natif sur les autres navigateurs comme firefox ou safari . Vous pouvez optionnellement changer cette façon de faire et forcer le rendu flash sur tout les navigateurs. Cela peut rendre le dévellopement plus simple car vous pouvez utiliser le rendu SVG Web flash sur firefox et son set complet d'outils de debuggage et de devellopement. Vous pouvez aussi choisir de déployer en utilisant le rendu Flash pour tous les navigateurs de manière à utiliser les posibilités SVG qui ne sont pas nativement présentes ou pour avoir un environnement de devellopement plus homogène.
Vous pouvez changer votre rendu de deux manières. Premièrement vous pouvez forcer le rendu Flash en changeant l'URL de votre page avec les flags suivants :
http://127.0.0.1:8080/samples/javascript-samples/helloworld.html?svg.render.forceflash=trueen cliquant sur ce lien, par exemple, va vous montrer le fichier helloworld.html mais va forcer le rendu flash à être utiliser pour tout. Vous pouvez également placer svg.render.forceflash à false.
La seconde façon de modifier le rendu est d'ajouter une balise meta dans votre page HTML:
<meta name="svg.render.forceflash" content="true">
Déployer SVG Web
Voyons comment vous pouvez déployer votre fichier SVG et SVG Web sur votre serveur web.
Dans un premier temps, téléversé l'archive ZIP sur votre serveur Web. Les fichiers suivants doivent être présent:
* src/svg.js
* src/svg.htc
* src/svg.swf
les autres fichiers dans l'archive ZIP sont optionels; certains sont assez utiles et peuvent vous rendre service pendant votre déploiement.
Notez que tout les fichiers SVG Web doivent être sur le même domaine que toutes les pages qui pourrait utiliser la bibliothèque. Par exemple, si vous avez
http://example.com/mypage.html, alors vous devez vous assurer que les fichiers cités plus haut sont eux aussi sur
http://exemple.com placer ces fichier sur
static.example.com ne fonctionnera pas. Ceci est du aux limitations des fichiers Flash et Mircosoft HTC
(svg.htc) qui sont utilisés par SVG Web.
Vous devez vous assurer que votre serveur web possède le règlages MIME correcte pour les fichiers Flash SWF
(application/x-shockwave-flash) et fichiers Microsoft HTC
(text/x-component). Puisque de nombreux devellopeurs ne savent pas ce qu'est un type MIME ou n'ont pas la possibilité de changer les règlages de leur serveur, SVG Web fournis de nombreux outils pour rendre cela plus simple.
Premièrement votre serveur web est probablement règlé correctement et il n'y as rien à changer.
Pour le verifier, assurez vous que le fichier
src/tools/config.html est présent sur votre serveur et ouvrez le dans votre navigateur. Ce fichier va scanner et verifier que les règlages des type Mime sont bons. S'ils ne le sont pas, il vous dira lesquels ne sont pas bon et vous pourrez passez à l'étape suivante.
A ce moment, la meilleur chose à faire est
actuellement de modifier votre serveur web pour ajouter ces type MIME. Si vous n'avez pas la possibilité ou les connaissance pour le faire, trois fichiers simple sont joints pour vous permettre de faire le travail à vottre place en fonction de ce que vous pouvez utiliser sur votre serveur web (PHP, ASP ou JSP). En fonction de ce que vous pouvez utiliser sur votre serveur, choisissez l'un de ces fichiers :
*
src/svg-htc.php - Ferra le travail pour vous si vous pouvez utiliser du PHP sur votre serveur
*
src/svg-htc.jsp - Ferra le travail pour vous si vous pouvez utiliser du JSP sur votre serveur
*
src/svg-htc.asp - Ferra le travail pour vous si vous pouvez utiliser du ASP sur votre serveur
Si vous choisissez l'un de ces fichiers, vous devez l'indiquer en utilisant l'attribut optionnel
data-htc-filename dans chaque page HTML qui utilise SVG Web:
<script src="../svg.js" data-path=".."
data-htc-filename="svg-htc.php"></script>
Donnez simplement le nom comme
svg-htc.jsp, plutôt que le chemin complet comme
../../svg-htc.jsp. Notez que si vous utilisez l'un de ces fichiers de manière à forcer automatiquement le type MIME, quand vous utilisez l'une des démos livrées ou un exemple, vous devez ajouter le texte suivant pour indiquer d'utiliser votre fichier HTC sinon, cela ne marchera pas :
http://example.com/svgweb/samples/demo.html?svg.htcFilename="svg-htc.php">Scripter SVG
Regardons comment scripter votre SVG en utilisant JavaScript. Cette section n'as pas pour but d'être un totoriel sur JavaScript plus SVG; au lieu de cela c'est un aperçu vraiment basique montrant quelques petites divergences nécessaires à SVG Web
SVG Web inclu un large éventail du DOM (Model Objet du Document) quand vous travaillez avec le SVG. Il est pratiquement complet même s'il y as quelques ommissions ou des zones sur lesquelles nous travaillons actuellement. Votre JavaScript, même sur Internet Explorer, à 'l'illusion' d'avoir le support SVG natif.
Commençons par scripter le SVG qui est ajouté dircetement dans votre page web. Nous allons utiliser les sources qui sont dans helloworld.html. Premièrement, avant de travailler avec le DOM ou avec SVG sur votre page, vous devez attendre le chargement complet de votre page, comme vous le feriez avec du HTML normal:
window.onload = function() {
// do stuff now
}
Sur la page
helloworld.html vous allez voir deux boutons "change colors" et "change text". quand ils sont cliqués, ils changent la couleur des cercles dans les deux images SVG de la même manière qu'ils changent le texte. Le script pour tout cela n'est qu'une balise
<script> normale ajouté à la page, dans les deux fonctions
changeColors et
changeText. Regardons la méthode
changeColors:
function changeColors() {
// get elements from our embedded SVG first
// use getElementById
var circle = document.getElementById('myCircle');
// change using setAttribute
circle.setAttribute('stroke', 'green');
// can also use style property
circle.style.fill = '#8A2BE2';
// change the value inside our SVG OBJECT now
// use the 'contentDocument' property to navigate into the SVG OBJECT
var doc = document.getElementById('mySVGObject').contentDocument;
circle = doc.getElementById('myCircle');
circle.style.fill = '#8A2BE2';
}
Premièrement vous remarquez que nous récupérons notre cercle sur la page en utilisant un appel
document.getElementById('myCircle') normal. Cela va récupérer notre
circle qui est ajouté directement dans notre page. Une fois que nous avons notre cercle, nous pouvons changer la couleur soit en utilisant un appel
'setAttribute' ou en changeant simplement la valeur de
circle.style.fill; les deux méthodes donne le même résultat. Notez que ce code fonctionne même sur Internet Explorer; SVG Web produit la magie nécessaire pour donner l'illusion d'un support natif.
De manière à changer la couleur du cercle à l'interieur de notre SVG OBJECT ( la seconde image SVG) nous devons 'naviguer' à l'interieur. La clé ici est d'utiliser la propriété
contentDocument. Nous récupérons d'abord l'objet SVG de la page par son ID, et nous prenons ensuite la propriété
contentDocument. Nous avons alors un objet
document normal avec lequel nous pouvons travailler, on récupère simplement le cercle qui est inséré à l'interieur de l'objet SVG et nous changeons sa couleur.
// use the 'contentDocument' property to navigate into the SVG OBJECT
var doc = document.getElementById('mySVGObject').contentDocument;
circle = doc.getElementById('myCircle');
circle.style.fill = '#8A2BE2';
Regardons maintenant la fonction changeText; nous l'avons écrit un peu différement que nécessaire pour vous montrer les autres fonctions DOM que nous pouvons utiliser:
function changeText() {
// use getElementsByTagNameNS to get our text from our embedded SVG
// 'svgns' is a 'magic' variable that we make available; it is just
// the SVG namespace 'http://www.w3.org/2000/svg' so you don't always
// have to remember it. We also make the variable 'xlinkns' available.
var textElems = document.getElementsByTagNameNS(svgns, 'text');
// change the text Hello World to Goodbye World
for (var i = 0; i < textElems.length; i++) {
if (textElems[i].childNodes[0].nodeValue == 'Hello World') {
textElems[i].childNodes[0].nodeValue = 'Goodbye World';
}
}
// change the text inside our SVG OBJECT as well
var doc = document.getElementById('mySVGObject').contentDocument;
textElems = doc.getElementsByTagNameNS(svgns, 'text');
for (var i = 0; i < textElems.length; i++) {
if (textElems[i].childNodes[0].nodeValue == 'Hello World') {
textElems[i].childNodes[0].nodeValue = 'Goodbye World';
}
}
}
Premièrement remarquez que nous pouvons obtenir les balises SVG via la page pas seulement par leurs ID; néanmoins, c'est vraiment important que vous utilisiez la méthode qui gère les espaces de nom
getElementsByTagNameNS plutot que
getElementsByTagName. Sinon, cela ne marchera pas! Vous noterez que nous ateignons la variable
global svgns que SVG Web rend utilisable et facilite le travail avec les espaces de nom SVG ( une variable similaire est disponible pour les espace de nom Xlink,
xlinkns quand nous faisons des liens hypertexte). Joint ensemble, cela permet de travailler aisément avec les méthode d'espace de nom:
var textElems = document.getElementsByTagNameNS(svgns, 'text');Cela va récupérer tout les éléments text SVG qui sont directement ajoutés à votre page ( i.e cela vous renvoie deux éléments
text; cela ne vous retournera aucun SVG OBJECT puisqu'ils ne sont pas directement dans la page. Une fois que nous avons nos éléments, nous allons pouvoir créer une boucle dessus et récupérer la valeur du texte en appellant
textElems[i].childNodes[0].nodeValue. La valeur d'un élément texte est contenue dans un noeud DOM
text. Nous avons donc à prendre le premier enfant et récupérer sa valeur. Une fois que nous avons trouvé un noeud qui as la valeur "Hello World" , nous changeons la valeur du texte de façon similaire.
Nous ne créons aucun noeud de façon dynamique dans notre exemple
helloworld.html, mais voici un exemple simple d'un bloc de code montrant comment nous nous y serions pris. Le plus important, regardez comment nous utilisons la méthode d'espace de nom
createElementns au lieu de
createElement:
var el = document.createElementNS(svgns, 'circle');
el.setAttribute('cx', 200);
el.setAttribute('cy', 200);
el.setAttribute('r', 5);
el.setAttribute('fill', '#223FA3');
el.setAttribute('stroke-width', '1px');
el.setAttribute('stroke', 'black');
var group = document.getElementById('myGroup');
group.appendChild(el);
Une petite chose important à garder à l'esprit est que lorsque vous créez un noeud DOM texte, que vous allez utiliser avec votre SVG, vous devez ajouter un argument boléen supplémentairepour aider SVG Web :
var textNode = document.createTextNode('hello world', true);
var svgText = document.createElementNS(svgns, 'text');
svgText.setAttribute('x', 100);
svgText.setAttribute('y', 100);
svgText.appendChild(textNode);
Maintenant, regardons comment scripter à l'interieur d'un fichier SVG plutôt que de l'ajouter directement dans votre page HTML. Nous allons utiliser le fichier
helloworld.svg comme un exemple. Je vais vous montrer le fichier entier d'abord puis le découper ensuite :
<svg onload="loaded()">
<script type="text/javascript"><![CDATA[
function loaded() {
// change onloadFunc to point to your real onload function that you
// want called when the page is truly ready
var onloadFunc = doload;
if (top.svgweb) {
top.svgweb.addOnLoad(onloadFunc, true, window);
} else {
onloadFunc();
}
}
function doload() {
// developers original onload handler
// add an event listener to our circle; on* style events added right
// to the markup are not yet supported
var circle = document.getElementById('myCircle');
circle.addEventListener('mousedown', function() {
alert('You pressed the mouse button on our circle!');
}, false);
}
]]></script>
Premièrement, notez que nous avons un peu de triche à réaliser sur l'évenement
onLoad de manière à aider SVG Web. Si vous voulez avoir du script dans votre fichier SVG, vous devez changer l'attribut SVG
onload pour pointer vers une fonction spéciale,
loaded que vous devez simplement copier-coller dans votre code et changer la variable
onloadFunc pour pointer vers le nom de votre fonction réelle :
function loaded() {
// change onloadFunc to point to your real onload function that you
// want called when the page is truly ready
var onloadFunc = doload;
if (top.svgweb) {
top.svgweb.addOnLoad(onloadFunc, true, window);
} else {
onloadFunc();
}
}
Pour les évenement SVG, nous supportons actuellement seulement la méthode
addEventListener:
// add an event listener to our circle; on* style events added right
// to the markup are not yet supported
var circle = document.getElementById('myCircle');
circle.addEventListener('mousedown', function(evt) {
alert('You pressed the mouse button on our circle: ' + evt.target.id);
}, false);
Cela va faire apparaitre une boite d'alerte quand l'utilisateur va cliquer. Notez que l'objet
event est passé à la méthode (même sur Internet Explorer -- utilisez ceci au lieu de
window.event).Vous pouvez utiliser l'objet
event pour avoir des information, comme l'ID de la cible:
evt.target.id.
astuces et conseils
Cette section vous donne des conseils et des astuces pour vous aider à la performance et la stabilité.
*Le rendu SVG natif de Firefox peut parfois être lent dans certains cas. Dans ces circonstances, il est recommandé que vous utilisiez simplement le rendu SVG Web en remplacement sur Firefox si vous avez des problèmes de performance ou de stabilité avec le rendu natif de Firefox.
*Si vous faites de nombreuses opérations DOM dans une boucle, comme créer des éléments ou mettre à jour un attribut, vous pouvez significativement accélérer les choses en utilisant la méthode
suspendRedraw. Un exemple :
var root = document.getElementsByTagNameNS(svgns, 'svg')[0];
var circles = document.getElementsByTagNameNS(svgns, 'circle');
var suspendID = root.suspendRedraw(5000);
// let's say there are 500 circles
for (var i = 0; i < circles.length; i++) {
circles[i].setAttribute('fill', 'red');
}
root.unsuspendRedraw(suspendID);
// could also do root.unsuspendRedrawAll() to clear out all suspended
// operations
La méthode
suspendRedraw prend un compte à rebours en milliseconde avant que le réaffichage soit forcé; un chiffre élévé est recommandé.
Lisez la section suspendRedraw dans le manuel utilisateur pour plus de details sur ces méthodes.
*Si vous créez beaucoup de noeud DOM en une seule fois, vous devriez utiliser l'API DOM DocumentFragment. Cela accélèrera de beaucoup les choses, surtout si vous créez ces noeuds au chargement de la page. Pour créer un DocumentFragment pour être utilisé avec SVG, vous devez appeler
document.createDocumentFragment(true). Notez le paramètre supplémentaire
true --ceci est requis par SVG Web pour l'aider à savoir que ce DocumentFragment sera utilisé avec SVG, et qu'il pourra être utilisé par le backend Flash. Un petit exemple :
// note the extra 'true' argument
var frag = document.createDocumentFragment(true);
for (var i = 0; i < 100; i++) {
var circle = document.createElementNS(svgns, 'circle');
circle.setAttribute('x', i * 10);
circle.setAttribute('y', 10);
circle.setAttribute('r', 5);
circle.setAttribute('fill', 'red');
// append to DocumentFragment
frag.appendChild(circle);
}
// now append the DocumentFragment to the DOM
var svg = document.getElementsByTagNameNS(svgns, 'svg')[0];
svg.appendChild(frag); // DocumentFragment disappears leaving circles
regardez la section sur DocumentFragments dans le manuel utilisateur pour plus de détails.
