如何保存 svg 图像

Question

假设我在 Elm 中制作了一个 svg 图像：

svg [ viewBox "0 0 100 100" ] [ circle [ cx "60", cy "60", r "50" ] [] ]

我该如何保存该图像？

仅仅将其嵌入到 html 中并右键单击是行不通的；我找不到任何其他方式来使用它。

编辑：

到目前为止，我得到的“最好的”是使用检查模式并复制生成的 html，手动将其另存为文件。目前这足以解除我的封锁。显然，这可以用 JavaScript 编写脚本，但我正在寻找 Elm 解决方案。

我的实际用例是在 Elm 中生成一个标识符；例如Pace；不过，我自己的包，因为图像在我的应用程序中应该有意义。

我希望能够保存实际图像，而不是用于生成图像的数据。将其转换为 png 就可以了，但我更喜欢 svg。

Answer 1

您可以使用elm-svg-string官方 SVG 库代替并生成 SVG 的字符串版本。然后，您可以获取字符串版本，对其进行编码并将Url.percentEncode其用作href下载链接和src图像，以便将其显示用于预览目的

module Main exposing (main)
 
import Browser
import Html exposing (Html, a, br, div, img, text)
import Html.Attributes exposing (download, href, src)
import Svg.String as Svg exposing (Svg)
import Svg.String.Attributes as Attr exposing (attribute,  viewBox)
import Url

someSvg : Svg.Html msg
someSvg =
    Svg.svg
        [ attribute "xmlns" "http://www.w3.org/2000/svg"
        , viewBox "0 0 100 100"
        ]
        [ Svg.circle
            [ Attr.cx "60"
            , Attr.cy "60"
            , Attr.r "50"
            , Attr.style "fill: red; stroke: blue"
            ]
            []
        ]


asString : String
asString =
    someSvg
        |> Svg.toString 2


asData =
    "data:image/svg+xml;utf8," ++ Url.percentEncode asString


main =
    div []
        [ text <| asString
        , br [] []
        , a [ download "image.svg", href asData ]
            [ img [ src asData ] [] ]
        ] 

在上面的示例中，单击图像将导致图像被下载。