proda-ai / elm-css / Svg.Styled

Drop-in replacement for the Svg module from the elm-lang/svg package.

The only functions added are styled, toUnstyled and fromUnstyled:

styled : (List (Attribute msg) -> List (Svg msg) -> Svg msg) -> List Css.Style -> List (Attribute msg) -> List (Svg msg) -> Svg msg

Takes a function that creates an element, and pre-applies styles to it.

fromUnstyled : VirtualDom.Node msg -> Svg msg

toUnstyled : Svg msg -> VirtualDom.Node msg

SVG Nodes


type alias Svg msg =
VirtualDom.Styled.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 evancz/virtual-dom, but you do not need to know any details about that to use this library!


type alias Attribute msg =
VirtualDom.Styled.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 -> List (Attribute msg) -> List (Svg msg) -> Svg msg

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

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

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 "60", cy "60", r "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 "none", stroke "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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Light source elements

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

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

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

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

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

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