R svgPanZoom within shinyApp display different in

Question

I draw a picture using R with packages svgPanZoom,svglite,ggplot2 and shiny. However, it can display correctly on Rstudio but not on Web. Are there any options to solve it? Please run the following code for detail.

library(shiny)
library(svglite)
library(svgPanZoom)
library(ggplot2)

data<-data.frame(x=1:50,y=1:50)
x_position<-1:50
y_position<-1:50
ui <- pageWithSidebar(
  headerPanel(""),
  sidebarPanel(),
  mainPanel(

    column(width=12,svgPanZoomOutput(outputId = "main_plot",width=600,height=450))

))

server = shinyServer(function(input, output) {
  output$main_plot <- renderSvgPanZoom({
    p <- ggplot(data, aes(x = x, y = y)) + geom_point()

    svgPanZoom(
      svglite:::inlineSVG(show(p))
      , controlIconsEnabled = T)
  })
})

shinyApp(ui,server)

R studio:

Web:

Answer 1

I had a similar problem, and fixed it very easily. Here are the snippets from ui.R:

svgPanZoomOutput(outputId = "betaPlot", height = "800px")

and server.R

p = ggplot(blah blah)

    svgPanZoom(
  svglite::stringSVG(print(p), standalone = F),
  controlIconsEnabled = T, viewBox = FALSE
)

It's the viewBox = FALSE that you need for an external browser, and you need to adjust the height of the graph in ui.R otherwise the controls don't show.

Load library(svglite) and library(svgPanZoom), obviously

Well, it worked for me anyway

Answer 2

Finally, I try the package "SVGAnnotation" and fortunately solved the problem.