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

Embedding SVG within XHTML

P: n/a
Hi,

Is it possible to insert an SVG graphic directly in an XHTML file (ie,
not through a reference to an external file, but by directly placing
the SVG structure within the XHTML structure)?

How can I do it? Do I need to use a specific XHTML tag as a container
(such as for scripts) or a namespace?

Would a recent browser (such as IE 6 or Mozilla 1.6) properly display
the XHTML document with the SVG graphic?

Thanks in advance.

RaphaŽl

Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a


Raphael Goubet wrote:
Is it possible to insert an SVG graphic directly in an XHTML file (ie,
not through a reference to an external file, but by directly placing
the SVG structure within the XHTML structure)?

How can I do it? Do I need to use a specific XHTML tag as a container
(such as for scripts) or a namespace?
Yes, you can do that, and namespaces are the right way to do that.
Would a recent browser (such as IE 6 or Mozilla 1.6) properly display
the XHTML document with the SVG graphic?


Mozilla has built-in support for mixed namespace XHTML and MathML
document but not for SVG, however there are some specialized Mozilla
builds with some SVG support, see
http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/
and look for svg builds.

IE on Win also has its very own approach to an extension of HTML (not
XHTML) with namespaces where a plugin like Adobe SVG viewer then renders
the elements in the SVG namespace, so with IE/Win and Adobe SVG viewer
you can write HTML with inline SVG.
--

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

Jul 20 '05 #2

P: n/a
Raphael Goubet <rg*****@yahoo.fr> wrote in message news:<e5********************************@4ax.com>. ..
Hi,

Is it possible to insert an SVG graphic directly in an XHTML file (ie,
not through a reference to an external file, but by directly placing
the SVG structure within the XHTML structure)?

How can I do it? Do I need to use a specific XHTML tag as a container
(such as for scripts) or a namespace?

Would a recent browser (such as IE 6 or Mozilla 1.6) properly display
the XHTML document with the SVG graphic?

Thanks in advance.

RaphaŽl


As far as I'm aware, it is not possible to do this yet in the major
browsers, however it is with Amaya. Amaya is W3C's browser/editor.
"The main motivation for developing Amaya was to provide a framework
that can integrate as many W3C technologies as possible." Since XHTML
and SVG are W3C recommendations the browser can view these
technologies. www.w3.org/Amaya

You might also want to check out these pages:
http://www.w3.org/TR/2002/WD-XHTMLpl...sSVG-20020430/
http://www.w3.org/TR/2002/WD-XHTMLpl...0/sample.xhtml

Simon
Jul 20 '05 #3

P: n/a
Raphael Goubet wrote:
Is it possible to insert an SVG graphic directly in an XHTML file (ie,
not through a reference to an external file, but by directly placing
the SVG structure within the XHTML structure)?


You can try this implementation with IE ans ASV:

<html xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Inline-SVG</title>
</head>
<body>
<object id="AdobeSVG"
classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>
<svg:svg width="600" height="300">
<svg:text id="tx" x="20" y="55" style="font-size:
40px">SVG</svg:text>
<svg:rect id="re" x="135" y="20" width="40" height="40" style="fill:
#00C"/>
<svg:circle id="kr" cx="230" cy="40" r="20" style="fill: #F00"/>
<svg:polygon id="po" points="280,60 300,20 320,60" style="fill:
#090"/>
</svg:svg>
</body>
</html>

cu, Thomas
--
SVG - Learning By Coding
<http://svglbc.datenverdrahten.de/>
Jul 20 '05 #4

P: n/a
Raphael Goubet wrote:
Is it possible to insert an SVG graphic directly in an XHTML file (ie,
not through a reference to an external file, but by directly placing
the SVG structure within the XHTML structure)?


You can try this implementation with IE and ASV:

<html xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Inline-SVG</title>
</head>
<body>
<object id="AdobeSVG"
classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>
<svg:svg width="600" height="300">
<svg:text id="tx" x="20" y="55" style="font-size:
40px">SVG</svg:text>
<svg:rect id="re" x="135" y="20" width="40" height="40" style="fill:
#00C"/>
<svg:circle id="kr" cx="230" cy="40" r="20" style="fill: #F00"/>
<svg:polygon id="po" points="280,60 300,20 320,60" style="fill:
#090"/>
</svg:svg>
</body>
</html>

cu, Thomas
Jul 20 '05 #5

P: n/a
Raphael Goubet wrote:
Is it possible to insert an SVG graphic directly in an XHTML file (ie,
not through a reference to an external file, but by directly placing
the SVG structure within the XHTML structure)?


You can try this implementation with IE and ASV:

<html xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Inline-SVG</title>
</head>
<body>
<object id="AdobeSVG"
classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>
<svg:svg width="600" height="300">
<svg:text id="tx" x="20" y="55" style="font-size:
40px">SVG</svg:text>
<svg:rect id="re" x="135" y="20" width="40" height="40" style="fill:
#00C"/>
<svg:circle id="kr" cx="230" cy="40" r="20" style="fill: #F00"/>
<svg:polygon id="po" points="280,60 300,20 320,60" style="fill:
#090"/>
</svg:svg>
</body>
</html>

cu, Thomas
--
SVG - Learning By Coding
<http://svglbc.datenverdrahten.de/>
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.