473,799 Members | 2,842 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 9353
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:sc hemas-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:sc hemas-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******** *********@Point edEars.de
[2] news:11******** **************@ g14g2000cwa.goo glegroups.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.create ElementNS('http ://www.w3.org/2000/svg', 'svg');
svg.setAttribut e('width', '200');
svg.setAttribut e('height', '200');
svg.setAttribut e('viewBox', '0 0 200 200');
var circle = document.create ElementNS('http ://www.w3.org/2000/svg',
'circle');
circle.setAttri bute('cx', '100');
circle.setAttri bute('cy', '100');
circle.setAttri bute('r', '30');
circle.setAttri bute('fill', 'green');
svg.appendChild (circle);
document.body.a ppendChild(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.create ElementNS('http ://www.w3.org/2000/svg', 'svg');
svg.setAttribut e('width', '200');
svg.setAttribut e('height', '200');
svg.setAttribut e('viewBox', '0 0 200 200');
var circle = document.create ElementNS('http ://www.w3.org/2000/svg',
'circle');
circle.setAttri bute('cx', '100');
circle.setAttri bute('cy', '100');
circle.setAttri bute('r', '30');
circle.setAttri bute('fill', 'green');
svg.appendChild (circle);
document.body.a ppendChild(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
8912
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 http://www.fogcat.co.uk/example/test002.html But when looking at Firefox it goes all odd. If you remove all the internal "imagediv" div from the "imagechunk" div it nearly works but doesn't algin the "link text" like IE.
23
3162
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 0H0</p> <p class="Telephone">Telephone: 555-1234 </p> <p class="Fax">Fax: 555-4321</p> </div>
16
3053
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: http://fmp.freac.fsu.edu/Timeline/ These are the problems I can't solve: - The padded list elements are taller than the containing div (note
5
3928
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 see the new link to my "download center". When you hover over that link, it does not behave the same way as the other links. The difference? I added an inline style to that particular tag. In my stylesheet I have:
1
2193
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 put plain javscript in a file that is read-in through a XMLHttpRequest-object, it's like it is totally ignored. Eg. I have the file ajax_include.html with in it's body the following lines <script type="text/javascript" language="javascript">
6
6485
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 element. HOWEVER, I want the hidden element positioned at a location of my choosing relative to that inline element. Is this possible?
6
2133
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 size so that I can align the label of each field to against the text field (kind of center alignment) even in case the size of text field vary. That is, with the label area (blue area) size fixed, I can
5
1982
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. **************************************************************************** BEGIN **************************************************************************** <HTML> <HEAD>
37
3682
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 over" when there are <br /tags involved...??? I've tried using <p style="font-weight: bold;"></p>, I've tried <blockquote></blockquote>...I just can't figure how I'm supposed to get the <b></btags to work for all the lines! Surely there must be...
0
9544
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10259
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10238
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10030
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9077
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7570
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5467
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4145
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2941
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.