Sunday, June 25, 2006

Coding SVG With GWT

If you have been reading my prior posts you will know that I have a strong interest in GWT, and have been doing a lot of work with it, even in production systems. GWT is the acronym for the Google Web Toolkit. It allows a developer to write code in Java, and have it compiled to JavaScript that can run in any modern browser. For more details check out the GWT site, and check out my prior posts.

Introduction

The Scalable Vector Graphics (SVG) specification 1.1 has been a W3C Recommendation for over three years now. Firefox 1.5 introduced a built-in SVG rendering engine, and Adobe has an SVG plug-in available for Internet Explorer. This article explains how you can use the SVG support contained in GWT Widget Library o.o.5 to render SVG elements, and how you can make your page compatible with both Firefox and Internet Explorer 6.

SVGPanel Widget

The first widget you always need to create to render SVG graphics is the SVGPanel widget. When you create this widget you need to specify the width and height or the drawing area.

SVGPanel sp = new SVGPanel(500, 300);

This panel, once created, becomes a factory for other components. This works similar to the XML DOM. In this initial release you can create circles, rectangles, ellipses, and paths.

SVGRectangle rect = p.createRectangle(x, y, width, height);
SVGCircle circle = p.createCircle(cx, cy, radius);
SVGEllipse ellipse = p.createEllipse(cx, cy, rx, ry);
SVGPath path = p.createPath(x, y);

Creating a widget this was does not add it to the drawing. You still need to add the SVGPanel via the add() method.

SVGRectangle, SVGCircle, and SVGEllipse

Once created you can set additional attributes to these objects. For all of these you may set the fill color, stroke color, fill opacity, stroke opacity, and stroke width. Each of these objects will also have attributes specific to the object type. For example, you can change the radius of a circle after it's creation, and you may extend a path by adding additional points.

Each method that sets the attribute of an object will return the object itself. This allows you to chain the setting of attributes. The only trick is that some methods belong to the super class SVGBasicShape, which will return an instance of SVGBasicShape, and not the specific subclass. So you just need to be sure to set your widget specific attributes first, followed by the attributes that belong to the super class.

Below are some concrete examples, which show off the various attributes.

p.add(p.createRectangle(0, 0, 500, 300)
.setStroke(Color.DARK_GRAY)
.setStrokeWidth(2)
.setFill(Color.LIGHT_GRAY));

p.add(p.createEllipse(250, 225, 150, 70)
.setStroke(Color.RED)
.setStrokeWidth(1)
.setFill(Color.BLUE));

p.add(p.createCircle(420, 225, 60)
.setFill(Color.BLACK)
.setStrokeWidth(15)
.setStroke(Color.WHITE));

SVGPath Widget

The path widget deserves special attention. You create a path widget by specifying the initial point on the path. From this initial point you can add additional points by drawing either straight lines or curves. You may also move the current point to include multiple lines, for example the inner and outter circles of a doughnut. You may leave the path open, or close it to create a shape. The curves may be cubic Bezier, quadratic Bezier, or elliptical arcs. Each line or curve may be specified using either absolute coordinates, or coordinates relative to the current point. I suggest reading through the path portion of the SVG specification for details on using each of the curves.

The example below draws a hexagon using relative lineTo commands, coloring the shape with red translucent fill, and an orange border.

p.add(p.createPath(150, 190)
.relLineTo(10, 0)
.relLineTo(4, 8)
.relLineTo(-4, 8)
.relLineTo(-10, 0)
.relLineTo(-4, -8)
.closePath()
.setFill(Color.RED)
.setFillOpacity(50)
.setStroke(Color.ORANGE)
.setStrokeWidth(1));

Here is another path that creates an upside-down tear-drop shape, with a translucent yellow fill.

p.add(p.createPath(250, 225)
.relMoveTo(-25, -25)
.relCurveToC(0, -25, 50, -25, 50, 0)
.relLineTo(-25, 50)
.closePath()
.setFill(Color.YELLOW)
.setFillOpacity(50)
.setStroke(Color.BLACK)
.setStrokeWidth(1));

Gradients

