Embedded ClickListener not working with svg images


I tried to display “clickable” SVG graphics in Vaadin app, so I use embedded:

Resource res = new ThemeResource(“img/some.svg”);
Embedded object = new Embedded(“Embedded caption”, res);

    object.addClickListener(new MouseEvents.ClickListener() {

        public void click(MouseEvents.ClickEvent event) {

            layout.addComponent(new Label("Thank you for clicking embedded"));



[/code]SVG itself is displayed correct but ClickListener does not work. If I change Resource to e.g. PNG

Resource res = new ThemeResource("img/some.png"); then Click listener works.

Is there some reason why ClickListener can not be used with SVG (due to nature of SVG itself) or is this maybe bug?

FWIW, I generate SVG drawings programically which result in a string containing the XML. Then a stream resource…

StreamResource stream = new StreamResource( 
                () -> new ByteArrayInputStream(drawingSVG.getBytes(StandardCharsets.UTF_8)), filename);

… is applied to a button …


This is somewhat off topic from your question but results in a clickable SVG.
If you have more than one .svg drawing on a page with the same name, they will not all render.


I tried your solution and result was same as when setting buttons icon from SVG ThemeResource:

ClickListener works and SVG is displayed but when using Safari (in OSX and Win) SVG is not rendered ( and that was original reason why I tried to use Embedded as a workaround…)

Funny thing is that exactly same SVG (from ThemeResource) is rendered correctly when placed in Embedded but when used as icon of button it wont be renderd.

I just tested all my clickable SVG buttons are rendered and work fine in Safari on OSX. Are you sure that your filenames are unique? One way to ensure that is:

        UUID unique = UUID.randomUUID();
        String filename = "led2" + unique + ".svg";