toString : Svg -> String

[James Carlson]

I would like to suggest the development of a function toString : Svg -> String . This would be useful, for example, in generative art programs that produce Svg output. Then one could save the "work", print it, etc. I'm sure this would have other uses as well. (Selfish disclosure: I am experimenting with generative art in Elm and am using typed-svg).

[Rupert Smith]

Yes.

One thing to take into consideration with this, is that the SVG that browsers support is not the same as the SVG 1.1 standard. For example, you can give colors in any format that CSS supports, and the browser will (mostly) support that, even though the available color formats for SVG are not as wide as CSS.

I would like to be able to export SVG that is standards compliant, so I can do things like loading it in Inkscape and so on.

I don't think the divergence from SVG 1.1 is too big though, this should be do-able.

[James Carlson]

Wonderful! I imagine that this involves a substantial amount of work. It would be a great addition to typed-svg. I am enjoying using typed-svg and hope to be able to show an interesting project project with it in the not too distant future.

[Rupert Smith]

What you can do at the moment is to simply right click and "save as..." the SVG image. This is where you may notice that the saved SVG is not standards compliant when opened in Inkscape. If you are careful how you construct the SVG though this can work very well.

[Thomas Waters]

I will say that I am looking for this issue as well. The way I have been getting around it at the moment is using ports to javascript. I put an ID onto the parent element containing my SVG object. Ask javascript to find that html object and get the inner content from that object. I then download that information from the browser as an SVG file. I did notice the divergence from SVG 1.1 as well. I'll have to read up on the differences to make sure I stay within spec to bring it into inkscape afterwords as well. I put a minimal example to try to get you started. This is the code that I'm currently using to get around this problem.

index.html

var app = Elm.Main.init({ });

app.ports.getSvg.subscribe(function(id) {
    var node = document.getElementById(id);
    app.ports.gotSvg.send(node.innerHTML);
});

Main.elm

port getSvg : String -> Cmd msg
port gotSvg : (String -> msg) -> Sub msg

type Msg
    = GetSvg
    | GotSvg

type alias Model = { fileName: String }

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        GetSvg ->
            ( model, getSvg "canvas" )

        GotSvg output ->
            ( model, download model.fileName output )

view : Model -> Html Msg
view model =
    Html.div [ Html.Attributes.id "canvas" ]
        [ TypedSvg.svg [ ] ( ) ]  -- Would need to fill this out

download : String -> String -> Cmd msg
download fileName svg =
    Download.string (String.append fileName ".svg") "image/svg+xml" svg

@rupertlssmith, do you know what it would take to get this functionality in this library? I would be willing to put the effort in to try to make this possible. This would be a huge step for me to be able to remove the use of ports within my application to possibly be able to publish my work as an elm package to give myself and other people a package to get started easily developing generative art within the TypedSvg environment.

I am worried that this isn't going to be an easy fix though. The existence of the libraries zwilias/elm-html-string and PaackEng/elm-svg-string alone tell me as much. I did try to use these modules as the base layer to be able to extract the HTML and SVG content and download that to the user, but the TypedSvg library isn't built on these libraries so there is the type incompatibilities there. I also use the elm-ui library which was another source of disconnect, so that wasn't a good path forward for me.