You may also create linear gradients that can be used to fill a widget, or in place of a stroke color. Gradients consist of one or more "stops". Each stop contains a color, and optionally an opacity . For each stop you specify the color value, and the SVG engine will transition the color/opacity between stops.

The following gradient will color a widget from red to blue. The first value of each stop is the percentage across the widget. 0% being the left-most point on the widget, to 100% being the right-most point.

SVGLinearGradient grad = p.createLinearGradient()
.addStop(0, Color.RED)
.addStop(100, Color.BLUE);

You may also change the vector of the gradient to something other then left ro right. For example, you might want to color a widget from the top to the bottom. Here is the same gradient which will color from top to bottom instead of left to right. The values are percentages of the objects width and height. Specifically this vector definition starts at 0%,0%(x,y) to 0%,100%(x.y).

SVGLinearGradient grad = p.createLinearGradient()
.addStop(0, Color.RED)
.addStop(100, Color.BLUE)
.setVector(0, 0, 0, 100);

Gradients are not widgets, so you do not add them to the SVGPanel, you just use them. Also notice that each method returns the object instance allowing you to chain method calls.

Working in the Google Hosted Browser

Good luck, it doesn't seem to work. If you are able to get this to work, I would be very interested in the solution. For development I have been compiling the Java code to JavaScript, then testing in Firefox and IE.

Setting up your HTML and Deployment

One of the trickest parts I found was trying to get the SVG content to render in both Firefox 1.5 and Internet Explorer 6. If you are using Iinternet Explorer you will need to first download and install the SVG Viewer plug-in from Adobe. I also strongly suggest reading the Inline SVG page on the SVG Wiki, it will explain in detail how to get everything working across browsers.

Below is the HTML template that I have been using.

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>SVG Component Example</title>
<meta name="'gwt:module'"
content="'org.gwtwidgets.examples.svg.Project'">

<object id="AdobeSVG"
classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2">
</object>
<?import namespace="svg" implementation="#AdobeSVG"?>

</head>
<body>
<script type="text/javascript" src="gwt.js">
</script>
</body>
</html>

Firefox requires that the page be either XML or XHTML, requiring the XHTML namespace definition. This is because Firefox uses a different parser for XML and HTML, and the XML parser is the one that understands SVG.

Internet Explorer requires the svg namespace declaration, as well as the tag and instruction. The issue is that IE6 doesn't know anything about namespaces, so these are just instructions to the Adove SVG Viewer plug-in.

When viewing the file locally, the file extension must be .xhtml to view in Firefox, and .html to view in Internet Explorer. This of course presents a problem when you try to deploy a single file to work in both browsers. The Inline SVG page on the SVG Wiki details how you can configure your web server to get this to work.

If you do not have the ability to change the server configuration you may try placing the commands in a .htaccess file, and putting this file in the same directory as the pages using SVG. This worked flawlessly on the SourceForge hosted web site.

Conclusion

I hope that this article covers most of the questions you might have about using and deploying an SVGPanel, but it is likely that there will be additional questions. Please feel free to ask questions and to comment on the API. I will do my best to respond to them.

71 comments:

Anonymous said...

SCALABLE Vector Graphics, not SCALAR

Robert Hanson said...

Oops, thanks for the catch. Fixed.

Robert Hanson said...

That is definately on my to-do list, but I don't have a timeframe for doing it. The biggest problem is that there is too much to do, and not enough time to do it.

I am already working with a developer who is expanding the Scriptaculous support, so perhaps someone will volunteer to round out the SVG support.

Anonymous said...

Hi Robert

Is it possible add an image in the shapes of the SVG package (SVGRectangle, SVGCircle...)?

Is it possible to use EventListener in the SVG Components??

Thanks for your help..

Adriana

Robert Hanson said...

Adriana,

> possible add an image

Not yet.

> possible to use EventListener

Not yet.

I hope do all of those things eventually, or maybe someone will volunteer to do it. The SVG spec is huge, so it may take a while to get everything done.

If all you need is image support and (mouse?) listeners, I'll see what I can do to push them up in the priority list.

It is good to get feedback like this as it gives me an idea of what is needed the most.

Anonymous said...

