Detect Firefox 1.5 from previous Firefox's

[VK]

if ((window)&&(window.netscape)&&(window.netscape.sec urity)) {
// OK, this is Gecko/Firefox or someone mimicing it so well
// that there is no way to catch it on the act.
}

But I need Firefox *1.5 or higher* or another (but sure) way to know
that this browser has native SVG support. Here I'm stock.

It seems there is window.navigator.productSub and on my Firefox 1.5
it's 20051111

But I'm not sure: this "build version" is going up guaranteed or it's
random like CLASSID? Also is the same Firefox release has the same
build for all platforms or not? mozilla.org seems silent.

[Thomas Meinike]

VK wrote:

But I need Firefox *1.5 or higher* or another (but sure) way to know
that this browser has native SVG support. Here I'm stock.

Try this (test for the new XML object, the SVG related MIME type and the
absence of a SVG plugin):

if(window.XML && navigator.mimeTypes &&
navigator.mimeTypes["image/svg+xml"] &&
!navigator.mimeTypes["image/svg+xml"].enabledPlugin)

I use this method in my examples like this one:
<http://svglbc.datenverdrahten.de/?code=Mozilla-DOM-Test_1&znr=on>

cu, Thomas
--
SVG - Learning By Coding
<http://svglbc.datenverdrahten.de/>

[Martin Honnen]

VK wrote:

But I need Firefox *1.5 or higher* or another (but sure) way to know
that this browser has native SVG support.

Native SVG can be disabled by setting the preference
svg.enabled
to false. If it is enabled Firefox 1.5 respectively Gecko 1.8 returns
true for
document.implementation.hasFeature("org.w3c.dom.sv g", "1.0")
otherwise false.
See also
<https://bugzilla.mozilla.org/attachment.cgi?id=190953>
which is a test case for
<https://bugzilla.mozilla.org/show_bug.cgi?id=302640>

Note that it is debatable whether Mozilla's incomplete SVG DOM
implementation should return true for that feature org.w3c.dom.svg but
they had that already enabled in Gecko 1.8, only permanent without
checking whether SVG is really enabled, now that the bug is fixed they
at least only return true if SVG is enabled.

There are other ways to check, if you create e.g.

var svgElement = document.createElementNS('http://www.w3.org/2000/svg',
'svg');

then only with native SVG supported and enabled that element is
implementing SVG DOM specific stuff, otherwise it will only be an
element object implementing core DOM stuff. That way you can check e.g.

var svgElement = document.createElementNS('http://www.w3.org/2000/svg',
'svg');
if (typeof svgElement.width != 'undefined') {
// native SVG (DOM) support
}

Both described checks are feature checks and no "Firefox 1.5" checks,
the latter test for instance will also yield true in Opera 9 preview
with its native SVG (DOM) support.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Martin Honnen]

Thomas Meinike wrote:

I use this method in my examples like this one:
<http://svglbc.datenverdrahten.de/?code=Mozilla-DOM-Test_1&znr=on>

It would be safer to use importNode instead of simply moving nodes, e.g.
you have

xmlobject=req.responseXML;
svgobject=xmlobject.documentElement.getElementsByT agName("g").item(0);
document.documentElement.appendChild(svgobject);

which works in Mozilla but would fail with Opera so doing

xmlobject=req.responseXML;
svgobject=document.importNode(xmlobject.documentEl ement.getElementsByTagName("g").item(0),
true);
document.documentElement.appendChild(svgobject);

instead is safer.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[VK]

Martin Honnen wrote:

VK wrote:

But I need Firefox *1.5 or higher* or another (but sure) way to know
that this browser has native SVG support.

Native SVG can be disabled by setting the preference
svg.enabled
to false. If it is enabled Firefox 1.5 respectively Gecko 1.8 returns
true for
document.implementation.hasFeature("org.w3c.dom.sv g", "1.0")
otherwise false.
See also
<https://bugzilla.mozilla.org/attachment.cgi?id=190953>
which is a test case for
<https://bugzilla.mozilla.org/show_bug.cgi?id=302640>

Note that it is debatable whether Mozilla's incomplete SVG DOM
implementation should return true for that feature org.w3c.dom.svg but
they had that already enabled in Gecko 1.8, only permanent without
checking whether SVG is really enabled, now that the bug is fixed they
at least only return true if SVG is enabled.

There are other ways to check, if you create e.g.

var svgElement = document.createElementNS('http://www.w3.org/2000/svg',
'svg');

