SVG support

Skip to first unread message

Kan Deng

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

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,

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="">
<title>SVG embedded inline in XHTML</title>
<h1>SVG embedded inline in XHTML</h1>
<svg xmlns="" width="300"
<circle cx="150" cy="100" r="50" />

2. The latest version of GWT only support HTML, but not XHTML,
referring to

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,


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("",
svg.setAttribute("width", "300");
svg.setAttribute("height", "200");

var circle = document.createElementNS("",
circle.setAttribute("cx", "150");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "50");


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!


Reply all
Reply to author
0 new messages