nicht angemeldet
Hej Frank,
Hab mir die Leistungsfähigkeit von SVG mal angeguckt und muss leider sagen das ich doch son bischen enttäuscht bin.
Bei SVG Dateien mit einer Größe von 2MB ist klar, dass das Rendering eine Zeit dauert...
Hierbei sei auch noch anzumerken, dass Firefox nicht unbedingt der schnellste beim Darstellen von SVG ist. Da ich an einem ähnlichen Projekt arbeite, hab ich mir die Performance der unterschiedlichen Browser genauer angesehen.
Folgendes Beispiel erzeugt 360 Kreise, mit einem Durchmesser von 10px, in einem Muster.
//die Circle-Klasse erzeugt ein svg:circle bzw. vml:oval DOM Element
//canvas repräsentiert die Zeichenfläche (in SVG: svg-Element, in VML: group-Element)
//'canvas.add' fügt den erzeugten DOM Knoten mittels 'appendChild' in die Zeichenfläche ein.
function circlePattern(){
var radius = 15;
var centerX, centerY = 400;
for(var i=0; i<360; i++){
canvas.add( new Circle(
centerX + (Math.sin( i ) * radius),
centerY + (Math.cos( i ) * radius),
10
);
radius += 0.5;
}
}
Das Ergebnis:
Firefox 3.5: 800ms
Chrome & Safari: 2ms !
IE (rendert VML Elemente): 21000ms !
IE (rendert in Flash): 21ms
Beim IE ist mir aufgefallen, dass das Einfügen der erzeugten VML Elemente in den DOM das Bottleneck darstellt. Ist jedoch der VML-Code in der Webseite eigebettet, so rendert er diesen schneller als Firefox SVG.
Aber nochmal danke für den Tipp ich finde die Flash-Varianteum einiges schöner wie den Adobe SVGView.
Wie oben beschrieben ist die Darstellung von SVG in Chrome und Safari sehr schnell. Sollte es nun egal sein, ob man für dein Projekt ein Plugin benötigt, so würde ich dir Google Chrome Frame empfehlen.
Dabei brauchst du keinen Umweg über PNG's zu gehen und SVG bleibt scriptable...
Greetz
dave