then only with native SVG supported and enabled that element is
implementing SVG DOM specific stuff, otherwise it will only be an
element object implementing core DOM stuff. That way you can check e.g.

var svgElement = document.createElementNS('http://www.w3.org/2000/svg',
'svg');
if (typeof svgElement.width != 'undefined') {
// native SVG (DOM) support
}

Both described checks are feature checks and no "Firefox 1.5" checks,
the latter test for instance will also yield true in Opera 9 preview
with its native SVG (DOM) support.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Absolutely great, thanks to you both.

Hacking Mozilla was not so difficult after I've got (grace to Martin
Honnen) the meaning of createElementNS. This also covered the last
stable Camino (theoretically - as I don't have Mac OS handy).

Opera was more stubbering. btw Opera sucks (if someone is not aware of
it yet) - both in style scripting support and majorly in transparency.
But their SVG Tiny seems pretty stable and does what documented.

Easier of all was with Microsoft VML as it was originally (since 1998)
made for in-HTML use and is fully implemented in all releases.

Also I'd like to "copyright" by spelling it publically :-)) the term
SVL - Superimposed Vector Language - which is an interface atop Opera
SVG Tiny, Gecko SGV GodKnowsWhat and Microsoft VML.

Here's the current hack for *Opera* I'm working with - the code is a
total crazy mess as I'm working on the run and I have 2 days left for
the project. May be an inspiration to someone (doubt it *very* much) or
an advise. Transparency is a killer in Opera...

<html>
<head>
<title>Opera</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

<link id="style1" rel="stylesheet" href="_opera.css">

<script type="text/javascript">

function SVL_OperaCanvas(w,h,p,x,y) {
var ww = parseInt(w,10) || 250;
var hh = parseInt(h,10) || 200;
var pp = p || 'static';
var xx = parseInt(x,10) || 0;
var yy = parseInt(y,10) || 0;
var canvas = SVL_SVGOperaFactory('svg');
SVL_SVGOperaSetAttribute(canvas,'baseProfile','tin y');
SVL_SVGOperaSetAttribute(canvas,'version','1.1');
SVL_SVGOperaSetAttribute(canvas,'width',ww);
SVL_SVGOperaSetAttribute(canvas,'height',hh);
SVL_SVGOperaSetAttribute(canvas,'viewBox',('0 0 '+ww+' '+hh));
SVL_SVGOperaSetAttribute(canvas,'preserveAspectRat io','none');
var rect = SVL_SVGOperaFactory('rect');
SVL_SVGOperaSetAttribute(rect,'x',0);
SVL_SVGOperaSetAttribute(rect,'y',0);
SVL_SVGOperaSetAttribute(rect,'width',ww);
SVL_SVGOperaSetAttribute(rect,'height',hh);
SVL_SVGOperaSetAttribute(rect,'fill','#3067C0');
SVL_SVGOperaSetAttribute(rect,'fill-opacity','0.6');
SVL_SVGOperaSetAttribute(rect,'stroke','#0000FF');
SVL_SVGOperaSetAttribute(rect,'stroke-opacity','0.6');
SVL_SVGOperaSetAttribute(rect,'stroke-width','1px');
canvas.appendChild(rect);
return canvas;
}

function SVL_SVGOperaFactory(tag) {
return document.createElementNS('http://www.w3.org/2000/svg',tag);
}

function SVL_SVGOperaSetAttribute(obj,attr,val) {
obj.setAttributeNS('http://www.w3.org/2000/svg',attr,val);
}

function test() {
var obj = SVL_OperaCanvas();
document.getElementById('Layer1').appendChild(obj) ;
}
</script>
</head>

<body onload="test()">
<div id="Layer1" style="position:absolute; width:250px; height:200px;
z-index:1; left: 10px; top: 10px"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

</body>
</html>

[Martin Honnen]

VK wrote:

var canvas = SVL_SVGOperaFactory('svg');
SVL_SVGOperaSetAttribute(canvas,'baseProfile','tin y');
SVL_SVGOperaSetAttribute(canvas,'version','1.1');
SVL_SVGOperaSetAttribute(canvas,'width',ww);
SVL_SVGOperaSetAttribute(canvas,'height',hh); function SVL_SVGOperaFactory(tag) {
return document.createElementNS('http://www.w3.org/2000/svg',tag);
}

function SVL_SVGOperaSetAttribute(obj,attr,val) {
obj.setAttributeNS('http://www.w3.org/2000/svg',attr,val);

Note that the attributes (like width, height) on SVG elements are in no
namespace so trying to set those attributes in the SVG namespace
http://www.w3.org/2000/svg does not make sense, you either want
obj.setAttributeNS(null,attr,val)
or use setAttribute instead.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Thomas Meinike]

Martin Honnen wrote:

It would be safer to use importNode instead of simply moving nodes, ...

Thanks for the hint.

cu, Thomas
--
SVG - Learning By Coding
<http://svglbc.datenverdrahten.de/>

[VK]

Martin Honnen wrote:

Note that the attributes (like width, height) on SVG elements are in no
namespace so trying to set those attributes in the SVG namespace
http://www.w3.org/2000/svg does not make sense, you either want
obj.setAttributeNS(null,attr,val)
or use setAttribute instead.

I think it is discutable because in the given case I don't manipulate
width or height of HTML holder (like EMBED, OBJECT or IFRAME) but
directly SVG element itself which is not in HTML namespace. Nmaely
we're emulating the needed namespace environment for the svg object to
have it happy (as it was in <xml> or <svg> document), so anything
should come from that emulated environment (?)

<http://www.w3.org/TR/SVG/struct.html#SVGElement>
width = "<length>"
For outermost 'svg' elements, the intrinsic width of the SVG
document fragment

That's too much of abstract theory for my humble mind to get it right
away. Opera seems to eat it as it is just fine. But I promise to think
more over it :-)

