renderImage() and .svg in shiny app - r

Question

I don't get renderImage()to work with a .svg file.
My minimal example (adapted from the corresponding RStudio-tutorial):
ui.R
shinyUI(pageWithSidebar(
headerPanel("renderSVG example"),
sidebarPanel(
sliderInput("obs", "Number of observations:",
min = 0, max = 1000, value = 500),
actionButton("savePlot", "savePlot")
),
mainPanel(
# Use imageOutput to place the image on the page
imageOutput("plot"),
imageOutput("plot_as_svg")
)
))
server.R
require("ggplot2")
library(svglite)
shinyServer(function(input, output, session) {
## create plot with renderPlot()
output$plot<- renderPlot({
hist(rnorm(input$obs), main="Generated in renderPlot()")
})
## create .svg file of the plot and render it with renderImage()
output$plot_as_svg <- renderImage({
# A temp file to save the output.
# This file will be removed later by renderImage
outfile <- tempfile(fileext='.svg')
# Generate the svg
svglite(outfile, width=400, height=300)
hist(rnorm(input$obs), main="Generated in renderImage()")
dev.off()
# Return a list containing the filename
list(src = outfile,
contentType = 'text/svg+xml',
width = 400,
height = 300,
alt = "This is alternate text")
}, deleteFile = TRUE)
})
Any ideas where the problem is?

Answer 1

I struggled with this same issue, and there is nothing out on the web that I have found to address this problem which is frustrating. Here is the solution that worked for me:
ui.R:
shinyUI(pageWithSidebar(
headerPanel("renderSVG example"),
sidebarPanel(
sliderInput("obs", "Number of observations:",
min = 0, max = 1000, value = 500),
actionButton("savePlot", "savePlot")
),
mainPanel(
# Use imageOutput to place the image on the page
imageOutput("plot"),
imageOutput("plot_as_svg")
)
))
server.R:
require("ggplot2")
shinyServer(function(input, output, session) {
## create plot with renderPlot()
output$plot<- renderPlot({
hist(rnorm(input$obs), main="Generated in renderPlot()")
})
## create .svg file of the plot and render it with renderImage()
output$plot_as_svg <- renderImage({
width <- session$clientData$output_plot_width
height <- session$clientData$output_plot_height
mysvgwidth <- width/96
mysvgheight <- height/96
# A temp file to save the output.
# This file will be removed later by renderImage
outfile <- tempfile(fileext='.svg')
# Generate the svg
svg(outfile, width=mysvgwidth, height=mysvgheight)
hist(rnorm(input$obs), main="Generated in renderImage()")
dev.off()
# Return a list containing the filename
list(src = normalizePath(outfile),
contentType = 'image/svg+xml',
width = width,
height = height,
alt = "My Histogram")
})
})
Notice I did not use the svglite package, just the svg device from the grDevices (base) package. I also normalized the path in the source because I am on a Windows machine (I believe this will change my source from forward slashes to back slashes, but maybe someone will comment on that).
Also, I created four new variables to house the svg width and height and image width and height to still be fluid with the page. I'm sure there is an easier workaround than this, but this is what I found that worked.

Answer 2

Inspired by R_User123456789s solution (here) for base graphics above I got it the following way with ggplot2
ui.r
shinyUI(pageWithSidebar(
headerPanel("renderSVG example"),
sidebarPanel(
sliderInput("obs", "Number of observations:",
min = 0, max = 1000, value = 500)
),
mainPanel(
# Use imageOutput to place the image on the page
imageOutput("plot"),
imageOutput("plot_as_svg")
)
))
server.r
require("ggplot2")
shinyServer(function(input, output, session) {
## create plot with renderPlot()
output$plot<- renderPlot({
hist(rnorm(input$obs), main="Generated in renderPlot() as png")
})
## create .svg file of the plot and render it with renderImage()
output$plot_as_svg <- renderImage({
width <- session$clientData$output_plot_width
height <- session$clientData$output_plot_height
mysvgwidth <- width/96
mysvgheight <- height/96
# A temp file to save the output.
# This file will be removed later by renderImage
outfile <- tempfile(fileext='.svg')
# Generate the svg
#to see actually what will be plotted and compare
qplot(clarity, data=diamonds, fill=cut, geom="bar")
#save the plot in a variable image to be able to export to svg
image=qplot(clarity, data=diamonds[1:input$obs,], fill=cut, geom="bar", main = "ggplot as svg")
#This actually save the plot in a image
ggsave(file=outfile, plot=image, width=mysvgwidth, height=mysvgheight)
# Return a list containing the filename
list(src = normalizePath(outfile),
contentType = 'image/svg+xml',
width = width,
height = height,
alt = "My svg Histogram")
})
})