Embedding SVG within XHTML

R

Raphael Goubet

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
 
M

Martin Honnen

Raphael said:
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?
Click to expand...

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

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.org/mozilla/nightly/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.
 
S

Simon Stebbins

Raphael Goubet said:
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
Click to expand...

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-XHTMLplusMathMLplusSVG-20020430/
http://www.w3.org/TR/2002/WD-XHTMLplusMathMLplusSVG-20020430/sample.xhtml

Simon
 
T

Thomas Meinike

Raphael said:
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)?
Click to expand...

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
 
T

Thomas Meinike

Raphael said:
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)?
Click to expand...

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
 
T

Thomas Meinike

Raphael said:
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)?
Click to expand...

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
 

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

Validate client-side XSLT result of xhtml-math-svg 7
XHTML replaced by XML ? 4
xmlns attribute produces XHTML validation error. 3
Combining XHTML SVG and XML 2
FOP PDF from SVG 0
Viewing xml as SVG via XSLT directly 2
xalan versus ie xml rendering 3
Generating HTML image map from a SVG file 1

Members online

Total: 25 (members: 2, guests: 23)
Robots: 348

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,014
Latest member
BiancaFix3

Latest Threads

Top