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