Copyright	(C) 2016-2026 David M. Johnson
License	BSD3-style (see the file LICENSE)
Maintainer	David M. Johnson <code@dmj.io>
Stability	experimental
Portability	non-portable
Safe Haskell	None
Language	Haskell2010

Miso.Svg.Element

Contents

SVG
Graphics
Animation
Descriptive
Containers
Text
Gradients
Filters
Light source
Misc.

Description

Overview

Miso.Svg.Element provides smart constructors for every element in the SVG vocabulary. All nodes are created in the SVG namespace via document.createElementNS("http://www.w3.org/2000/svg", …). This module is re-exported in its entirety by Miso.Svg.

Leaf elements (shapes, images, stops, …) omit the children argument:

circle_ :: [Attribute action] -> View model action

Container elements accept both attributes and children:

g_ :: [Attribute action] -> [View model action] -> View model action

Quick start

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

logo :: View model action
logo =
  svg_ [ SP.viewBox_ "0 0 200 200", SP.width_ "200" ]
    [ g_ [ SP.fill_ "none", SP.stroke_ "black" ]
        [ circle_ [ SP.cx_ "100", SP.cy_ "100", SP.r_ "80" ]
        , line_   [ SP.x1_ "20", SP.y1_ "100"
                    , SP.x2_ "180", SP.y2_ "100" ]
        ]
    , text_ [ SP.x_ "100", SP.y_ "110"
              , SP.textAnchor_ "middle" ]
              [ text "miso" ]
    ]

Element groups

Root: svg_
Graphics (leaf): circle_, ellipse_, image_, line_, path_, polygon_, polyline_, rect_, use_
Animation: animate_, animateMotion_, animateTransform_, mpath_, set_
Descriptive: desc_, metadata_, title_
Containers: defs_, g_, marker_, mask_, pattern_, switch_, symbol_
Text: text_, textPath_, tspan_
Gradients: linearGradient_, radialGradient_, stop_
Filters: feBlend_, feColorMatrix_, feComponentTransfer_, feComposite_, feConvolveMatrix_, feDiffuseLighting_, feDisplacementMap_, feDropShadow_, feFlood_, feFuncA_, feFuncB_, feFuncG_, feFuncR_, feGaussianBlur_, feImage_, feMerge_, feMergeNode_, feMorphology_, feOffset_, feSpecularLighting_, feTile_, feTurbulence_
Light sources: feDistantLight_, fePointLight_, feSpotLight_
Misc: foreignObject_, clipPath_, filter_, script_, style_, view_

svg_ :: [Attribute action] -> [View model action] -> View model action
circle_ :: [Attribute action] -> View model action
ellipse_ :: [Attribute action] -> View model action
image_ :: [Attribute action] -> View model action
line_ :: [Attribute action] -> View model action
path_ :: [Attribute action] -> View model action
polygon_ :: [Attribute action] -> View model action
polyline_ :: [Attribute action] -> View model action
rect_ :: [Attribute action] -> View model action
use_ :: [Attribute action] -> View model action
animate_ :: [Attribute action] -> View model action
animateMotion_ :: [Attribute action] -> View model action
animateTransform_ :: [Attribute action] -> View model action
mpath_ :: [Attribute action] -> View model action
set_ :: [Attribute action] -> View model action
desc_ :: [Attribute action] -> [View model action] -> View model action
metadata_ :: [Attribute action] -> [View model action] -> View model action
title_ :: [Attribute action] -> [View model action] -> View model action
defs_ :: [Attribute action] -> [View model action] -> View model action
g_ :: [Attribute action] -> [View model action] -> View model action
marker_ :: [Attribute action] -> [View model action] -> View model action
mask_ :: [Attribute action] -> [View model action] -> View model action
pattern_ :: [Attribute action] -> [View model action] -> View model action
switch_ :: [Attribute action] -> [View model action] -> View model action
symbol_ :: [Attribute action] -> [View model action] -> View model action
textPath_ :: [Attribute action] -> [View model action] -> View model action
text_ :: [Attribute action] -> [View model action] -> View model action
tspan_ :: [Attribute action] -> [View model action] -> View model action
linearGradient_ :: [Attribute action] -> [View model action] -> View model action
radialGradient_ :: [Attribute action] -> [View model action] -> View model action
stop_ :: [Attribute action] -> View model action
feBlend_ :: [Attribute action] -> View model action
feColorMatrix_ :: [Attribute action] -> View model action
feComponentTransfer_ :: [Attribute action] -> [View model action] -> View model action
feComposite_ :: [Attribute action] -> View model action
feConvolveMatrix_ :: [Attribute action] -> View model action
feDiffuseLighting_ :: [Attribute action] -> [View model action] -> View model action
feDisplacementMap_ :: [Attribute action] -> View model action
feDropShadow_ :: [Attribute action] -> View model action
feFlood_ :: [Attribute action] -> View model action
feFuncA_ :: [Attribute action] -> [View model action] -> View model action
feFuncB_ :: [Attribute action] -> [View model action] -> View model action
feFuncG_ :: [Attribute action] -> [View model action] -> View model action
feFuncR_ :: [Attribute action] -> [View model action] -> View model action
feGaussianBlur_ :: [Attribute action] -> View model action
feImage_ :: [Attribute action] -> View model action
feMerge_ :: [Attribute action] -> [View model action] -> View model action
feMergeNode_ :: [Attribute action] -> View model action
feMorphology_ :: [Attribute action] -> View model action
feOffset_ :: [Attribute action] -> View model action
feSpecularLighting_ :: [Attribute action] -> [View model action] -> View model action
feTile_ :: [Attribute action] -> View model action
feTurbulence_ :: [Attribute action] -> View model action
feDistantLight_ :: [Attribute action] -> [View model action] -> View model action
fePointLight_ :: [Attribute action] -> View model action
feSpotLight_ :: [Attribute action] -> View model action
foreignObject_ :: [Attribute action] -> [View model action] -> View model action
clipPath_ :: [Attribute action] -> [View model action] -> View model action
filter_ :: [Attribute action] -> [View model action] -> View model action
script_ :: [Attribute action] -> [View model action] -> View model action
style_ :: [Attribute action] -> [View model action] -> View model action
view_ :: [Attribute action] -> View model action

