如何保存 svg 图像

Question

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

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

我该如何保存该图像？

只是将其嵌入 html 中，右键单击不起作用；而且我找不到任何其他方式来使用它。

编辑：

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

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

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

Answer 1

您可以使用 elm-svg-string 而不是官方 SVG 库并生成 SVG 的字符串版本。然后，您可以获取字符串版本，使用 Url.percentEncode 对其进行编码，并将其用作 href 用于下载 link 并用作图像 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 ] [] ]
        ]

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

如何保存 svg 图像

How do I save an svg image

elm