Using a SVG (Scalable Vector Graphics) image is a great alternative to other image formats. There are many advantages to choosing SVG and in this post, I'll explain why you'll want to choose a SVG image and how to upload one in Displayr. 

Map of Belgrade tramway, not in SVG format

Why use a SVG image?

Displayr supports inserting images as raster files (e.g., JPEG, PNG, GIF) but there are times when you'll want to use SVG images instead. Say for instance, you want to be able to zoom or resize your image without losing any its quality. Or perhaps you want to print your image to a high quality at any resolution. SVG has these distinct advantages over other image formats.

For example, the PNG map of Belgrade tramway network (above) only shows a rough outline of the tram route. However, in this Displayr document, I have inserted the map as a SVG, allowing you to zoom in and see the street-level detail without losing any image quality. Although there is no menu option to add SVGs, you can easily add them using R Outputs.

Displaying SVG images

In the menu bar click Insert > R Outputs, and then paste in the following code.

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

This R Output can be dragged and re-sized just like an image in Displayr. You can try this with your own images here.

Programmatically displaying SVG images

In fact, you can do more than show a single SVG image using this function. You can create an R output that automatically updates and changes the image depending on the data in the document. This will allow you to show multiple images automatically. For example, you can display different icons depending on the time of day (in this case, for the UTC timezone).

To create this, copy the following lines into a new R output:

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.

You can try this out by modifying the example here. It also includes some more information about how to use this with automatic updating.

 Using your own images

In the examples above, we used images that are hosted online. However, you don't need to create a web server to display image files from your local computer. To do this, I make use of a feature in Dropbox. Move the image file into a Dropbox folder, right click on the file, and select 'Copy Dropbox 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.

Acknowledgements

Images were obtained from Wikimedia Commons, the free media repository.