Takes a function that creates an element, and pre-applies styles to it.

Styled Svg.

You can convert from this to the normal Svg type from elm-lang/svg (which is a type alias for VirtualDom.Node) by using toUnstyled.

You can convert the other way using fromUnstyled.

An Attribute which supports the css attribute.

You can obtain one of these from the normal Attribute type from elm-lang/svg by using fromUnstyled.

A simple text node, no tags at all. Warning: not to be confused with text_ which produces the SVG <text> tag!

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!

Transform the messages produced by some Svg.

The root <svg> node for any SVG scene. This example shows a scene containing a rounded rectangle:

import Html.Styled exposing (Html)
import Svg.Styled exposing (..)
import Svg.Styled.Attributes exposing (..)


roundRect : Html msg
roundRect =
    svg
        [ width "120", height "120", viewBox "0 0 120 120" ]
        [ rect [ x "10", y "10", width "100", height "100", rx "15", ry "15" ] [] ]

The circle element is an SVG basic shape, used to create circles based on a center point and a radius. circle [ cx "60", cy "60", r "50" ]

The polyline element is an SVG basic shape, used to create a series of straight lines connecting several points. Typically a polyline is used to create open shapes. polyline [ fill "none", stroke "black", points "20,100 40,60 70,80 100,20" ]

The SVG Anchor Element defines a hyperlink.