TypedSvg

HTML Embedding

svg : List (Attribute msg) -> List (Svg msg) -> Html msg

The root svg node for any SVG scene. This example shows a scene containing a rounded rectangle:

import Html
import TypedSvg exposing (..)
import TypedSvg.Attributes exposing (..)


roundRect : Html.Html msg
roundRect =
    svg
        [ width (px 120), height (px 120), viewBox 0 0 120 120 ]
        [ rect [ x (px 10), y (px 10), width (px 100), height (px 100), rx (px 15), ry (px 15) ] [] ]

Graphics elements

circle : List (Attribute msg) -> List (Svg msg) -> Svg msg

The circle element is an SVG basic shape, used to create circles based on a center point and a radius.

circle [ cx (px 60), cy (px 60), r (px 50) ] []

ellipse : List (Attribute msg) -> List (Svg msg) -> Svg msg

image : List (Attribute msg) -> List (Svg msg) -> Svg msg

line : List (Attribute msg) -> List (Svg msg) -> Svg msg

path : List (Attribute msg) -> List (Svg msg) -> Svg msg

polygon : List (Attribute msg) -> List (Svg msg) -> Svg msg

polyline : List (Attribute msg) -> List (Svg msg) -> Svg msg

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 FillNone, stroke Color.black, points [ ( 20, 100 ), ( 40, 60 ), ( 70, 80 ), ( 100, 20 ) ] ] []

rect : List (Attribute msg) -> List (Svg msg) -> Svg msg

use : List (Attribute msg) -> List (Svg msg) -> Svg msg

Animation elements

animate : List (Attribute msg) -> List (Svg msg) -> Svg msg

animateColor : List (Attribute msg) -> List (Svg msg) -> Svg msg

animateMotion : List (Attribute msg) -> List (Svg msg) -> Svg msg

animateTransform : List (Attribute msg) -> List (Svg msg) -> Svg msg

mpath : List (Attribute msg) -> List (Svg msg) -> Svg msg

set : List (Attribute msg) -> List (Svg msg) -> Svg msg

Descriptive elements

desc : List (Attribute msg) -> List (Svg msg) -> Svg msg

metadata : List (Attribute msg) -> List (Svg msg) -> Svg msg

title : List (Attribute msg) -> List (Svg msg) -> Svg msg

Containers

a : List (Attribute msg) -> List (Svg msg) -> Svg msg

The SVG Anchor Element defines a hyperlink.

defs : List (Attribute msg) -> List (Svg msg) -> Svg msg

g : List (Attribute msg) -> List (Svg msg) -> Svg msg

marker : List (Attribute msg) -> List (Svg msg) -> Svg msg

mask : List (Attribute msg) -> List (Svg msg) -> Svg msg

pattern : List (Attribute msg) -> List (Svg msg) -> Svg msg

switch : List (Attribute msg) -> List (Svg msg) -> Svg msg

symbol : List (Attribute msg) -> List (Svg msg) -> Svg msg

Text

glyph : List (Attribute msg) -> List (Svg msg) -> Svg msg

glyphRef : List (Attribute msg) -> List (Svg msg) -> Svg msg

textPath : List (Attribute msg) -> List (Svg msg) -> Svg msg

text_ : List (Attribute msg) -> List (Svg msg) -> Svg msg

tref : List (Attribute msg) -> List (Svg msg) -> Svg msg

tspan : List (Attribute msg) -> List (Svg msg) -> Svg msg

Fonts

font : List (Attribute msg) -> List (Svg msg) -> Svg msg

Gradients

linearGradient : List (Attribute msg) -> List (Svg msg) -> Svg msg

radialGradient : List (Attribute msg) -> List (Svg msg) -> Svg msg

stop : List (Attribute msg) -> List (Svg msg) -> Svg msg

Filters

See TypedSvg.Filters

Miscellaneous

clipPath : List (Attribute msg) -> List (Svg msg) -> Svg msg

colorProfile : List (Attribute msg) -> List (Svg msg) -> Svg msg

cursor : List (Attribute msg) -> List (Svg msg) -> Svg msg

filter : List (Attribute msg) -> List (Svg msg) -> Svg msg

script : List (Attribute msg) -> List (Svg msg) -> Svg msg

style : List (Attribute msg) -> List (Svg msg) -> Svg msg

view : List (Attribute msg) -> List (Svg msg) -> Svg msg

Deprecated

See TypedSvg.Deprecated (e.g. altGlyph etc.)

emptyflash/typed-svg/1.0.0