Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Embedded SVG not visible
I'm trying to add an SVG-Image like this:
esource res = new ThemeResource("img/admin.svg"); Embedded object = new Embedded("My SVG", res); object.setMimeType("image/svg+xml"); contentLayout.addComponent(object);
In the final DOM it shows up as <object> Tag with correct URI (see Attachment) but is not rendered by the browser.
If I use the same Resource with com.vaadin.ui.Image everything works fine.
What am I missing?
Any help is highly appreciated. Thanks!
EDIT: Vaadin 7.4.5, Vaadin Spring 1.0.0.beta3, Java 1.8
Please try removing the setMimeType. Have you tested a different browser?
Withouth setMimeType the behaviour is exactly the same.
The problem exists in Chrome, Firefox and Internet Explorer.
In Internet Explorer, the following message appears instead of the SVG-Image:
When clicking "Open this content in a new window" the SVG is displayed correctly in a new Tab.
The problem was to be found somewhere else: Spring Security.
From the Spring Security documentation:
The X-Frame-Options response header instructs the browser to prevent any site with this header in the response from being rendered within a frame. By default, Spring Security disables rendering within an iframe.
I solved the issue by adding the following arguments to my SecurityConfiguration:
... .and().headers().addHeaderWriter(new XFrameOptionsHeaderWriter(XFrameOptionsMode.SAMEORIGIN));