473,385 Members | 1,453 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Inline SVG in HTML page (Firefox 1.5)

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
7 9314
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
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
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
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


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
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
VK
<object type="image/svg+xml" data="foo.svg" width="200"
height="200"></object>

:-)

Jan 7 '06 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Vic | last post by:
I suspect that Firefox is doing it right (it usually is) but I worked out a page thinking this *should* do what I want and lo and behold it did work in IE6 ...
23
by: Mat | last post by:
<div id="container"> <div id="main"> <div id="header"> <p class="Address">123 Fake Street, </p> <p class="City">Crazy City, </p> <p class="Province">Ontario </p> <p class="PostalCode">H0H...
16
by: google | last post by:
I've been reading old posts and Googling all nite for solutions to my problems, but I can't find any. I appreciate any help you can provide. Here is the link to the problem web site: ...
5
by: Viken Karaguesian | last post by:
Hello all, It seems to me that IE ignores other styles altogether when an inline style is used. As an example, check my site (in my signature file). In the "Latest News and Headlines" you can...
1
by: 4levels | last post by:
Dear Folks, I stumbled upon a strange behaviour of the XMLHttpRequest.. Maybe I'm just not well informed enough about its possibilities, so could someone please confirm my question? When I...
6
by: axlq | last post by:
I've spent most of the day struggling with what I thought would be a trivial problem. I have a hidden element that appears, outside of the normal flow, when the mouse hovers over an inline...
6
by: Jim | last post by:
I tried to build a "form" layout without using table like this http://www.coolshare.com/temp/images/css.jpg In order to get the layout, I need to set the light blue area at each line to a fix...
5
by: Awok | last post by:
Hi, i've been stuck trying to get the following code to display correctly in IE in which i've come across many diffrent theories but none which have worked possibly the box model problem. ...
37
by: Prisoner at War | last post by:
Actually, it doesn't have to be a blockquote...but I'm at my wits' end: I want to make bold several lines of text which have a pair of <br /tags between them...seems like the <b></bdo not "carry...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.