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!

Set attributes on your Svg.

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
import Svg exposing (..)
import Svg.Attributes exposing (..)


roundRect : Html.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.