Drop-in replacement for the Svg module from the elm-lang/svg package.
The only functions added are styled, toUnstyled, toNonceUnstyled and fromUnstyled:
Similar to toUnstyled, but adds a nonce
to the style tag so that it is compliant with the Content Security Policy of your website.
If you don't need a nonce, you should use toUnstyled.
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!
Set attributes on your Svg.
A simple text node, no tags at all.
Warning: not to be confused with text_ which produces the SVG <text> tag!
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 childrenYou should always be able to use the helper functions already defined in this library though!
Transform the messages produced by some Svg.
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" ] [] ]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" ] []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" ] []The SVG Anchor Element defines a hyperlink.
Takes a function that creates an element, and pre-applies styles to it.