PaackEng / elm-svg-string / Svg.String

This file is organized roughly in order of popularity. The tags which you'd expect to use frequently will be closer to the top.

Serialization

toHtml : Html msg -> Html msg

Convert to regular elm/html Html.

toString : Basics.Int -> Html msg -> String

Convert to a string with indentation.

Setting indentation to 0 will additionally remove newlines between tags, sort of like Json.Encode.encode 0.

import Svg.String.Attributes exposing (g, rect, stroke)


someHtml : Html msg
someHtml =
    svg [ height "68px" ] [ g [] [ rect [ x "10", y "20", stroke "red" ]]]


Svg.String.toString 2 someHtml
-->"<svg height=\"68px\">\n  <g>\n    <rect x=\"10\" y=\"20\" stroke=\"red\">\n    </rect>\n  </g>\n</svg>"

Svg.String.toString 0 someHtml
--> "<svg height=\"68px\"><g><rect x=\"10\" y=\"20\" stroke=\"red\"></rect></g></svg>"

Primitives


type alias Svg msg =
Svg.Types.Svg msg

The core building block to create SVG. This library is filled with helper functions to create these Svg values.

This is backed by VirtualDom.Node in evancz/virtual-dom, but you do not need to know any details about that to use this library!


type alias Html msg =
Svg.Types.Html msg

The core building block used to build up HTML.


type alias Attribute msg =
Svg.Types.Attribute msg

Set attributes on your Svg.

text : String -> Svg msg

A simple text node, no tags at all.

Warning: not to be confused with text_ which produces the SVG <text> tag!

node : String -> List (Attribute msg) -> List (Svg msg) -> Svg msg

Create any SVG node. To create a <rect> helper function, you would write:

rect : List (Attribute msg) -> List (Svg msg) -> Svg msg
rect attributes children =
    node "rect" attributes children

You should always be able to use the helper functions already defined in this library though!

map : (a -> b) -> Svg a -> Svg b

Transform the messages produced by some Svg.

Tags

circle : List (Attribute msg) -> List (Svg msg) -> Svg msg

defs : List (Attribute msg) -> List (Svg msg) -> Svg msg

feColorMatrix : List (Attribute msg) -> List (Svg msg) -> Svg msg

feGaussianBlur : List (Attribute msg) -> List (Svg msg) -> Svg msg

feOffset : List (Attribute msg) -> List (Svg msg) -> Svg msg

filter : List (Attribute msg) -> List (Svg msg) -> Svg msg

g : List (Attribute msg) -> List (Svg msg) -> Svg msg

rect : List (Attribute msg) -> List (Svg msg) -> Svg msg

svg : List (Attribute msg) -> List (Svg msg) -> Html msg

text_ : List (Attribute msg) -> List (Svg msg) -> Svg msg

tspan : List (Attribute msg) -> List (Svg msg) -> Svg msg

use : List (Attribute msg) -> List (Svg msg) -> Svg msg