Hi Rober Hanson
I want to write a program with SVG panel. when I try to use SVG component
the it makes error. for example when i create a new SVGPanel it makes Exception:
[ERROR] Unable to load module entry point class com.me.client.MyApplication
com.google.gwt.core.client.JavaScriptException: JavaScript Error exception: Unexpected call to method or property access.
at com.google.gwt.dev.shell.ie.ModuleSpaceIE6.invokeNative(ModuleSpaceIE6.java:396)
at com.google.gwt.dev.shell.ie.ModuleSpaceIE6.invokeNativeVoid(ModuleSpaceIE6.java:283)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:127)
at com.google.gwt.user.client.impl.DOMImpl.appendChild(DOMImpl.java:27)
at com.google.gwt.user.client.DOM.appendChild(DOM.java:64)
at org.gwtwidgets.client.svg.SVGContainerBase.add(SVGContainerBase.java:43)
at org.gwtwidgets.client.svg.SVGPanelBase.add(SVGPanelBase.java:26)
at org.gwtwidgets.client.svg.SVGPanel.(/init)(SVGPanel.java:60)
at org.gwtwidgets.client.svg.SVGPanel.(/init)(SVGPanel.java:39)
at com.me.client.MyApplication.onModuleLoad(MyApplication.java:21)

I use eclipse IDE. please help me!

Robert Hanson said...

It looks like you are trying to use the hosted-mode browser. Right?

I mention that in the article, it just won't work. You need to compile the code to JavaScript, then open in your browser. The problem is that IE requires a plug-in, and this doesn't seem to work at all with the hosted-mode browser.

Anonymous said...

To Stefan, and others who were
wondering: I was wondering about
text too. But for now, perhaps it's
easier to do using PopupPanel
on top of the canvas... This is
what I came up with, and so far,
so good...

Robert Hanson said...

Bob,

If I had to do this, I think that I would probably use a div with the
height of the panel area, and a width of 2px... then use a background
image in the dix with the dotted line. The background would be about
7px high (one dash + space) and repeated top to bottom.

In GWT you could probably do this with a Popup with maybe a FlowPanel
inside, with a style on the FlowPanel to display the line.

I think that would work.

Robert Hanson said...

> Is there anything new about the svg-events ?

SVG support is definately something that I get asked about often, but right now there are too many constraints on my time. I am hoping that things will clear up by mid-January so that I can start writing more code again.

So no, I unfortunately don't have ant tips on how to do it, but I am pretty sure that it can be done. Part of the problem is that GWT doesn't support XML namespaces, but SVG requires it. So you may have some trouble getting it to work the first time.

Anonymous said...

hi
i've found an example to give event handling to svg widget. but i can't understand why it functions with firefox, opera, and not with explorer and gwt hosted mode.
so, all you have to do is to declare a custom SVGPanel class in which you add methos for adding listeners, for example

public void addClickListener(ClickListener listener) {
if (clickListeners == null)
clickListeners = new ClickListenerCollection();
clickListeners.add(listener);
}

public void addMouseListener(MouseListener listener) {
if (mouseListeners == null)
mouseListeners = new MouseListenerCollection();
mouseListeners.add(listener);
}


and calling it

CustomSVGPanel sp = new CustomSVGPanel(800, 400);

CustomSVGCircle suca= new CustomSVGCircle(new Namespace("svg", "http://www.w3.org/2000/svg"),200, 225, 25);
sp.add(suca.setFill(Color.BLUE).setColor(Color.GREEN));

sp.addMouseListener(new MouseListener(){

public void onMouseDown(Widget sender, int x, int y) {

}
public void onMouseEnter(Widget sender) {}
public void onMouseLeave(Widget sender) {}

public void onMouseUp(Widget sender, int x, int y){}

public void onMouseMove(Widget sender, int x, int y){


CustomSVGPanel senderPanel = (CustomSVGPanel)sender;

((CustomSVGCircle)senderPanel.getWidget(1)).setFill(Color.RED);


}
});


if someone knows why it not functions with explorer 6 (with adobe SVG plugin istalled), please tell me!!!!

Robert Hanson said...

> i've found an example to give
> event handling to svg widget.

Awesome, glad to see that you got something working. The book is finishing up, so hopefully in another month or so I can get back to doing some coding.

