如何保存 svg 图像

问题描述

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

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

如何保存该图像？

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

编辑：

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

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

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

解决方法

您可以使用 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 ] [] ]
        ] 

在上面的例子中，点击图片将导致图片被下载。