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