Loading ...
Sorry, an error occurred while loading the content.
 

Convert HTML to SVG

Expand Messages
  • jespertaxbol
    I need a simple way to convert simple HTML to SVG. Actually its the output of the Xinha browser WYSIWYG editor. Example:
    Message 1 of 3 , Jun 28, 2008
      I need a simple way to convert simple HTML to SVG. Actually its the
      output of the Xinha browser WYSIWYG editor.

      Example:

      <font face="verdana,arial,helvetica,sans-serif"><font size="5">This is
      a test</font><font size="7"><sup>2</sup></font></font><br />

      Would you happen to know how to do that?
    • Charles McCathieNevile
      On Sun, 29 Jun 2008 08:12:00 +0200, jespertaxbol ... You could use javascript, XSLT, or some other programming language to build a
      Message 2 of 3 , Jun 29, 2008
        On Sun, 29 Jun 2008 08:12:00 +0200, jespertaxbol <jespertaxbol@...>
        wrote:

        > I need a simple way to convert simple HTML to SVG. Actually its the
        > output of the Xinha browser WYSIWYG editor.
        >
        > Example:
        >
        > <font face="verdana,arial,helvetica,sans-serif"><font size="5">This is
        > a test</font><font size="7"><sup>2</sup></font></font><br />
        >
        > Would you happen to know how to do that?

        You could use javascript, XSLT, or some other programming language to
        build a simple HTML parser and SVG renderer. If you're using something
        like Opera 9.5 that handles textareas in SVG then you don't have to do a
        huge amount of calculation for rendering - it depends whether you have CSS
        and have to understand the box model, or understand tables. And whether
        the range of code you have to handle is well-defined or you are trying to
        deal with the Web at large.

        If the output is XHTML-conformant, you could just wrap the whole thing in
        a foreignObject inside an SVG.

        (This code looks horrible enough that I would like to see it converted to
        something, but I am not sure why you would want to convert HTML to SVG in
        general, so would be intrigued to hear the use case).

        Cheers

        --
        Charles McCathieNevile Opera Software, Standards Group
        je parle français -- hablo español -- jeg lærer norsk
        http://my.opera.com/chaals Try Opera 9.5: http://www.opera.com
      • ddailey
        I thought of XSLT and Javascript as ways to proceed and then I thought I d play with it a bit. I got some odd results in Opera (9.5), Safari (3.12), and
        Message 3 of 3 , Jun 29, 2008
          I thought of XSLT and Javascript as ways to proceed and then I thought I'd play with it a bit. I got some odd results in Opera (9.5), Safari (3.12), and Firefox 3.0. Let me explain:

          I wasn't sure quite how <font size="5"> would translate to <text font-size="magic-number"> so I thought I'd put the HTML right inside the SVG using a <foreignObject> so I could compare side by side so to speak. It looks like magic number is about 25px (though I'm not sure why) in all three of these browsers. (IE/ASV doesn't do foreignObject though I didn't try Renesis). The code which follows investigates this a bit, and also allows for selected objects to be deleted through mouseclicks. (I was curious about how HTML DOM would look when inside <foreignObject> and was pleased and surprised that it behaved as I would expect in all three browsers.)

          Curiosities: In Safari -- when one clicks on an object within the HTML, the <foreignObject> content does not refresh
          In Firefox the unstyled text inside the <p> tag looks really awful.
          In Opera, upon refresh, the <foreignObject> becomes a big black rectangle and only refreshes properly after a mouse event.

          Anyhow I was also pleased to see that the <tspan> handles the layout well enough that I didn't have to measure the size of the text as rendered and then reposition the superscripted exponent.

          David

          ------------------
          my code
          <svg xmlns="http://www.w3.org/2000/svg" width="100%"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          >
          <script><![CDATA[
          xmlns="http://www.w3.org/2000/svg"
          xlink="http://www.w3.org/1999/xlink"
          document.documentElement.setAttribute("onclick","remove(evt)")
          function remove(evt){
          if ((evt.target.id!="message")&&(evt.target.nodeName!="svg")){

          document.getElementById("message").firstChild.nodeValue=evt.target.nodeName+" has been removed"
          evt.target.parentNode.removeChild(evt.target)
          }
          else document.getElementById("message").firstChild.nodeValue=evt.target.nodeName+" was clicked"
          }
          //]]>
          </script>
          <circle r="50"/>
          <g transform="translate(100, 0) rotate(20)">
          <foreignObject x="0" y="10" width="600" height="600">
          <body xmlns="http://www.w3.org/1999/xhtml"><p>Click to remove things</p>
          <font face="verdana,arial,helvetica,sans-serif"><font size="5px">Hello from HTML</font><font size="7"><sup>2</sup></font></font><br />
          </body>
          </foreignObject>
          <text x="20" y="140" font-size="25px" font-family="verdana,arial,helvetica,sans-serif">
          Hello from SVG<tspan x="220" dy="-10" font-size="40px">2</tspan>
          </text>
          </g>
          <text id="message" x="20" y="300" font-size="15px" font-family="courier">
          Message displayed here
          </text>
          </svg>

          ----- Original Message -----
          From: Charles McCathieNevile
          To: svg-developers@yahoogroups.com
          Sent: Sunday, June 29, 2008 10:10 AM
          Subject: Re: [svg-developers] Convert HTML to SVG


          On Sun, 29 Jun 2008 08:12:00 +0200, jespertaxbol <jespertaxbol@...>
          wrote:

          > I need a simple way to convert simple HTML to SVG. Actually its the
          > output of the Xinha browser WYSIWYG editor.
          >
          > Example:
          >
          > <font face="verdana,arial,helvetica,sans-serif"><font size="5">This is
          > a test</font><font size="7"><sup>2</sup></font></font><br />
          >
          > Would you happen to know how to do that?

          You could use javascript, XSLT, or some other programming language to
          build a simple HTML parser and SVG renderer. If you're using something
          like Opera 9.5 that handles textareas in SVG then you don't have to do a
          huge amount of calculation for rendering - it depends whether you have CSS
          and have to understand the box model, or understand tables. And whether
          the range of code you have to handle is well-defined or you are trying to
          deal with the Web at large.

          If the output is XHTML-conformant, you could just wrap the whole thing in
          a foreignObject inside an SVG.

          (This code looks horrible enough that I would like to see it converted to
          something, but I am not sure why you would want to convert HTML to SVG in
          general, so would be intrigued to hear the use case).

          Cheers

          --
          Charles McCathieNevile Opera Software, Standards Group
          je parle français -- hablo español -- jeg lærer norsk
          http://my.opera.com/chaals Try Opera 9.5: http://www.opera.com




          [Non-text portions of this message have been removed]
        Your message has been successfully submitted and would be delivered to recipients shortly.