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
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
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
++ "\\")"
)
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.
withAttribute : ( String, String ) -> SvgNode -> SvgNode
@Deprecated
Use withCustomAttribute
instead.