Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
SVG Support in Vaadin
I am trying to use an SVG as a logo in my application. Accessing directly from the themes folder works so it is not Tomcat or the browser (Chrome) that is the problem.
I have tried and failed with all of the below:
1) CSS background image with addStyle on a Label, MenuItem, Button
2) the actual SVG text in the Label with content as HTML
3) Embedded image from a ThemeResource attached to the layout
4) ThemeResource with setIcon on a Button, MenuItem
I am at my wits end. I have read through every possible SVG comment in these forums, Stackoverflow etc. Nothing works.
PNGs - no problem.
Any, ANY help is appreciated.
Signed,
Frustrated
Hi Sheila,
it works fine for me with Image and css.
@Theme("mytheme")
public class MyUI extends UI {
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
Label label = new Label();
label.setWidthUndefined();
label.setStyleName("mytest");
Image image = new Image(null, new ThemeResource("imgs/laptop.svg"));
Button button = new Button(null, new ThemeResource("imgs/laptop.svg"));
button.setStyleName("mytest");
layout.addComponents(label, image, button);
layout.setMargin(true);
layout.setSpacing(true);
setContent(layout);
}
}
And the theme
@import "../valo/valo.scss";
@mixin mytheme {
@include valo;
.v-label-mytest {
background-image: url(imgs/laptop.svg);
width: 100px;
height: 100px;
background-size: contain;
}
.v-button-mytest .v-icon {
background-image: url(imgs/laptop.svg);
width: 20px;
height: 20px;
}
}
HTH
Marco
Thank you Marco. I believe the cause of my problem is due to the SVG image itself, not vaadin. Although I exported it as 100x33, the width and height were both still set at 100%. When I matched both the values in the viewbox and the width/height - it finally worked.
Thank you for your quick response, Marco. Such a simple thing yet frustrating when it doesn't work.
Cheers!
Sheila