Supported icon and image formats

This article describes which image formats the Remote supports for icons and background images, the exact sizes and file size limits, how many images you can upload, and how to prepare your images so they look their best.

It applies to images that you upload in the web-configurator (Resources) or that an integration driver provides.

At a glance

💡 SVG icons are supported from beta firmware 2.13.0.

• Icons and TV channel icons are counted separately: you can upload 1000 of each.
• SVG icons have no pixel size. They scale to any size without losing sharpness. See SVG icons below.

PNG and JPG icons

• The image must be exactly 90 x 90 pixels. Images with another size are rejected.
• The file extension must be .png, .jpg or .jpeg.
• The Remote lists a maximum file size of 32 KB. A 90 x 90 pixel image is normally far smaller than that. Note that the 32 KB limit is only enforced for SVG files. For PNG and JPG files, the Remote rejects files larger than 1 MB.
• Use PNG for graphics with sharp edges or transparency, for example logos. Use JPG for photos.
• PNG and JPG icons are square. On a larger or wider button the icon keeps its square shape.

Background images

• The image must be exactly 480 x 275 pixels and in PNG or JPG format.
• The file must not be larger than 1 MB.
• SVG is not supported for background images.

Scaling and cropping in the web-configurator

If you upload a PNG or JPG image with a different size, the web-configurator opens an editor to scale and crop the image to the required size.

We recommend preparing the image in a graphic tool instead and uploading an image with the exact size. Automatic scaling and cropping can make an image blurry or cut off parts of it. With a graphic tool you control the result:

1. Create a new image with the exact size from the table above, for example 90 x 90 pixels for an icon.
2. Place and scale your artwork inside the image.
3. Export it as PNG or JPG.
4. Upload the exported image. If the size matches, no scaling or cropping is necessary.

💡 If your icon is a logo or a drawing, consider using an SVG icon instead. It is sharp on every button size.

SVG icons

SVG is a vector format: the icon is drawn from shapes instead of pixels, so it stays sharp on small and large buttons. SVG is supported for icons and TV channel icons, from beta firmware 2.13.0.

Requirements

• Plain SVG file with the .svg extension. Compressed SVG files (.svgz) are not supported.
• The file must not be larger than 32 KB.
• The SVG must define a viewBox. SVG files without a viewBox are rejected.
• The aspect ratio of the viewBox (width : height) can be anything from 1:4 up to 4:1. Square, wide and tall icons are all possible, for example a 2:1 flag or a 4:1 logo. Icons that are wider than 4:1 or taller than 1:4 are rejected.
• The SVG can contain at most 500 elements. The root svg element counts as one element.
• Elements can be nested at most 16 levels deep. The root svg element is the first level.
• If the root svg element has a width or height, it must be a positive number without a unit or with one of the units px, pt, mm, cm, in, %, em or ex. A fixed size (not %, em or ex) must not be larger than 1024 pixels (1 inch = 96 pixels).
• The SVG must be self-contained: it cannot link to other files or web addresses. Only references to elements of the same file, like #gradient1, are allowed.

Icon shape on buttons

An SVG icon always keeps its own aspect ratio. It is never stretched or squashed.

• On a button page of an activity or remote, a wide icon fills the whole button width if the button is wide enough, for example a 2:1 flag on a 2 x 1 button.
• A square SVG icon on a wide button stays square and is centered.
• On entity tiles and in lists the icon is shown inside a square box. A wide icon is fitted to the width of the box.

The aspect ratio is taken from the viewBox. The width and height attributes of the SVG are not used for the shape of the icon.

Supported SVG features

The Remote draws SVG with a basic renderer. These features work well:

• Basic shapes and paths: rectangles, circles, ellipses, lines, polygons and paths
• Fill and stroke colors, opacity, dashed lines
• Linear and radial gradients
• Groups, transformations (move, rotate, scale), and reusing shapes (use)
• Simple styles, either in style attributes or in a <style> element with simple class, id and element selectors

Features that are not supported

Some SVG features are rejected when you upload the file, because the Remote cannot draw them correctly or because they are not safe. The web-configurator shows the reason.

• Text: convert text to outlines or paths in your graphic tool
• Embedded or linked images
• Masks, patterns and symbols
• Animations
• Scripts, and links to other files or web addresses
• Complex CSS in a <style> element: at-rules like @media or @import, selectors with : (like :hover) or [ (attribute selectors), !important, var(), and backslash escape sequences

Features that are accepted, but ignored

Some features are accepted, but the Remote does not draw them. The icon is shown without the effect, so it might look different than in the web-configurator preview:

• Filter effects such as blur and drop shadows
• Clipping paths: the icon is shown without clipping
• Markers on lines, for example arrowheads: the line is drawn without them

Clipping paths and markers must be defined inside the defs section of the SVG, which graphic tools do by default.

If the SVG uses a switch element, the Remote shows the first alternative that matches. When an alternative depends on the language, the result can depend on the language set on the Remote.

Note: The icon preview in the web-configurator is drawn by your web browser, which supports all SVG features. The Remote supports fewer features, so the icon might look different on the Remote. Simple shapes, paths, gradients and basic styles work best. Always check your icon on the Remote after uploading it.

Tips for exporting SVG files

• Convert text to outlines or paths before exporting.
• Use a simple export, this is sometimes called Plain SVG. Remove hidden layers, unused definitions and embedded images.
• Do not use effects like shadows or blur. Draw the effect with shapes and gradients instead.
• Keep the file small: simplify paths and reduce the number of points.

Troubleshooting