rsvgshinyhtmltools

How to display a SVG image in shiny


I would like to display in my web application an SVG image that I have hosted in the images folder. First I tried to display it with a tag but it didn't work:

ui <- fluidPage(
  tags$img(src = "./images/SVG_Logo.svg", width = "99px")
)

Then I used the rsvg and htmltools packages:

library(shiny)
library(htmltools)
library(rsvg)

#Load SVG image
miLogo <- rsvg_svg("./images/SVG_Logo.svg", width = 99)
miLogo_html <- as.character(miLogo)

ui <- fluidPage(
  HTML(miLogo_html)
)

server <- function(input, output, session) {

}

shinyApp(ui = ui, server = server)

But I couldn't get it to work either. In both cases the browser displays this:

SVG Doesn't Work

But if I replace the source path for example by: https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg

SVG_OK

It works correctly

Could someone help me, please?

Best regards,
Wardiam


Solution

  • This code works for me. I had to create an images folder inside the www folder. Have you created a www folder to store your assets?

    library(shiny)
    library(htmltools)
    
    ui <- fluidPage(
      # tags$img(src = "https://raw.githubusercontent.com/paladinic/data/main/LINEA_black.svg", width = "99px")
      tags$img(src = "./images/logo.svg", width = "99px")
    )
    
    server <- function(input, output, session) {
      
    }
    
    shinyApp(ui = ui, server = server)
    

    enter image description here

    enter image description here