Inline SVG in HTML page (Firefox 1.5)

V

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?
 
T

Thomas 'PointedEars' Lahn

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

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.
Click to expand...

Of course.
Does it mean that you always have to use XML or XHTML, or I'm just
missing something?
Click to expand...

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
 
V

VK

Thomas said:
That is possible in HTML, but not Valid or working. HTML has no concept
of other namespaces.
Click to expand...

? 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) ?
 
V

VK

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.
Click to expand...

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.
Click to expand...

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.
 
M

Martin Honnen

VK said:
Is it possible to include SVG object right onto HTML page in Firefox
1.5?
Click to expand...
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?
Click to expand...

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.
 
V

VK

Martin said:
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);
Click to expand...

Youppy!
Great thanks.
But this is of course not something to rely on generally, a HTML
document does not need to support createElementNS.
Click to expand...

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Which browsers support svg, and how? 2
Javascript displays Chinese writing on svg file 2
Adding SVG via Javascript in Explorer 2
Mouse events using Javascript with SVG 6
Detect Firefox 1.5 from previous Firefox's 9
Sizing SVG in HTML 2
svg question 2
Building SVG document Using DOM Interface Inside HTML Document 2

Members online

No members online now.
Total: 35 (members: 0, guests: 35)
Robots: 409

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top