Orasund / elm-svg-writer / Svg.Writer

Svg


type SvgNode
    = SvgNode ({ name : String, attributes : List ( String, String ), content : List SvgNode })

A Svg Node.

It can be turned into a string using toString or into html using toHtml.

circle : { radius : Basics.Float, pos : ( Basics.Float, Basics.Float ) } -> SvgNode

define a cirlce svg node

rectangle : { topLeft : ( Basics.Float, Basics.Float ), width : Basics.Float, height : Basics.Float } -> SvgNode

create a rectangle svg node

path : Svg.Path.Path -> SvgNode

turn a path into a svg node.

define : List ( String, SvgNode ) -> SvgNode

define a template.

You can use a template with use.

defineMask : String -> List SvgNode -> SvgNode

define a mask.

You can use the mask with withMask.

use : String -> SvgNode

Use a defined template

group : List SvgNode -> SvgNode

group nodes to apply styling to all nodes at once.

custom : String -> List SvgNode -> SvgNode

Custom node

Attributes

withFillColor : String -> SvgNode -> SvgNode

fill the shape with a color

withNoFillColor : SvgNode -> SvgNode

use no color for the filling

withStrokeColor : String -> SvgNode -> SvgNode

use a color for the border of the shape

withStrokeWidth : Basics.Float -> SvgNode -> SvgNode

define the with of the border of the shape

withNoStrokeColor : SvgNode -> SvgNode

don't draw the border of the shape

withMask : String -> SvgNode -> SvgNode

Use a defined mask

withCustomAttribute : String -> String -> SvgNode -> SvgNode

add a attribute

Conversion

toString : { width : Basics.Int, height : Basics.Int } -> List SvgNode -> String

Convert the list of svg nodes into a svg-string.

toHtml : List (Html.Attribute msg) -> { width : Basics.Int, height : Basics.Int } -> List SvgNode -> Html msg

convert the svg nodes into html.

Note: the svg will be displayed as the background of a div.

I tried converting it into a Svg node, but my browser didn't seem to like it.

Alternatively i looked into elm/Svg, but there i can't define custom attributes.

toDataURI : { width : Basics.Int, height : Basics.Int } -> List SvgNode -> String

turn the list of svg nodes into a data URI.

backgroundImage : Html.Attribute msg
backgroundImage =
    Html.Attributes.style "background-image"
        ( "url(\\""
            ++ toDataURI { width = 100, height = 100 }
                svgNodes
            ++ "\\")"
        )

Interactive Viewer


type alias Program =
Platform.Program () Model Msg

A Program for viewing your Svg creations

toProgram : { name : String, width : Basics.Int, height : Basics.Int } -> List SvgNode -> Program

Convert into a program for viewing your Svg creations.

You might want to use this in combination with hot-loading, while you write your svg.

Deprecated

withAttribute : ( String, String ) -> SvgNode -> SvgNode

@Deprecated

Use withCustomAttribute instead.