Digital Asset Guideline Overview

Digital Asset Guideline Overview

The following digital assets can be offered by your music service:

There are two basic types of artwork: line art and photographs. Line art is easily scalable by Sonos apps and should be delivered in SVG Basic 1.1 format. Photographs need to be delivered in specific sizes and in JPG or PNG format, with a density of 72 DPI. See below for details.

Artwork appears in many different sizes on apps. Sonos scales artwork by taking the largest size above what is required by the app and downsampling it.

Use the presentation map to present these digital assets on Sonos apps. See the tutorials above and SMAPI Presentation Maps for details.

Sonos APPS

Version 5 of the Sonos app introduced a redesign that can use the high resolution displays of iOS and Android devices. We recommend using SVG format to take full advantage of these displays. This also ensures that images continue to have acceptible resolutions when scaled.

The Windows and MacOS apps, and discontinued Sonos hardware controllers (such as the Sonos CONTROL/CR200) are considered legacy controllers. These controllers still use images in PNG format. Therefore, you must submit your logos in PNG format as well.

The table below lists the supported Sonos apps and image formats. Click a link in the product column to read the product documentation.

Sonos Apps  Description   Product  Image Format

WDCR

Windows desktop app (legacy user interface)

Sonos app for PC 

PNG

MDCR

Mac OS desktop app (legacy user interface)

Sonos app for Mac 

PNG

ICR

iOS app

Sonos app for iOS

SVG

ACR
ACR-HDPI

Android app for tablets and phones

Sonos app for Android

SVG

CR200

Custom Sonos controller (legacy user interface)

Sonos CONTROL (CR200)

PNG

SAVE PNG AND JPG FILES AT 72 DPI

Photographs need to be delivered in specific sizes, in JPG or PNG format, and with a density of 72 DPI. Files that specify a different DPI setting may not display correctly in every Sonos app. You can save files at 72 DPI by using the Save for Web option in Photoshop (File > Save for Web...).

Save as SVG Basic 1.1 Profile

It is important that you save Scalable Vector Graphic (SVG) images in the SVG Basic 1.1 profile. See the W3C recommendation for further details about this SVG profile. Also, do not use SVG <text> and <mask> elements or hidden layers in your line art because they can cause display problems in the Sonos app. 

Validate your SVG using the W3C Markup Validation service. Be sure that the 'Document Type' is specifically set to SVG 1.1 Basic:

Your logos must pass validation before you submit your service for certification by Sonos.

Using Adobe Illustrator

Follow the steps below to save an SVG 1.1 Basic image using Adobe Illustrator (see Adobe Illustrator help for more):

  1. Choose File > Save As or File > Save A Copy.
  2. Enter a filename and choose a location for the file.
  3. Choose SVG (*.SVG) as the file format and click Save. This brings up the SVG Options dialog:
  4. In the SVG Options dialog, choose SVG Basic 1.1 as the SVG Profile.
  5. In the Image Location field, choose Embed.
  6. Click OK.