Get started
Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

SVG Support in Vaadin

Sheila Hobeck
5 years ago Dec 10, 2016 3:47am

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

Marco Collovati
5 years ago Dec 10, 2016 9:19am

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
 

+1
Sheila Hobeck
5 years ago Dec 10, 2016 8:02pm

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