Overview

The SVGRenderer Add-On Widget enables you to create incredible UI interface elements for the Mendix platform using Scalable Vector Graphics (SVG), defining vector-based graphics in XML format. See SVG as a dynamic image, based on dynamic contents. You can render a SVG everywhere within your Mendix layouts that can contain complex UI elements, like images. Text placeholders in the SVG can be filled in by attributes in your Mendix entities. SVGs are constructed using specific SVG syntax. A good starting point for creating and using SVGs can be found at https://www.w3schools.com/graphics/svg_intro.asp

Documentation

The Scalable Vector Graphics (SVG) Renderer Add-On Widget allows you to create incredible, dynamic UI interface elements for usage within the Mendix platform.

Using the SVGRenderer is very easy. The SVG will be rendered within a container.Setting the "width" and "height" attribute on the SVG tag to 100% will make the SVG responsive even in its own viewport.

You need to set up:

1. A microflow that returns a (non) persistent entity containing the following attributes:

- SVGCode (String): the SVG code to render

- StateName (String): the name of the current state of the SVG image (Note: Not used yet. In future revisions of the widget, sequence animations between states will be added)

- [Attribute name] (String): text attribute to fill the placeholder with the same attribute name in the SVG code.

2. The attribute names that will be replaced dynamically inside the SVG image have to be written in the SVGCode within double brackets, like:  

```   [[ attributeName ]]   ```

This means that for the 'amount' attribute (see example screenshot 2), there should be:

- An attribute named 'amount' in the entity that feeds the SVGRenderer widget

- A placeholder code snippet in the actual SVG code that corresponds to the name of the attribute above, like [[ amount ]].

- Important: this attribute will not be sanitized and could be misused for cross side scripting & HTML injection, so make sure to validate & sanitize user input!

SVG Code

SVG uses its own syntax. A good starting point for creating and rendering SVG images is https://www.w3schools.com/graphics/svg_intro.asp.For an existing SVG image, you can open the file in your text editor to retrieve its SVG Code.Make sure to remove the tag from the code when reusing ig.

An example of SVG Code (See screenshot 1):

```[[ amount ]][[ indication ]]```