User svg images in GWT ClientBundle (ImageBundle)

Question

I normally use the GWT ClientBundle for managing my images within my application like this

@Source("icons/info.png")
ImageResource info();

No I want to switch to .svg graphics but I didn't find a way to use svg in a ClientBundle like SVGResource or something. I know that svg is supported in GWT and there are possibilities to insert those graphics inside GWT, but I would like to use the advantages of the ClientBundle + the advantages of svg. Has anybody already solved this problem?

Answer 1

ImageResource is for raster images that the GWT compiler could optimize in one way or another, and you can query for their size.

For vector images like SVG, you can simply use a DataResource with a @MimeType("image/svg+xml") annotation.

@Source("icons/info.svg")
@MimeType("image/svg+xml")
DataResource info();

Note that you cannot use a @sprite in a CssResource then, but you can get the resource's URL to use in, e.g., a background-image using @url.
You cannot pass the resource to an Image widget either, but then you can just pass its getSafeUri().

---

If you want the SVG content instead of using it as an image URL, then you can use a TextResource. You'll have to pass it as setInnerHTML to an element or setHTML to a widget to get it parsed by the browser.

Answer 2

There is LIB-GWT-SVG. It supports the latest GWT version (2.7.0) and seems mature.

They implemented SVG integration with UIBinder and added SVGResource class that you can bundle just like a ImageResource

@Source(...)
SVGResource bundledResource;