Привязать SVG и изображения к пользовательскому HTML

Question

Я учусь создавать пользовательский интерфейс для блестящих приложений, но не могу найти способ привязки SVG-элементов, таких как график, созданный с помощью network3D, или изображение, как отстой, как мировое облако.

Я могу легко достичь того, что хочу, с помощью графика plotly, в котором указан соответствующий id и класс в элементе div, но я не могу сделать то же самое с объектами SVG и изображениями.

Например, я сделал эту простую панель инструментов.Первый fluidrow содержит HTML, а второй - обычные блестящие функции интерфейса.Как вы можете видеть, я намеренно использовал тот же id, чтобы график отображался в первом fluidrow, а не во втором, но этого не происходит для сети и мирового облака.

library(shiny)
library(shinydashboard)
library(wordcloud)
library(networkD3)
library(plotly)


df<-data.frame("words"=c("A","B","C"), "freq"=c(20,15,5))


# Create fake data
src <- c("A", "A", "A", "A",
         "B", "B", "C", "C", "D")
target <- c("B", "C", "D", "J",
            "E", "F", "G", "H", "I")
networkData <- data.frame(src, target)


ui <- dashboardPage(
    dashboardHeader(title = "Dynamic sidebar"),
    dashboardSidebar(
        sidebarMenuOutput("menu")
    ),
    dashboardBody(  

        fluidRow( HTML(paste0(
            '<div class="row">
                <div class="col-md-6">
                <!-- Line chart -->
                <div class="box box-primary">
                <div class="box-header with-border">
                <i class="fa fa-bar-chart-o"></i>

                <h3 class="box-title">plotly</h3>

                <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
                </div>
                <div class="box-body">
                <div id="graph" style="height: 300px;"></div>
                </div>
                <!-- /.box-body-->
                </div>
                <!-- /.box -->
                      <div class="box box-primary">
            <div class="box-header with-border">
              <i class="fa fa-bar-chart-o"></i>

              <h3 class="box-title">Word Cloud</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div id="cloud" class="shiny-plot-output shiny-bound-output" style="height: 300px;"></div>
            </div>
            <!-- /.box-body-->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
      <div class="col-md-6">
                      <div class="box box-primary">
            <div class="box-header with-border">
              <i class="fa fa-bar-chart-o"></i>

              <h3 class="box-title">Topic Network</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div id="network" class="simpleNetwork html-widget html-widget-output shiny-bound-output" style="height: 300px;"></div>
            </div>
            <!-- /.box-body-->
          </div>
          <!-- /.box -->'

        ))),
        fluidRow(
            box(plotOutput("cloud"),status = "warning",
                solidHeader = TRUE, collapsible = TRUE),
            box(simpleNetworkOutput("network", height = 250),status = "warning",
                solidHeader = TRUE, collapsible = TRUE),
            box(plotlyOutput("graph", height = 250),status = "warning",
                solidHeader = TRUE, collapsible = TRUE))

    ))


# Define server logic required to draw a histogram
server <- function(input, output) {


    output$cloud <- renderPlot({

        set.seed(1234)
        wordcloud(words = df$words, freq = df$freq, min.freq = 1,
                  max.words=200, random.order=FALSE, rot.per=0.35, 
                  colors=brewer.pal(8, "Dark2"))

    })

    output$network<-renderSimpleNetwork({

        simpleNetwork(networkData)
    })


    output$graph<- renderPlotly({
        plot_ly(
            x = c("giraffes", "orangutans", "monkeys"),
            y = c(20, 14, 23),
            name = "SF Zoo",
            type = "bar"
        )
    })


}

# Run the application 
shinyApp(ui = ui, server = server) 

Я хотел бы понять, как отобразить три графика, используя HTML и основную логику.