emptyflash / typed-svg / TypedSvg

HTML Embedding

svg : List (Html.Attribute msg) -> List (Core.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 (Core.Attribute msg) -> List (Core.Svg msg) -> Core.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 (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg

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

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

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

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

polyline : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.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 (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg

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

Animation elements

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

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

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

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

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

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

Descriptive elements

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

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

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

Containers

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

The SVG Anchor Element defines a hyperlink.

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

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

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

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

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

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

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

Text

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

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

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

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

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

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

Fonts

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

Gradients

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

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

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

Filters

See TypedSvg.Filters

Miscellaneous

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

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

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

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

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

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

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

Deprecated

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