Question

165

How do you detect support for VML or SVG in a browser

rated 0 times [ 171] [ 6] / answers: 1 / hits: 36669 / 16 Years ago, tue, march 17, 2009, 12:00:00

I'm writing a bit of javascript and need to choose between SVG or VML (or both, or something else, it's a weird world).
Whilst I know that for now that only IE supports VML, I'd much rather detect functionality than platform.

SVG appears to have a few properties which you can go for: window.SVGAngle for example.

Is this the best way to check for SVG support?

Is there any equivalent for VML?

Unfortuntaly - in firefox I can quite happily do all the rendering in VML without error - just nothing happens on screen. It's quite hard to detect that situation from script.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryderalfonsos

Add To Favorites

Follow

Total Points: 655

Total Questions: 88

Total Answers: 91

Location: Nauru

Member since Thu, Feb 2, 2023

1 Year ago

ryderalfonsos questions

1 React application with Service Worker - Force update of browser cache on new version

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Call Action Method on button click ASP.NET MVC

Mon, Sep 9, 19, 00:00, 5 Years ago

1 Customizing the JS/CSS in a TrustPilot widget

Wed, Feb 13, 19, 00:00, 5 Years ago

1 How to display a string javascript in HTML

Tue, Feb 12, 19, 00:00, 5 Years ago

1 How to make an undo function in canvas?

Fri, Dec 28, 18, 00:00, 6 Years ago

View All

answered 16 Years ago judydestiniem · Accepted Answer

For VML detection, here's what google maps does (search for function Xd):

function supportsVml() {

    if (typeof supportsVml.supported == undefined) {

        var a = document.body.appendChild(document.createElement('div'));

        a.innerHTML = '<v:shape id=vml_flag1 adj=1 />';

        var b = a.firstChild;

        b.style.behavior = url(#default#VML);

        supportsVml.supported = b ? typeof b.adj == object: true;

        a.parentNode.removeChild(a);

    }

    return supportsVml.supported

}

I see what you mean about FF: it allows arbitrary elements to be created, including vml elements (<v:shape>). It looks like it's the test for the adjacency attribute that can determine if the created element is truly interpreted as a vml object.

For SVG detection, this works nicely:

function supportsSvg() {

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

}