[Martin Honnen]

VK wrote:

Martin Honnen wrote:

Note that the attributes (like width, height) on SVG elements are in no
namespace so trying to set those attributes in the SVG namespace
http://www.w3.org/2000/svg does not make sense, you either want
obj.setAttributeNS(null,attr,val)
or use setAttribute instead.

I think it is discutable because in the given case I don't manipulate
width or height of HTML holder (like EMBED, OBJECT or IFRAME) but
directly SVG element itself which is not in HTML namespace. Nmaely
we're emulating the needed namespace environment for the svg object to
have it happy (as it was in <xml> or <svg> document), so anything
should come from that emulated environment (?)

There is no HTML namespace or any namespaces in HTML as defined by the
W3C. And attributes in XML with namespaces are in no namespace unless
they have a qualified name with a prefix bound to a namespace URI. If
you have example XML/SVG markup alike
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200"></svg>
then the svg element is in the SVG namespace with namespace URI
http://www.w3.org/2000/svg but those attributes (width, height) are in
no namespace. The SVG specification defines a few attributes like
xlink:href (with the xlink prefix bound to the namespace URI
http://www.w3.org/1999/xlink) which are in a namespace but most of the
attributes on SVG elements are in no namespace.
And if you want to create such attributes in no namespace with the W3C
DOM Level 2 Core setAttributeNS method then you need to pass null for
the namespace URI to that method:
<http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614>
--

Martin Honnen
http://JavaScript.FAQTs.com/

[VK]

Martin Honnen wrote:

There is no HTML namespace or any namespaces in HTML as defined by the
W3C. And attributes in XML with namespaces are in no namespace unless
they have a qualified name with a prefix bound to a namespace URI. If
you have example XML/SVG markup alike
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200"></svg>
then the svg element is in the SVG namespace with namespace URI
http://www.w3.org/2000/svg but those attributes (width, height) are in
no namespace. The SVG specification defines a few attributes like
xlink:href (with the xlink prefix bound to the namespace URI
http://www.w3.org/1999/xlink) which are in a namespace but most of the
attributes on SVG elements are in no namespace.
And if you want to create such attributes in no namespace with the W3C
DOM Level 2 Core setAttributeNS method then you need to pass null for
the namespace URI to that method:
<http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614>

Aha...
I just checked Opera with setAttribute() instead of setAttributeNS()
and it eats it too. Still I feel a bit uneasy to create viewBox or
preserveAspectRatio like some vspace/hspace - but it can be just my
paranoia :-)
I think the explicit "no-name space" over setAttributeNS(null,a,v) is
the best (?)

By any chance: do you know what standards say to do if namespace is not
defined or attribute is not defined in this namespace? Like
setAttributeNS(someNS,"foobar",100) or
setAttributeNS("foobar",width,100). Does it suppose to fall into
"no-name" space or crash? (Just thinking to save on a uniform
constructor).

I'm not asking to find the info - I can do it myself of course. But if
you know an immediate answer...