Did you notice that the GWT roadmap included SVG support as a nice to have? It would be nice to see them get involved and throw some manpower into this.

Unknown said...

Robert: When I load the following markup into my FireFox 1.5xx browser locally, the SVG code is rendered and the image is displayed. However, when I post it on my website and then download it into the same browser, I get a blank screen. Any suggestions as to what I am doing wrong will be greatly appreciated.

By the way, I replaced all angle brackets by entities so that I could send them via your editor.

Thanks,
Dick Baldwin

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Generated XHTML file</title>
</head>
<body id="body" style="position:absolute; z-index:0;border:1px solid black; left:0%; top:0%;width:90%; height:90%;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1;">
<defs>
<linearGradient id="gradientA">
<stop offset="0%" style="stop-color:yellow;"/>
<stop offset="100%" style="stop-color:red;"/>
</linearGradient>
<linearGradient id="gradientB">
<stop offset="0%" style="stop-color:green;"/>

<stop offset="100%" style="stop-color:blue;"/>
</linearGradient>
</defs>
<g>
<ellipse cx="110" cy="100" rx="100" ry="40" style="fill:url(#gradientA);stroke:rgb(0,0,100);stroke-width:2"/>
<circle cx="110" cy="100" r="30" style="fill:url(#gradientB)"/>
</g>
</svg>
</body></html>

Unknown said...

PS: I forgot to mention that the file name and extension containing the markup from my previous comment is junk.xhtml

Thanks,
Dick Baldwin

Unknown said...

Robert,
Never mind, I found my problem - at least part of it. My real objective was to generate inline SVG code with a servlet to have it rendered on the client. It always seems to happen that as soon as I ask for help, I find the solution. In this case, the solution was to put the following statement in my servlet in place of the one that was there:

res.setContentType("image/svg+xml");

This replaced the following statement:

res.setContentType("text/html");

Thanks again.
Dick Baldwin

Robert Hanson said...

Glad to hear it all worked out. The whole extension/mime type issue can be problematic.

If anyone else runs into the same issue you should also check out the Inline SVG page of the SVG Wiki. Some useful tips there, http://wiki.svg.org/Inline_SVG.

Anonymous said...

Hi Robert

A problem that the attribute "xlink:href" cannot use a relative path of a Image. is found when I use Image tag in SVG.

nemelk said...

Hi Robert

It looks like adobe viewer (IE 7 with adobe SVG viewer 3.0 installed) doesn't refresh plugin window if I add and remove SVG element (with Javascript produced by GWT) during runtime.

In contrary firefox mozilla 2.0.0.2 works fine (refreshes SVG ok), but doesn't allow to set attribute (example transform attribute for some SVG element) - this is reported as GWT bug (http://groups.google.com/group/Google-Web-Toolkit-Contributors/browse_thread/thread/eb63d9e98b618894/9fa6468e74b3ac47?lnk=raot).

Does anybody experiences similar behaviour?

Robert Hanson said...

> In contrary firefox mozilla 2.0.0.2
> works fine (refreshes SVG ok), but
> doesn't allow to set attribute

Take a look at org.gwtwidgets.client.ext.ExtDOM. You might be able to use ExtDom.setAttributeNS(element, "prop", "value"). This is what all of the SVG widgets use internally to set the element attributes.

As for IE... well, I have this feeling that it just isn;t going to pan out. The worst part is that Adobe doesn't even support the plug-in any longer. There is talk about a cross-browser vector API that will use SVG on FF, and VML on IE. I figure it will take a while before we see that though.

Unknown said...

Hi Robert!
The W3C has defined the SVG specification and provided some interface. Wyh do not you implement the iterface.

Robert Hanson said...

Yonghe, that is indeed a very good question. I believe that when I wrote the SVG code that I did notice the W3C API... and if memory serves (it was 8 months ago), I _think_ that I just didn't like their API. I would need to look at the API again to be sure, but I think that was my thinking at the time.

...And for the record, I really dislike the DOM API as well. It is too verbose for every day use. When O coded Perl I published a module XML::EasyOBJ to make using the DOOM easier, and now that I have moved to Java I tend to use the programmer-friendly JDom.

If you are a standards purist, it is likely that you won't agree with that decision.

Unknown said...

