如何在blaze-html中使用svg-builder的Element类型？

问题背景 #

我正在使用svg-builder创建简单图形，示例代码如下：

import Graphics.Svg

main :: IO ()
main = do
  print $ svg contents

svg :: Element -> Element
svg content =
    doctype
    <> with (svg11_ content) [Version_ <<- "1.1", Width_ <<- "300", Height_ <<- "200"]

contents :: Element
contents =
    circle_ [Cx_ <<- "50", Cy_ <<- "50", R_ <<-"40", Stroke_ <<- "green", Stroke_width_ <<- "4", Fill_ <<- "yellow" ]

现在我想将这类图形嵌入到用blaze-html构建的常规HTML页面中，但blaze-html使用Html和Builder数据类型，而svg-builder使用Element数据类型，请问如何在blaze-html中使用svg-builder的Element？注：已有类似问题但使用的是blaze-svg，我需要使用svg-builder。

解决方法 #

核心思路是把svg-builder的Element转换为Blaze-HTML可处理的Html类型，具体实现步骤如下：

1. 导入必要模块 #

需要同时导入svg-builder的渲染模块、blaze-html的核心及HTML5模块：

import Graphics.Svg (Element, svg11_, circle_, Cx_, Cy_, R_, Stroke_, Stroke_width_, Fill_, (<-), with, doctype)
import Graphics.Svg.Core (renderText)
import Text.Blaze.Html (Html, preEscapedToHtml)
import Text.Blaze.Html5 ((!), html, body, div, h1)
import qualified Text.Blaze.Html5.Attributes as A
import Text.Blaze.Html.Renderer.Utf8 (renderHtml)
import qualified Data.ByteString.Lazy as BL

2. 编写类型转换函数 #

利用svg-builder的renderText将Element转为SVG文本，再通过Blaze的preEscapedToHtml转为Html（SVG属于安全的HTML子内容，无需额外转义）：

svgToHtml :: Element -> Html
svgToHtml = preEscapedToHtml . renderText

3. 嵌入SVG到HTML页面 #

直接将转换后的Html嵌入Blaze构建的页面结构中：

-- 构建包含SVG的HTML页面
myHtmlPage :: Html
myHtmlPage = html $ do
  body $ do
    div ! A.style "text-align: center; margin-top: 2rem;" $ do
      h1 "嵌入SVG的Blaze-HTML页面"
      -- 转换并嵌入svg-builder生成的SVG元素
      svgToHtml $ doctype <> with (svg11_ contents)
        [ Version_ <- "1.1"
        , Width_ <- "300"
        , Height_ <- "200"
        ]

-- 复用原示例的SVG内容
contents :: Element
contents =
    circle_ [ Cx_ <- "50"
            , Cy_ <- "50"
            , R_ <- "40"
            , Stroke_ <- "green"
            , Stroke_width_ <- "4"
            , Fill_ <- "yellow"
            ]

4. 渲染并输出HTML #

使用Blaze的renderHtml将页面渲染为字节流并写入文件：

main :: IO ()
main = BL.writeFile "embedded-svg.html" $ renderHtml myHtmlPage

关键细节 #

• renderText：svg-builder提供的官方渲染函数，能将Element正确转换为符合SVG规范的文本内容。
• preEscapedToHtml：避免Blaze对SVG标签进行转义，保证SVG结构完整可解析。

内容的提问来源于stack exchange，提问作者Jogger