This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
A Typed SVG (Scalable Vector Graphics) builder
version 2.0.1
license Apache2.0
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 2.0.1
Committed At 2018-05-17 10:17:06 UTC
eskimoblood/elm-color-extra 5.0.0 <= v < 6.0.0 5.1.0
elm-lang/virtual-dom 2.0.4 <= v < 3.0.0 2.0.4
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1



TypedSvg is an Elm package that makes it more pleasant to work with SVG (Scalable Vector Graphics). It is based on nphollon's original work.


TypedSvg is a work-in-progress. It intends to replace elm-lang/svg with a fully typed and documented equivalent. However, as it stands now, there is still work to be done in covering documentation for the entire (very large) SVG spec, as well as potential re-organization work in how the public modules are presented as an API.

TL;DR this package will change


  • TypedSvg contains SVG elements like circle and rect.
  • TypedSvg.Core contains basic building blocks like node and attribute, as well as the Svg and Attribute types.
  • TypedSvg.Types contains all of the types, as well as some length type helpers like px and em.
  • TypedSvg.Attributes contains typed attributes like fill, strokeWidth and svgBox
  • TypedSvg.Filters contains filter elements.
  • TypedSvg.Filters.Attributes contains filter element attributes.
  • TypedSvg.Events contains SVG event attributes like onLoad, onClick and onMouseOver.


import Html exposing (Html)
import Color
import TypedSvg exposing (svg, circle)
import TypedSvg.Attributes exposing (viewBox, cx, cy, r, fill, strokeWidth, stroke)
import TypedSvg.Types exposing (Fill(..), px)

type Msg
    = NoOp

type alias Model =

view : Model -> Html Msg
view model =
        [ viewBox 0 0 800 600
        [ circle
            [ cx (px 150)
            , cy (px 150)
            , r (px 30)
            , fill <| Fill
            , strokeWidth (px 2)
            , stroke <| Color.rgba 90 60 60 0.5

Sister Packages

TypedSvg works well in conjunction with folkertdev/svg-path-dsl if you need a typed path domain-specific language.


Apache 2.0