How to include dynamically generated SVG in the Vaadin user interface?

Question

I would like to know if in Vaadin 7.0.5 it is possible to include SVG graphics in the vaadin user interface, and this is without any add-ons.

I am 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 text "SVG" in the browser.

The only topic I found on this issue from 3 years ago, and did not find clues in this book.

Only APIs exist in the API: elemental.svg , but this does not help ...

If you have any clues ... it would be great

Answer 1

So, the answer seems to be that to display SVG in Vaadin 7 you should use a BrowserFrame to display the SVG resource.

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

 StreamResource ressourceSVG = new StreamResource(sourceSVG, "graphe.svg"); BrowserFrame embedded = new BrowserFrame("SVG", ressourceSVG); verticalLayout.addComponent(component); verticalLayout.addComponent(embedded); setContent(verticalLayout); 

When loading a webpage, you need to reload the frame, but finally it worked

Answer 2

Actually, at least in version 7.1.7 you can directly use Embedded with SVG. There is even an example in Book , although it deals with 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, StreamResource also works great, 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 restore your image, you must provide a new unique filename for StreamResource )