SVG-Unterstützung erkennen

[misterunknown]

Moin,

Google offenbarte mir gerade ein einfaches Javascript-Snippet, mit welchem man wohl die SVG-Unterstützung des Browsers erkennen können sollte:

function supportsSvg() {  
    return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")  
}

Selbiges liefert mir hier allerdings beim Chrome 20 ein "false".
Auf welche Weise lässt sich das halbwegs sicher erkennen? Ist es vielleicht sinnvoll in dem Falle einfach nur auf Internet Explorer zu prüfen und in dem Fall ein anderes Bild einzubauen? Die meisten anderen Browser unterstützen SVG ja schon recht lange (Firefox, Chrome, Safari, Opera).

Grüße Marco

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

Auf welche Weise lässt sich das halbwegs sicher erkennen?

Du könntest ja mal schauen, wie Modernizr das macht.

Qapla'

[misterunknown]

Moin,

Du könntest ja mal schauen, wie Modernizr das macht.

Danke für den Hinweis. Allerdings ist der Code ganz schön undurchsichtig.
Ich habe mir den Code generieren lassen.
Eine Suche nach "svg" brachte mich auf folgenden Abschnitt:

n.svg=function() {  
return!!b.createElementNS&&!!b.createElementNS(m.svg,"svg").createSVGRect}

Damit kann ich aber nicht sehr viel anfangen. Ich weiß beispielsweise nicht was return!!irgendwas bewirkt. So allein kann man das auch nicht ausführen, da das Objekt (?) b nicht vorhanden ist. Eine konkrete Definition von "b" hab ich aber auch nicht gefunden. Allerdings wird das komplette Objekt mit
function(a,b,c) { [...] }
definiert. Hat jemand eine Idee, wie ich diese eine Funktion da herausziehen könnte? Also durch was ich "b" ersetzen muss?

Grüße Marco

[ChrisB]

Hi,

Damit kann ich aber nicht sehr viel anfangen. Ich weiß beispielsweise nicht was return!!irgendwas bewirkt.

Es konvertiert einen Wert in einen echten Boole’schen Wert.

So allein kann man das auch nicht ausführen, da das Objekt (?) b nicht vorhanden ist.

„Standalone“-Version: http://diveintohtml5.info/everything.html#svg

MfG ChrisB

[misterunknown]

Moin,

Es konvertiert einen Wert in einen echten Boole’schen Wert.

Ja, sowas dachte ich mir schon. Doppelte Negation. Clever^^

„Standalone“-Version: http://diveintohtml5.info/everything.html#svg

Danke. Ist ungefähr der gleiche Code, den Modernizr verwendet.

Grüße Marco

[molily]

Danke für den Hinweis. Allerdings ist der Code ganz schön undurchsichtig.

Kein Wunder, er ist minified.

Ich habe mir den Code generieren lassen.

Du solltest nicht komprimierten Production-Code generieren und dann den versuchen zu lesen.

Erst einmal steht der Quellcode auf Github und zweitens kannst du dir eine Development-Version generieren (auf »Development« klicken), dessen Code nicht minified ist.

Mathias

[misterunknown]

Moin,

Kein Wunder, er ist minified.
Erst einmal steht der Quellcode auf Github und zweitens kannst du dir eine Development-Version generieren (auf »Development« klicken), dessen Code nicht minified ist.

Ergibt Sinn, ich hab mich schon gewundert, welche Freaks solchen Code schreiben^^

Danke, ich habe nun meine Funktion :)

Grüße Marco

[molily]

Hallo,

Auf welche Weise lässt sich das halbwegs sicher erkennen?

SVG ist ein großer Standard, was genau brauchst willst du wissen? Grundlegende Unterstützung? Da macht es wohl eher Sinn, ein SVG-Element zu erzeugen und daran Methoden zu suchen, wie es Modernzr macht. Oder zu prüfen, ob die Prototypen der SVG-Elemente vorhanden sind (z.B. window.SVGDocument, window.SVGElement).

Ist es vielleicht sinnvoll in dem Falle einfach nur auf Internet Explorer zu prüfen und in dem Fall ein anderes Bild einzubauen?

IE9 kann SVG. Also fang gar nicht erst mit Browsererkennung an, die ist immer problematisch.

Die meisten anderen Browser unterstützen SVG ja schon recht lange (Firefox, Chrome, Safari, Opera).

Wieso überhaupt auf SVG-Unterstützung prüfen? Für einzelne Bilder kannst du auch einen Pixelgrafik-Fallback angeben. JavaScript ist dazu nicht nötig:

<object type="image/svg+xml" data="foo.svg" width="123" height="456">  
<img src="foo.png" alt="…">  
</object>  

Außerdem können ältere IEs VML, ein SVG-Vorgänger. Mit RaphaelJS könntest du browserübergreifende Vektorgrafiken zeichnen. Die Feature-Erkennung macht diese Bibliothek automatisch.

Mathias