# Xhtml + Object + Svg = ?



## CHaoSlayeR (24. Juni 2009)

Hallöchen zusammen,

habe grad ein paar kleine Problemchen, und zwar mit mehreren Browsern.

Ich versuche gerade eine Seite zu erstellen in denen es für die neueren Browser-Versionen SVG-Grafiken gibt, die ordentlich mit der Fenstergröße skalieren (mittels CSS in Prozentwerten positioniert/dimensionert). Das klappt mit allem drum und dran perfekt im Firefox und Opera sowohl direkt innerhalb des XHTML-Files über SVG-Namespace als auch extern eingebunden per OBJECT-Tag. Auch die Skalierung bleibt dabei erhalten.

Nun zum ersten Problem:

Konqueror 4.2.2 kann zwar mit integriertem SVG so gar nichts anfangen, allerdings selbst mit OBJECT-Tag klappts so gar nicht, denn jedes OBJECT-Element bekommt einen weißen Hintergrund verpasst (den ich irgendwie nicht weg kriege) und zudem skaliert er das SVG überhaupt nicht, sondern zeigt mir immer nur den oberen linken Ausschnitt aus dem Bild. Darüber hinaus skalliert er scheinbar das OBJECT-Element selbst, allerdings beachtet auch dabei nicht die aspect ratio des SVG's, weshalb er dann schon viel früher als erwartet das Element unten abschneidet.

Zweites Problem:

Chromium gibt mir ebenfalls immer einen weißen Hintergrund bei OBJECT-Elementen, die man auch dort scheinbar nicht weg bekommt. Zwar skaliert er scheinbar das SVG korrekt nach dem aspect ratio, allerdings schneidet er auch viel zu früh das OBJECT-Element nach unten ab, sodass die Skalierung dann viel zu heftig ausfällt (er skaliert dann auf die Höhe des OBJECT-Elements und nicht wie in CSS spezifiziert auf dessen Breite, wobei die Höhe sich automatisch nach der Skalierung ergeben sollte).

Drittes Problem:

Nochmal Chromium, da dieser zwar integriertes SVG darstellt (zwar ohne Filter und unter nicht-Beachtung von "shape-rendering", "image-rendering", etc., aber OK), allerdings sich dabei nicht dazu bewegen lässt die Elemente CSS-getreu zu positionieren (alles wird einfach vertikal mittig auf der Seite übereinandergeklatscht, horizontal stimmts schon).


Da ich gern (zwecks sauberem degrading) das OBJECT-Element nutzen würde, wäre meine Frage jetzt, ob mir da jemand weiterhelfen kann. Vielleicht hat ja schon mal der eine oder die andere genau sowas erfolgreich umgesetzt?

Danke im voraus,

C]-[aoZ


----------



## CHaoSlayeR (24. Juni 2009)

Habe mithilfe einer kleinen Testseite nun erkannt, dass der Chromium einerseits falsch positioniert und andererseits die Höhe der Elemente auf 100% setzt und dann den Inhalt zentriert, sei es per integriertem SVG oder extern per OBJECT-Tag:

http://www.chaoslayer.de/test/svg/svg-001.xhtml

Habe grad kein Windows- und MacOS-System zur Hand. Könnte sich das mal jemand anschauen mit dem IE und Adobe SVG plugin (sofern der IE nicht zum Download einlädt)? Safari 3/4 wär auch ganz interressant, dürfte aber fast so sein, wie beim Chromium, da beide WebKit verwenden. Ach ja, den Chrome/Iron unter Windows wäre auch ganz interessant.

Der Konqueror ist noch schlimmer. Der kollabiert das integrierte SVG einfach in der Höhe, wenn man nur die Breite angibt. Und wenn ich dann einfach mal die Höhe auf "auto" setze, gibts beim Seiten-Refresh nen Crash. Super. Kein wunder, warum der kaum noch benutzt wird.


Danke und Gruß,

    C]-[aoZ


----------

