SVG support

3 views

Skip to first unread message

Kan Deng

unread,

Sep 5, 2007, 11:35:56 PM9/5/07

to Google Web Toolkit

Suppose I want to render something like SVGPath in Firefox 2.0 and
above, to show a path from an origin to a destination, there are some
questions,

1. Looks like Firefox uses different rendering engine to render .html
and .xhtml fils.
And SVG is only supported with xhtml rendering engine.
Referring to,
http://wiki.svg.org/Inline_SVG#XHTML_.28XML.29_vs_HTML

For example, when copy the following content into two files,
demo.html and demo.xhtml, the second file is rendereed correctly in
Firefox, but the first one does show the black dot.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG embedded inline in XHTML</title>
</head>
<body>
<h1>SVG embedded inline in XHTML</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="300"
height="200">
<circle cx="150" cy="100" r="50" />
</svg>
</body>
</html>

2. The latest version of GWT only support HTML, but not XHTML,
referring to
http://wiki.svg.org/Inline_SVG#XHTML_.28XML.29_vs_HTML

Therefore, it looks llike all the SVG related widgets will not be
supported by the current version of GWT, am I wrong?

If so, how can I work around, especially to show a path from an origin
to a destination?

Many thanks,
Kan

krispy

unread,

Sep 6, 2007, 10:21:22 AM9/6/07

to Google Web Toolkit

Kan, you're in luck - I just accomplished this in GWT 1.4 for the Maps
stuff. I have a .html page with no xml namespace at the top - what I
do is use custom JavaScript:

var svg = document.createElementNS("http://www.w3.org/2000/svg",
"svg");
svg.setAttribute("width", "300");
svg.setAttribute("height", "200");

var circle = document.createElementNS("http://www.w3.org/2000/svg",
"circle");
circle.setAttribute("cx", "150");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "50");

svg.appendChild(circle);
document.body.appendChild(svg);

This is pretty simple to convert to GWT land - the createElemenNS()
call is something you have to write JSNI for, but the setAttribute()
call is the same as DOM.setElementAttribute(), and the appendChild()
is just DOM.appendChild(). I think if you want the inline SVG like
you have above, then you need XHTML, but if you can do it all
dynamically, then it doesn't matter. HTH!