Svg

SVG Nodes

type alias Svg msg = Node msg

The core building block to create SVG. This library is filled with helper functions to create these Svg values.

This is backed by VirtualDom.Node in elm/virtual-dom, but you do not need to know any details about that to use this library!

type alias Attribute msg = Attribute msg

Set attributes on your Svg.

text : String -> Svg msg

A simple text node, no tags at all.

Warning: not to be confused with text_ which produces the SVG <text> tag!

node :
String
-> Array (Attribute msg)
-> Array (Svg msg)
-> Svg msg

Create any SVG node. To create a <rect> helper function, you would write:

rect : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
rect attributes children =
    node "rect" attributes children

You should always be able to use the helper functions already defined in this library though!

map : (a -> msg) -> Svg a -> Svg msg

Transform the messages produced by some Svg.

HTML Embedding

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

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

import Svg exposing (..)
import Svg.Attributes exposing (..)

roundRect =
    svg
      [ width "120", height "120", viewBox "0 0 120 120" ]
      [ rect [ x "10", y "10", width "100", height "100", rx "15", ry "15" ] [] ]
foreignObject : Array (Attribute msg) -> Array (Html msg) -> Svg msg

Graphics elements

circle : Array (Attribute msg) -> Array (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 "60", cy "60", r "50" ] []
ellipse : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
image : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
line : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
path : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
polygon : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
polyline : Array (Attribute msg) -> Array (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 "none", stroke "black", points "20,100 40,60 70,80 100,20" ] []
rect : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
use : Array (Attribute msg) -> Array (Svg msg) -> Svg msg

Animation elements

animate : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
animateColor : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
animateMotion : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
animateTransform : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
mpath : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
set : Array (Attribute msg) -> Array (Svg msg) -> Svg msg

Descriptive elements

desc : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
metadata : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
title : Array (Attribute msg) -> Array (Svg msg) -> Svg msg

Containers

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

The SVG Anchor Element defines a hyperlink.

defs : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
g : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
marker : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
mask : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
pattern : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
switch : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
symbol : Array (Attribute msg) -> Array (Svg msg) -> Svg msg

Text

altGlyph : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
altGlyphDef : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
altGlyphItem : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
glyph : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
glyphRef : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
textPath : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
text_ : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
tref : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
tspan : Array (Attribute msg) -> Array (Svg msg) -> Svg msg

Fonts

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

Gradients

linearGradient : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
radialGradient : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
stop : Array (Attribute msg) -> Array (Svg msg) -> Svg msg

Filters

feBlend : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feColorMatrix : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feComponentTransfer : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feComposite : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feConvolveMatrix : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feDiffuseLighting : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feDisplacementMap : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feFlood : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feFuncA : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feFuncB : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feFuncG : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feFuncR : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feGaussianBlur : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feImage : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feMerge : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feMergeNode : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feMorphology : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feOffset : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feSpecularLighting : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feTile : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feTurbulence : Array (Attribute msg) -> Array (Svg msg) -> Svg msg

Light source elements

feDistantLight : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
fePointLight : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
feSpotLight : Array (Attribute msg) -> Array (Svg msg) -> Svg msg

Miscellaneous

clipPath : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
colorProfile : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
cursor : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
filter : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
style : Array (Attribute msg) -> Array (Svg msg) -> Svg msg
view : Array (Attribute msg) -> Array (Svg msg) -> Svg msg