Is there any methods to load external SVG file to SVGPanel to display it's content??

Robert Hanson said...

Grzegorz, no, not currently.

Unknown said...

Hi Robert Hanson!
The SVG standard is really too verbose, but it defines all features for SVG, if you write the SVG implementation without SVG standard, you have to refer to large numbers of document about SVG standard, it is troublesome.
By the way,I am not a standards purist, I am developping an application that depends on the SVG in web and I would like to join your project. Could you accept my application?

Unknown said...

Hi Robert!

How can I invoke the methods of SVG element in IE6.
For example, the SVG element has a method 'animationsPaused' that returns a boolean value.
I write codes 'svgElement.animationsPaused()' as comment in a java native method and run it as host moda, but the GWT throw a exception 'The object cannot support the method.'

Robert Hanson said...

Yonghe, I am hesitant to accept an application out of the blue. If you want to submit widgets/patches, then I am more than happy to accept, review, add them.

As far as sticking to the SVG spec... if you feel that is the way to go, then maybe you should start your own project and feel free to use whatever parts of my code are useful.

As far as long-term SVG support goes, there is an expectation that the GWT core API will include a generic vector graphics API that will use SVG on FF and VML on IE. I expect though that it will be some time before we see that, and because it is generic, it will likly be missing some of what SVG has to offer.

Robert Hanson said...

Scott, regarding...

> svgElement.animationsPaused()

The SVG support in the GWT-WL is far from complete, and I am not sure that it ever will be.

If this is possible at all, and it might not even be supported in IE (I really don't know), then you would need to use JSNI in order to do this.

Anonymous said...

Hi Robert!

How can I invoke the methods of SVG element in IE6.
For example, the SVG element has a method 'animationsPaused' that returns a boolean value.
I write codes 'svgElement.animationsPaused()' as comment in a java native method and run it as host moda, but the GWT throw a exception 'The object cannot support the method.'

Anonymous said...

Hi Robert!
Could you give me a email that can help me to contact with you frequently.

Robert Hanson said...

Sure, IamRobertHanson at gmail.com.

I can't guarantee me responsiveness though. I tend to only respond to my personal email in the mornings, and not during work hours.

Unknown said...

did work for me in the hosted browser. I use IE7.

Jacobean said...

Hi, I was wondering if support had been added for event listeners. Please let me know. Thanks.

Robert Hanson said...

No, there isn't support for listeners yet. I have had almost no time to work on the library for a long time due to work, the book, and now a new baby.

But... if someone has already figure out how to accomplish this, code patches are welcome.

nemelk said...

It seems that Adobe plugin cannot show svg elements that have been added after initWidget() call.
Does somebody have idea how to overcome this ?

Anonymous said...

I got an svg file which has the following attributes:
xml:space="preserve" width="271mm" height="195mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd"
viewBox="0 0 271000 194640"

This means that the paths that are made have such coordinates as: 121628. But the final "image" scales ok so that I don't loose precision. Is there a way, using your API, to set this scale so that I can use the same coordinates (there are *many* of them, and since they relate to a map, I can't simply loose precision)?

Thanks and congrats for your great work.

Robert Hanson said...

> Is there a way, using your API,
> to set this scale

No, not currently, but it should be easy to add. All of the source is in the jar file, so I encourage you to try it out for yourself.

As far as seeing this feature in a new release... it could be some time.

<long-story>
Now that I finally have time to work on the GWT-WL again it seems that the next release (1.4) of GWT will break SVG support.

So as of GWT-WL 0.1.4 I have removed SVG support since it won't work anyway. At a later date it is expected that GWT will be able to support SVG again, which is when I will add it back to the GWT-WL.
</long-story>

So... as long as you stick with GWT 1.3 and GWT-WL 0.1.3 you can still use the SVG support as-is. But until SVG works with new versions of GWT I don't plan on extending the SVG support.

Vito said...

Hi Robert, looking at Google Groups it seems it is possible to use svg with gwt 1.4. I still have to give it a try, but I was wondering if you tried to adapt your library..
Cheers,
Vito.

Robert Hanson said...

Vito, thanks for pointing out this post. It has been awhile since I looked at the SVG code in the GWT-WL, but I expect that it could work.

