svg

Since Jmix 3.1

The svg component renders SVG markup directly in the view.

XML Element

svg

Java Class

Svg

Basics

Add the markup to the nested content element and wrap it in a CDATA section:

<svg id="statusSvg" css="color: seagreen">
    <content><![CDATA[
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"
             fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <path d="m9 12 2 2 4-4"/>
        </svg>
    ]]></content>
</svg>
The CDATA section is required. Without it, the XML parser reads the SVG tags as elements of the view descriptor, and the view fails to open with a GuiDevelopmentException.
The component renders the markup as is. If the SVG comes from an untrusted source, such as a file uploaded by a user, sanitize it before passing it to the component. Otherwise, it can lead to cross-site scripting attacks.

The component has no size attributes. The size of the image is defined by the width, height, and viewBox attributes of the root <svg> element in the markup.

The markup becomes part of the page, so the styles of the page apply to it. If the markup uses currentColor for strokes and fills, as in the example above, the image takes the text color of the component, and you can change it with CSS. The image and svgIcon components work differently. They display an SVG file by URL, and the page styles do not apply inside the image.

Content from a File

Use the file attribute to load the markup from a file:

<svg id="workflowSvg" file="com/company/onboarding/view/component/svg/workflow.svg"/>

The path is resolved by the Resources interface. By default, the file is loaded from the classpath. You can also use the classpath: prefix, a URL, or a path to a file in the configuration directory. See Resource Locations for details.

If the file is not found, the view fails to open with a GuiDevelopmentException. If both content and file are set, the component uses content.

Setting Content Programmatically

Declare the component without content and file:

<svg id="dotSvg" css="color: orange"/>

Then set the markup in the view controller using the setSvg() method:

@ViewComponent
private Svg dotSvg;

@Subscribe
public void onInit(final InitEvent event) {
    dotSvg.setSvg("""
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                <circle cx="8" cy="8" r="6" fill="currentColor"/>
            </svg>
            """);
}

The setSvg() method also accepts an InputStream, for example, to read the markup from a file.

The markup must contain an <svg> element. An XML declaration and a document type declaration before it are removed. If the markup does not contain <svg>, the method throws an IllegalArgumentException.

Attributes

The following attributes are specific to svg:

Name Description Default

file

Sets the path to a file with the SVG markup. See Content from a File.

—

The following shared attributes are supported by svg:

id - alignSelf - classNames - colspan - css - justifySelf - visible

Handlers

The following shared handlers are supported by svg:

AttachEvent - DetachEvent

Elements

An svg component can include a content element with the SVG markup wrapped in a CDATA section. See Basics.