Working with Vector Graphics

Introduction

When building a native mobile application, you may want to use vector images for icons or other illustrations. For this purpose, you can use Scalable Vector Graphics (SVGs). This reference guide will provide guidance for working with SVGs in native mobile apps.

Optimizing SVGs

When exporting an SVG from an editor, you will often produce an SVG with several unnecessary elements. These elements increase file size, decrease performance, and can cause unwanted side effects. Therefore it is recommended that you run your SVG through an SVG-optimization tool.

To optimize your SVGs, you can either run them through an online tool such as SVGOMG or use a local tool such as SVGO.

Unsupported Elements

SVGs can contain several kinds of elements. However, not all of them are supported in native mobile apps. Unsupported elements will have no effect and should be removed. The following SVG elements are not supported for native mobile apps:

• Complex gradients
• Animations
• Video
• JavaScript code
• CDATA elements
• <style /> tags and style attributes (please use regular properties instead)

Mendix suggests manually removing these elements from your SVGs, or using the tools mentioned in Optimizing SVGs above to ensure their compatibility.

Styling SVGs

You might want to change certain colors in your SVG, for example when adding an image. Mendix allows you to do this by setting the fill and stroke properties in image’s styling. These properties will then be applied to all the elements inside the SVG that do not have these properties.

Take the following SVG as an example:

<svg viewBox="0 0 100 100">
    <rect x="10" y="10" width="80" height="80" stroke="blue"/>
</svg>

Setting the fill property on this image’s styling will turn the rectangle (rect element) to the color provided. Setting the stroke property will result in no changes, since the stroke has already been set.

Here is how an SVG without the fill property looks:

Here is how an SVG with the fill property looks:

You can check the list of allowed style properties at the react-native-svg repository.

Coloring SVG Icons

Icons can only be set for buttons and bottom bar items. When you integrate an SVG icon into a button or bottom bar item, you will have to set the SVG’s color yourself. When using an app which employs Atlas UI, by default the colors are all white. For more information on styling, see the Native Mobile Styling Reference Guide.

For example, the following code:

export const DemoButton = {
	container: {
		backgroundColor: 'green'
	},
	caption: {
		color: 'orange'
	},
	icon: {
		color: 'blue'
	}
}

Would produce the following button and SVG:

Using SVGs in Pluggable Native Widgets

To use an SVG in a pluggable native widget’s image property, Mendix recommends using the provided Image or Icon component. This will allow a static image of any supported format to be used within your pluggable widget, including SVGs.

Here is an example of using the Image component:

import { createElement } from "react";
import { Image } from "mendix/components/native/Image";

export const PluggableWidget = () => (
    <Image source="PUT_SOURCE_HERE" style={{ fill: 'blue' }} />
);

Here is an example of using the Icon component:

import { createElement } from "react";
import { Icon } from "mendix/components/native/Icon";

export const PluggableWidget = () => (
    <Icon 
        icon={{
            type: "image",
            iconUrl: "PUT_SOURCE_HERE"
        }}
        size={20}
        color="blue"
    />
);

If you want to use SVG elements directly in your pluggable widget, see the react-native-svg library.

Read More

• Build a Pluggable Native Widget
• Atlas UI
• Pluggable Widgets API