Anonymous said...

I recently upgraded my code to GWT 1.4 and very happily realized that SVG widgets are indeed working with this new GWT version!! So, I was wondering:
"But until SVG works with new versions of GWT I don't plan on extending the SVG support."

Will you now think about extending the SVG widgets to support event listening? I am working on this myself but unfortunately not getting any far..

Any ideas or details on how to accomplish this would be greatly appreciated.
Thanks!

Archie Cobbs said...

I've started working on adding support to GWT for non-HTML document types, in particular SVG. There are basically two parts to this:

* Adapting GWT bootstrap to work in XML

* Adding a "wrapper" implementation for the org.w3c.dom APIs

The GWT-DOM Google code project has been created for this purpose.

To see a demo, point Firefox 2.x at at this example.

See also this thread in the GWT-contributors forum.

SHI said...

Archie,
I would like to check out your library, especially the svg part. But I haven't really seen any javadoc or example code on how to start with it. Do you think you can provide the code of your demo (or any other sample code) and possibly a javadoc of your library?
Thank you very much for your help..

Archie Cobbs said...

Sure, just check out the code, it's all there at: http://code.google.com/p/gwt-dom/source

Anonymous said...

I notice that for SVG to work, or at least inline SVG, I need to send my HTML page with content type "application/xhtml+xml", so that Firefox's XML parser (and SVG parser) picks it up. However, for GWT it seems to be necessary to send content type "text/html", otherwise I get a warning in hosted mode, and no rendering at all in web mode. Does this mean the GWT and (inline) SVG are incompatible? It seems like some you people get it working anyway. Why does GWT not allow for content type "application/xhtml+xml"?

Robert Hanson said...

Jeroen,

I have had a falling out with SVG + GWT, so I really haven't been following it, but I *think* that GWT 1.5 (when it comes out) will work ok with XHTML. Don't hold me to that though.

Tanzeem said...

hi

i want to start using svg with gwt. please tell me from where will i get the package for svg support in gwt.

expecting immediate help
Tanzeem

Robert Hanson said...

