How to Add an SVG Image

This article describes how to upload an SVG image into your Displayr document.

Requirements

• A Displayr document
• An SVG image
• OPTIONAL: An image hosted somewhere on the web (ex, Dropbox)

Method 1 - display an SVG image

1. From the toolbar, go to Calculation > Custom Code.
2. Click onto the page to place the calculation.
3. Paste the following code in the R CODE area of the object inspector:

library(flipPictographs)
IfElseImage(TRUE, "https://upload.wikimedia.org/wikipedia/commons/8/82/London_Midland_Rail_Network_Sagredo_new.svg")

This output can be dragged and re-sized just like any image in Displayr.

Method 2 - programmatically display SVG images

In this example, you can display different icons depending on the time of day (in this case, for the UTC time zone).

1. From the toolbar, go to Calculation > Custom Code.
2. Click onto the page to place the calculation.
3. Paste the following code in the R CODE area of the object inspector:

library("flipPictographs")
day.url = "https://upload.wikimedia.org/wikipedia/commons/e/ed/OOjs_UI_icon_sun-ltr.svg"
night.url = "https://upload.wikimedia.org/wikipedia/commons/7/7c/OOjs_UI_icon_moon.svg"
hour.of.day = as.numeric(format(Sys.time(), "%H"))
IfElseImage(hour.of.day > 6 && hour.of.day < 18, day.url, night.url)

In this example, lines 4 and 5 contain some simple code to check whether it is day or night. In your own documents, you can include more complex calculations that make use of other analysis outputs. The only requirement is that the condition in line 5 evaluates to true or false.

In the examples above, we used images that are hosted online. However, you don't need to create a webserver to display image files from your local computer. To do this, you can make use of a feature in Dropbox. Move the image file into a Dropbox folder, right-click on the file, and select 'Copy link'. Pasting the URL into a text editor, you will see something that looks like this:

https://www.dropbox.com/s/<random string>/<filename>.svg?dl=0

Change this URL so that it looks like

https://dl.dropboxusercontent.com/s/<random string>/<filename>.png

You can then use this modified URL in IfElseImage, in the same way as the examples above.