How to include a dynamically generated SVG to a Vaadin UI?

Question

I'd like to know if it is possible in Vaadin 7.0.5 to include SVG graphics in a vaadin UI, and this without any add-ons.

I'm currently using this code

StreamResource ressourceSVG = new StreamResource(source, "graphe.svg");

Embedded embedded = new Embedded("SVG", ressourceSVG);
embedded.setType(Embedded.TYPE_OBJECT);
embedded.setMimeType("images/svg+xml");

verticalLayout.addComponent(embedded);
setContent(verticalLayout);

And with this, just nothing happens... Only the appearance of the "SVG" text in the browser.

The only topic i found on this subject dated from 3 years ago and didn't find a clue in the book.

In the API only interfaces exists : elemental.svg but it's not really helping...

If you guys have any clue... would be great

Answer 1

So, seems the answer is that for a SVG to be displayed in Vaadin 7 one should use the BrowserFrame to display the SVG resource.

Using something like below where sourceSVG is a streamSource containing the SVG data.

StreamResource ressourceSVG = new StreamResource(sourceSVG, "graphe.svg");

BrowserFrame embedded = new BrowserFrame("SVG", ressourceSVG);

verticalLayout.addComponent(component);
verticalLayout.addComponent(embedded);
setContent(verticalLayout);

Had to reload the frame after loading the webpage but it finally worked

Answer 2

Actually, at least in version 7.1.7, you can use Embedded with SVGs directly. There is even an example in the Book, although it deals with a ThemeResource:

// A resource reference to some object
Resource res = new ThemeResource("img/reindeer.svg");

// Display the object
Embedded object = new Embedded("My SVG", res);
object.setMimeType("image/svg+xml"); // Unnecessary
layout.addComponent(object);

However, StreamResources also work fine, at least with the following snippet:

Embedded image = new Embedded();
image.setMimeType("image/svg+xml"); //also unnecessary here :p
layout.addComponent(image);
StreamSource source = //define your source
image.setSource(new StreamResource(source, "image.svg"));

(note that if you need to regenerate your image, you have to provide a fresh, unique filename value for the StreamResource)