Embedding SVG within XHTML

Discussion in 'XML' started by Raphael Goubet, Feb 11, 2004.

  1. 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
     
    Raphael Goubet, Feb 11, 2004
    #1
    1. Advertising

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

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Feb 11, 2004
    #2
    1. Advertising

  3. Raphael Goubet <> wrote in message news:<>...
    > 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-XHTMLplusMathMLplusSVG-20020430/
    http://www.w3.org/TR/2002/WD-XHTMLplusMathMLplusSVG-20020430/sample.xhtml

    Simon
     
    Simon Stebbins, Feb 25, 2004
    #3
  4. 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/>
     
    Thomas Meinike, Feb 25, 2004
    #4
  5. 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
     
    Thomas Meinike, Feb 25, 2004
    #5
  6. 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/>
     
    Thomas Meinike, Feb 25, 2004
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. FC
    Replies:
    4
    Views:
    935
  2. Arne Nordmann
    Replies:
    0
    Views:
    555
    Arne Nordmann
    Jun 28, 2004
  3. Mardagg
    Replies:
    0
    Views:
    842
    Mardagg
    May 12, 2006
  4. Mardagg
    Replies:
    0
    Views:
    698
    Mardagg
    May 12, 2006
  5. Replies:
    2
    Views:
    449
Loading...

Share This Page