SVG Images

An explanation of what SVGs are and where they are used across the Mindset platform

An SVG file, short for scalable vector graphic, is a standard graphics file type used for rendering two-dimensional images on the web or mobile devices.

The SVG format stores images as vectors, which is a graphic made up of points, lines, curves and shapes. SVG’s are typically used for Icons, logos & illustrations - they’re not the correct file format to display photographic images.

Why do we use SVG’s?

SVGs can be scaled up or down to any size without the loss of quality. This means that they can easily be adapted to the many screens and screen sizes that your app will be displayed on with still remaining crips and clear with now reduction in quality. They’re also often much smaller in file size which is ideal, as this reduces image load time, especially when accessing your app on the web.

Tip

• Keep lines and shapes as simple as possible.

• SVG’s must be flat 2 dimensional images - no shadows or gradients. If you upload an SVG with a gradient, it will not display correctly.

• If it includes a shadow or an alpha layer, it will not display at all.

• You can’t simply save a jpeg, or png file as an SVG - this won’t work.

• When uploading any images, pay close attention to the preview available. This will indicate how the image will render in your app.

Where are SVGs used?

SVG’s are used in multiple workflows across the product configuration. When uploading images in the configuration portal, the descriptive text will provide more detail on what image types are accepted. In most cases you have the option to use either an svg, jpg or png image.

Note: Your app logo image is uploaded in “App Settings”, all images uploaded to the Mindset Meter and the Admin chat home page card are areas of the configuration that will only access SVG images at this time. We suggest always reading the description text carefully to understand what image types will be accepted.