Transforming XML to HTMl and SVG Client Side

Posted on 2005-03-30
Medium Priority
Last Modified: 2012-05-07
Hi again.

I have an XML file I wish to transfom client side with XSLT.

The XML file contain a series of geometric points and their various attributes.

What I wish to create is an HTML page that contains a table with the attributes as well as an SVG map showing the points (using a WMS service map as a background).

Now, transforming XML to HTML is 'simple' and I see no trouble in transforming my XML to SVG either. However, I do not wish to start saving files on the client side PC, so how do I show my SVG in the HTML I generated.

I have previously been using the <embed> tag, but as far as I know, this requires me to have an actual file to be used in the src attribute to show my SVG.

Any help would be appreciated.
Question by:Finduilas
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
LVL 15

Expert Comment

ID: 13659919
hm...you need yo embed CVG into HTML right?
i think you can achive this using DOM manipulation with JS.

so, somthing like transform XML to SVG, and put it in 'right' part of DOM tree.


Expert Comment

ID: 13662837
What component are you using to render SVG?

What Browser(s) are you targeting?

It is likely that the SVG component will accept a URL for a file to render is it unacceptable to round trip to the server and have the Server perform the XML to SVG transform?


Author Comment

ID: 13669374
My situation is this:

On a IE browser with Adobes SVGViewer (connected via a GPRS Modem) I have an XML file displayed in a certain way (through standard XSLT).

Now I wish to change the display, so I run a JavaScript function to display the XML as an HTML page with a standard table (showing attributes from the XML) and a map in SVG.

Both the HTML and the SVG can be made through using two different XSL's on my XML (and as I have a limited number of defined user's, I can load the XSL's from the local machine - so I don't require to establish a connection to the server even once).

So I can display the HTML code containing an <embed> tag to hold the SVG, but I cannot get <embed> to work without a src attribute specifying a file. However, I have my SVG code in memory - So how do I display it? Saving the SVG file locally on the machine is not neccessarily a good idea, as it would conflict with the standard security of my internet browser.

Accepted Solution

anthonywjones66 earned 1500 total points
ID: 13669681
Version 3.0 of Adobe's SVGViewer has a getSVGDocument method.  Which is exposes the underlying XML DOM for the SVG.  You may be able to manipulate the content of the SVG using that in JavaScript I guess like this:-

function displaySVG(oMySVGDOM)
  oSVGDOM = SVGCtl.getSVGDocument
  if (oSVGDOM.nodeType != 9) oSVGDOM = oSVGDOM.ownerDocument

  oSVGDOM.replaceChild(oMySVGDOM.documentElement, oSVGDOM.documentElement)

Again guessing you might need to give the SVG src a URL to a small 'empty' SVG to ensure the there is a Document to get.  However I suspect that the SVG control will create an empty one of it's own if SRC isn't supplied.


Author Comment

ID: 13695418
I guess it must be something like this.

However, when I parse an XML document through an MSXML processor and recieve an SVG output string, I can find no method of reading this string into an SVG document....

I will ask this question in a seperate question - I assume I have overlooked something rather simple.

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Problem How to write an Xquery that works like a SQL outer join, providing placeholders for absent data on the outer side?  I give a bit more background at the end. The situation expressed as relational data Let’s work through this.  I’ve …
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…
Suggested Courses
Course of the Month12 days, 10 hours left to enroll

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question