The GWT-WL (http://gwt-widget.sourceforge.net) had support in 1.3... but then it broke, but some have said that they could get it to work.

You should probably ask on the dev list (http://groups.google.com/group/Google-Web-Toolkit) to see if anyone is actively using GWT + SVG, and ask them what they are using.

Ruud Steltenpool said...

I think SVG+GWT would be quite an interesting subject to the people at the SVG world conference SVG Open. Can you or someone else make it there?

Paper abstract deadline is at the end of this month.

Hope to see you in Nuremberg

Robert Hanson said...

Stelt, an interesting idea, but unless they paid my way I wouldn't be able to afford to make the trip. Nuremberg is a bit of a drive from New Jersey, and with gas prices being what they are...

Ruud Steltenpool said...

Do you know another good candidate?
Someone that doesn't have to drive across an ocean to get to Nuremberg maybe?

Robert Hanson said...

Stelt, sorry, I can't say that I do.

Tanzeem said...

i have to get a vector graphics drawn in the panel and i am getting lot of errors.I also tried JSGraphics from the latest GWT-WL.No effect. Can anyone give me a complete sample program(instead of code snippets) that uses SVGPanel or JSGraphics.

Unknown said...

Hi,
I'm using widgets-1.3 with gwt 1.4 to draw svg objects and it seems to work fine in gwt hosted mode.
I added eventlisteners to the SWGWidget object(thanks guido) and it seems to work fine in hosted mode as well.
This was really helpful. Thank you Robert !

Anonymous said...

I have your Draw Sample example running in GWT-shell if you're still interested.

Tanzeem said...

I would like to see the draw sample. But i got a solution using a gwt dojo wrapper called tatami.I found it much efficient than the SVG option . Thanks

Robert Hanson said...

Thanks cheapwhyskey (nice nick), but I don't think that I have the time to properly maintain it. I would very much like to see someone else take up the torch.

BTW - It may be of interest that there is a new Canvas widget in GWT-WL 0.2.0. It uses the <canvas> element in non-IE browsers and VML in IE. Using <canvas> is a *lot* faster than SVG (or VML for that matter).

aa said...

Hi,
I am using GWT and want to use SVG. Please guide the example code posted above on the page, how can i use it step by step.
Please guide, i need solution urgently!
/Danish

Robert Hanson said...

AA, this post is over two years old, and GWT has changed in significant ways.

I had been experimenting with GWT + SVG but abandoned it for several reasons. One being that there are no supported plugins for IE, and second because Canvas is a LOT faster if you use FF or Safari.

You should post your question on the dev list to see if anyone has any success stories to share.

http://groups.google.com/group/Google-Web-Toolkit

aa said...

Thanks. Actually, I want to use some simplest way to use SVG in the GWT. I hope you would be having a lots of information in this regard. I can not find much on it. Please share some links etc. I will be thankful to you!
/Danish

Robert Hanson said...

Search for SVG on the dev list, that is your best bet.

Anonymous said...

Hi, Its hard to read the code as I have problems with identifying colors.

Unknown said...

I have a question:

To do this tutorial of Robert Hanson it is necessary a jar? here I did not find the jar to include thank you for help.

BOUKHARY.

Unknown said...

Hi
I look for the jar that allows doing this tutoriel (SVG + GWT) for I do not find the link thank you.


Kazebliz

Robert Hanson said...

Baukhary, you can get all of the older versions of GWT-WL here.

http://sourceforge.net/projects/gwt-widget/files/

Note that the early versions only worked with GWT 1.3 (or older). SVG support was removed in version 0.1.4, so use 0.1.3 or earlier.

jlanza said...

Is it possible to run GWT-Widgets 0.1.3 with GWT 1.7?

I'm getting some errors when compiling althougth it finish compilation by removing some unnecessary items.

Is the svg picture displayed in hostmode debugging?

Thanks in advance... i've been battling serveral days ;)

Robert Hanson said...

Jlanza, nope, it won't work.

There is a project I just found out about that may be of interest, http://code.google.com/p/svgweb/. It is JS, not GWT, but supposedly has cross-browser SVG support. Maybe it would be possible to create a quick wrapper around it so that it can be used in GWT.

jlanza said...

Hi robert,

I will take a look at it.

BTW I have taken your code from 1.3 a modified it a little to fit the group, and other svg items. Now I'm working with the image, but I don't manage to get it displayed.

I get the rectangles,... and the image in the xml code of the page, but it is not displayed.

Robert Hanson said...

jlanza, glad to hear it is being used. I wish I could help with the images, but I don't have any ideas, it has been a very long time since I looked at that code.

Anonymous said...

Hi Robert! What do you think about using GWT generated javascript for manipulating not HTML DOM, but SVG DOM? I would like to animate existing HTML-embedded SVG images by javascript generated from GWT. Just something "like Flash". SVG can be manipulated by java-jar, but this is not fully supported in contrast with javascript SVG manipulation, which is widely supported. I don't know the resulting speed of this solution, but it may be depends on browser SVG DOM and javascript implemetation?

Robert Hanson said...

Well, IE doesn't support SVG, so that will be an issue, and the speed is generally slow.

If you were to go through with this, I suggest leveraging the work of others. You should be able to take http://code.google.com/p/svgweb/, and wrap it in GWT classes. The SVGWeb team has been wanting to do this anyway, so maybe you could help them.

Scott Morgan said...

Hi,

I am trying to run the gwt-examples-draw-1.0 for the first time and after seeing some text with a broken image box, I found my way to the README.txt file.
The major issue I am having is that the domain and there for web site;
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
is no longer up. Does anyone have any clue where I can get the required javascript library?

TIA,
Scott (adligo.com)

Robert Hanson said...

Huh, too bad that site is down. I searched for Walter Zorn on Google, and didn't find a site for his stuff anywhere.

Anyway, I have a demo using JSGraphics at http://gwt-widget.sourceforge.net/demo/drawing/index.html, which uses the source file from http://gwt-widget.sourceforge.net/demo/drawing/script/wz_jsgraphics.js.

Unfortunately I don't have any of the JSGraphics docs, but they were likely archived by the Way Back Machine (www.archive.org). If you search for http://www.walterzorn.com there, you should be able to find the documentation. (I would send a direct link, but archive.org is excessively slow this morning)