SVG

svg_ :: [Attribute action] -> [View model action] -> View model action Source #

<svg>

Graphics

circle_ :: [Attribute action] -> View model action Source #

ellipse_ :: [Attribute action] -> View model action Source #

image_ :: [Attribute action] -> View model action Source #

<image>

line_ :: [Attribute action] -> View model action Source #

<line>

path_ :: [Attribute action] -> View model action Source #

<path>

polygon_ :: [Attribute action] -> View model action Source #

polyline_ :: [Attribute action] -> View model action Source #

rect_ :: [Attribute action] -> View model action Source #

<rect>

use_ :: [Attribute action] -> View model action Source #

<use>

Animation

animate_ :: [Attribute action] -> View model action Source #

animateMotion_ :: [Attribute action] -> View model action Source #

animateTransform_ :: [Attribute action] -> View model action Source #

mpath_ :: [Attribute action] -> View model action Source #

<mpath>

set_ :: [Attribute action] -> View model action Source #

<set>

Descriptive

desc_ :: [Attribute action] -> [View model action] -> View model action Source #

<desc>

metadata_ :: [Attribute action] -> [View model action] -> View model action Source #

title_ :: [Attribute action] -> [View model action] -> View model action Source #

<title>

Containers

defs_ :: [Attribute action] -> [View model action] -> View model action Source #

<defs>

g_ :: [Attribute action] -> [View model action] -> View model action Source #

<g>

marker_ :: [Attribute action] -> [View model action] -> View model action Source #

mask_ :: [Attribute action] -> [View model action] -> View model action Source #

<mask>

pattern_ :: [Attribute action] -> [View model action] -> View model action Source #

switch_ :: [Attribute action] -> [View model action] -> View model action Source #

symbol_ :: [Attribute action] -> [View model action] -> View model action Source #

Text

textPath_ :: [Attribute action] -> [View model action] -> View model action Source #

text_ :: [Attribute action] -> [View model action] -> View model action Source #

<text>

tspan_ :: [Attribute action] -> [View model action] -> View model action Source #

<tspan>

Gradients

linearGradient_ :: [Attribute action] -> [View model action] -> View model action Source #

radialGradient_ :: [Attribute action] -> [View model action] -> View model action Source #

stop_ :: [Attribute action] -> View model action Source #

<stop>

Filters

feBlend_ :: [Attribute action] -> View model action Source #

feColorMatrix_ :: [Attribute action] -> View model action Source #

feComponentTransfer_ :: [Attribute action] -> [View model action] -> View model action Source #

feComposite_ :: [Attribute action] -> View model action Source #

feConvolveMatrix_ :: [Attribute action] -> View model action Source #

feDiffuseLighting_ :: [Attribute action] -> [View model action] -> View model action Source #

feDisplacementMap_ :: [Attribute action] -> View model action Source #

feDropShadow_ :: [Attribute action] -> View model action Source #

Since: 1.9.0.0

feFlood_ :: [Attribute action] -> View model action Source #

feFuncA_ :: [Attribute action] -> [View model action] -> View model action Source #

feFuncB_ :: [Attribute action] -> [View model action] -> View model action Source #

feFuncG_ :: [Attribute action] -> [View model action] -> View model action Source #

feFuncR_ :: [Attribute action] -> [View model action] -> View model action Source #

feGaussianBlur_ :: [Attribute action] -> View model action Source #

feImage_ :: [Attribute action] -> View model action Source #

feMerge_ :: [Attribute action] -> [View model action] -> View model action Source #

feMergeNode_ :: [Attribute action] -> View model action Source #

feMorphology_ :: [Attribute action] -> View model action Source #

Since: 1.9.0.0

feOffset_ :: [Attribute action] -> View model action Source #

feSpecularLighting_ :: [Attribute action] -> [View model action] -> View model action Source #

feTile_ :: [Attribute action] -> View model action Source #

feTurbulence_ :: [Attribute action] -> View model action Source #

Light source

feDistantLight_ :: [Attribute action] -> [View model action] -> View model action Source #

fePointLight_ :: [Attribute action] -> View model action Source #

feSpotLight_ :: [Attribute action] -> View model action Source #

Misc.

foreignObject_ :: [Attribute action] -> [View model action] -> View model action Source #

clipPath_ :: [Attribute action] -> [View model action] -> View model action Source #

filter_ :: [Attribute action] -> [View model action] -> View model action Source #

script_ :: [Attribute action] -> [View model action] -> View model action Source #

style_ :: [Attribute action] -> [View model action] -> View model action Source #

<style>

view_ :: [Attribute action] -> View model action Source #

<view>