How to add SVG to Vaadin

Vaadin is a popular Java framework for building Web Applications, so it is logical to have the ability to add SVG to the Vaadin Web App.

Method 1: Using Vaadin’s built-in SVG support

Vaadin provides a built-in way to display SVGs using the SVG class. Here’s an example:

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.server.VaadinRequest;

public class MyUI extends Div {
    public MyUI() {
        add(new Svg("path/to/your/svg/file.svg"));
    }
}

In this example, we’re creating a new Div component and adding an SVG to it using the Svg class.

Method 2: Using Vaadin’s HTML component

You can also use the HTML component to display an SVG. Here’s how:

import com.vaadin.flow.component.Html;

public class MyUI extends Div {
    public MyUI() {
        add(new Html("<span><svg><path d='M10 10 L20 20'/></svg></span>"));
    }
}

In this example, we’re creating a new HTML component and adding an SVG to it using HTML code. I’ve personally used this in a Theme Picker Component.

Method 3: Using Vaadin’s Polymer component

If you’re using Vaadin’s Polymer components, you can use the Polymer class to display an SVG. Here’s how:

import com.vaadin.flow.component.polymer.Polymer;

public class MyUI extends Div {
    public MyUI() {
        add(new Polymer("svg", "<path d='M10 10 L20 20'/></svg>"));
    }
}

In this example, we’re creating a new Polymer component and adding an SVG to it using HTML code.

Method 4: Using Vaadin’s Image component

You can also use the Image component to display an SVG. Here’s how:

import com.vaadin.flow.component.image.Image;

public class MyUI extends Div {
    public MyUI() {
        add(new Image("path/to/your/svg/file.svg"));
    }
}

In this example, we’re creating a new Image component and adding an SVG to it using the file path.

Method 5: Using Vaadin’s Build-in Icons (not entirely sure if are SVG)  

You can also use ResourcePath to display an SVG. Here’s how:

import com.vaadin.flow.component.html.Div;

public class MyUI extends Div {
    public MyUI() {
        add(VaadinIcon.ARROW_LEFT.create());
    }
}

In this example, we’re creating a new Div component and adding an SVG to it using the file path.

These are some of the ways you can add an SVG to Vaadin. The best method for your use case will depend on the specific requirements of your application.