SVG Support in Vaadin

Vaadin 6 / 7 / 8 Framework UI
1

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

2

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

3

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