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.

Create any SVG node. To create a <rect> helper function, you would write:

rect : List Attribute -> List Svg -> Svg
rect attributes children =
    node "rect" attributes children

You should always be able to use the helper functions already defined in this library though!

A simple text node, no tags at all.

Warning: not to be confused with text' which produces the SVG <text> tag!

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
roundRect =
    svg
      [ width "120", height "120", viewBox "0 0 120 120" ]
      [ rect [ x "10", y "10", width "100", height "100", rx "15", ry "15" ] [] ]