Overview

Miso.Svg is the re-export hub for miso's SVG DSL. It re-exports Miso.Svg.Element (all SVG element constructors) and Miso.Svg.Event (SVG-specific event handlers).

SVG property/attribute combinators live in Miso.Svg.Property and must be imported separately when needed.

Quick start

Embed an SVG circle inside a miso view:

import Miso
import Miso.Svg
import qualified Miso.Svg.Property as SP

badge :: View model action
badge =
  svg_ [ SP.width_ "100", SP.height_ "100" ]
    [ circle_
        [ SP.cx_ "50", SP.cy_ "50"
        , SP.r_ "40"
        , SP.stroke_ "green"
        , SP.strokeWidth_ "4"
        , SP.fill_ "yellow"
        ]
    ]

Modules

• Miso.Svg.Element — SVG element constructors (svg_, circle_, path_, g_, …)
• Miso.Svg.Event — SVG event handlers (onBegin, onEnd, onClick, …)
• Miso.Svg.Property — SVG attribute combinators (cx_, r_, fill_, stroke_, …) (not re-exported here — import separately)

See also

• Miso.Html.Element — HTML element constructors
• Miso.Mathml.Element — MathML element constructors
• MDN SVG reference