By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,064 Members | 1,449 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,064 IT Pros & Developers. It's quick & easy.

Inline SVG in HTML page (Firefox 1.5)

P: n/a
VK
Is it possible to include SVG object right onto HTML page in Firefox
1.5?
(I mean native SVG, not SVG plugin)
....
<svg>
....
</svg>

All samples on mozilla.org are either stay-alone .svg files or XML
files. When trying to insert them in HTML page it just doesn't display.
Does it mean that you always have to use XML or XHTML, or I'm just
missing something?

Jan 5 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
VK wrote:
Is it possible to include SVG object right onto HTML page in Firefox
1.5?
(I mean native SVG, not SVG plugin)
...
<svg>
...
</svg>
That is possible in HTML, but not Valid or working. HTML has no concept
of other namespaces.
All samples on mozilla.org are either stay-alone .svg files or XML
files. When trying to insert them in HTML page it just doesn't display.
Of course.
Does it mean that you always have to use XML or XHTML, or I'm just
missing something?


Yes. SVG is an XML application as is XHTML, so an XML parser is required
for it if used inline/native:

,-<URL:http://www.mozilla.org/projects/svg/
|
| [...]
| Native SVG vs. plug-in SVG
|
| The Mozilla SVG implementation is a native SVG implementation. This is
| as opposed to plug-in SVG viewers such as the Adobe viewer (which is
| currently the most popular SVG viewer).
|
| Some of the implications of this are:
|
| * Mozilla can handle documents that contain SVG, MathML, XHTML, XUL,
| etc. all mixed together in the same 'compound' document. This is
| being made possible by using XML namespaces.
^^^^^^^^^^^^^^

HTH

PointedEars
Jan 5 '06 #2

P: n/a
VK

Thomas 'PointedEars' Lahn wrote:
That is possible in HTML, but not Valid or working. HTML has no concept
of other namespaces.


? Custom namespaces are used left and right in "text/html" documents. I
believe that
<html xmlns:foo="far">
is pretty standard and blessed by W3C.

In order to "activate" VML tags in IE one has to:

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns="http://www.w3.org/TR/REC-html40">

and browser "knows" about v-tags ever after.

You mean this bird won't fly with SVG, and it has to be fully-qualified
XHTML page (possibly required to be served with the right Content-Type
header) ?

Jan 5 '06 #3

P: n/a
VK wrote:
Thomas 'PointedEars' Lahn wrote:
That is possible in HTML, but not Valid or working. HTML has no concept
of other namespaces.
? Custom namespaces are used left and right in "text/html" documents.


Such documents should not be served as text/html, because they are not HTML.
I believe that
<html xmlns:foo="far">
is pretty standard and blessed by W3C.
That is not Valid _HTML_, there is no such attribute in _HTML_.
In order to "activate" VML tags in IE one has to:

<html xmlns:v="urn:schemas-microsoft-com:vml" ^^^ ^^^ xmlns="http://www.w3.org/TR/REC-html40"> ^^^ ^^^^^^
and browser "knows" about v-tags ever after.
As I said before in another thread[1] (and you concurred, if you want to
remember[2] -- or had you simply not understood?), this is IE-proprietary
non-standard behavior. XHTML or any XML document type is indicated at
least by the DOCTYPE declaration, not some proprietary attribute names in
undeclared HTML.

[1] news:14*****************@PointedEars.de
[2] news:11**********************@g14g2000cwa.googlegr oups.com
You mean this bird won't fly with SVG,
It MUST NOT. VML is not SVG, and HTML 4 does not allow for namespace
definitions or inline SVG because of the missing XML Namespaces support.

<http://msdn.microsoft.com/workshop/author/vml/ref/appendix.asp>
and it has to be fully-qualified XHTML page (possibly required to be
served with the right Content-Type header) ?


Yes, I have tested that. It has to be an XML document type served with
an XML media type, only the latter will trigger Gecko's XML parser.
X-Post & F'up2 ciwam (I do not know an SVG/XML group); you were
off-topic in the first place, I just forgot to honor that before.

PointedEars
Jan 5 '06 #4

P: n/a
VK
Thomas 'PointedEars' Lahn wrote:
and it has to be fully-qualified XHTML page (possibly required to be
served with the right Content-Type header) ?
Yes, I have tested that. It has to be an XML document type served with
an XML media type, only the latter will trigger Gecko's XML parser.
That sucks and must be (and will be) hacked. Thank you for the
Content-Type check.
X-Post & F'up2 ciwam (I do not know an SVG/XML group); you were
off-topic in the first place, I just forgot to honor that before.


As you may guess it was not about painting butterflies in the page ;-)
Both VML and SVG are scriptable over JavaScript. But before to script
something you need to get into page, right?

As the current Web is still HTML (not XHTML) in its overhalming
majority, a hack needs to be found for Firefox.

Jan 6 '06 #5

P: n/a


VK wrote:
Is it possible to include SVG object right onto HTML page in Firefox
1.5? All samples on mozilla.org are either stay-alone .svg files or XML
files. When trying to insert them in HTML page it just doesn't display.
Does it mean that you always have to use XML or XHTML, or I'm just
missing something?


You need to make sure you have markup parsed by an XML parser or you use
namespace aware DOM methods to create your elements. The following works
in a text/html document with Firefox 1.5:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '200');
svg.setAttribute('viewBox', '0 0 200 200');
var circle = document.createElementNS('http://www.w3.org/2000/svg',
'circle');
circle.setAttribute('cx', '100');
circle.setAttribute('cy', '100');
circle.setAttribute('r', '30');
circle.setAttribute('fill', 'green');
svg.appendChild(circle);
document.body.appendChild(svg);

But this is of course not something to rely on generally, a HTML
document does not need to support createElementNS.

If you want to include SVG graphics in HTML documents then use object or
iframe to stay within the HTML standard or perhaps embed which is not
part of the HTML standard but has rather wide support and might get
better results than object currently as I think for instance the latest
Adobe SVG viewer 3.something releases for security reasons disable
scripting in SVG if object is used to embed the graphics in an HTML
document.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jan 6 '06 #6

P: n/a
VK

Martin Honnen wrote:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '200');
svg.setAttribute('viewBox', '0 0 200 200');
var circle = document.createElementNS('http://www.w3.org/2000/svg',
'circle');
circle.setAttribute('cx', '100');
circle.setAttribute('cy', '100');
circle.setAttribute('r', '30');
circle.setAttribute('fill', 'green');
svg.appendChild(circle);
document.body.appendChild(svg);
Youppy!
Great thanks.
But this is of course not something to rely on generally, a HTML
document does not need to support createElementNS.


We have to live and work in an imperfect unstable world :-( :-)

Jan 6 '06 #7

P: n/a
VK
<object type="image/svg+xml" data="foo.svg" width="200"
height="200"></object>

:-)

Jan 7 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.