PaackEng/elm-svg-string/1.0.0

NOTE: the latest version is 1.0.2

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 : 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 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 =
Html msg

The core building block used to build up HTML.

type alias Attribute msg =
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