\
**Category:** Learn\
**Created:** [April 8, 2020, 10:40am UTC](https://discourse.elm-lang.org/t/using-svg-and-html/5473 "2020-04-08T10:40:54Z")\
**Posts on this page:** 3\
**Page:** 1
**Author:**  [@steven](https://discourse.elm-lang.org/u/steven)\
**Post date:** [April 8, 2020, 10:40am UTC](https://discourse.elm-lang.org/t/using-svg-and-html/5473/1 "2020-04-08T10:40:56Z")
Following up on the exercise on the bottom of [Random · An Introduction to Elm](https://guide.elm-lang.org/effects/random.html)
One exercise is to use svg instead of images.
I changed the code on [numbers](https://elm-lang.org/examples/numbers)
by importing the svg libraries:
```
import Svg exposing (..)
import Svg.Attributes exposing (..)
```
and adding the following at the bottom
(only the first part is relevant i think, the 7 svg drawing themselves are just added for testing):
```
-- VIEW
view : Model -> Html Msg
view model =
div []
-- THIS works (infra)
-- [h1 [] [one]
-- THIS does not work (infra)
[h1 [] [showRandomDice]
, button [onClick Roll] [Html.text "Roll"]
]
-- SVG dice
-- showRandomDice: Model -> Html Msg
showRandomDice model =
case model.dieFace of
1 -> one
2 -> two
3 -> three
4 -> four
5 -> five
6 -> six
_ -> zero
zero =
svg
[ width "120"
, height "120"
, viewBox "0 0 120 120"
]
[ rect
[ x "10"
, y "10"
, width "100"
, height "100"
, rx "15"
, ry "15"
]
[]
]
one =
svg
[ width "120"
, height "120"
, viewBox "0 0 120 120"
]
[ circle
[ cx "10"
, cy "10"
, r "5"
]
[]
]
two =
svg
[ width "120"
, height "120"
, viewBox "0 0 120 120"
]
[ circle
[ cx "10"
, cy "10"
, r "5"
]
[]
, circle
[ cx "10"
, cy "50"
, r "5"
]
[]
]
three =
svg
[ width "120"
, height "120"
, viewBox "0 0 120 120"
]
[ circle
[ cx "10"
, cy "10"
, r "5"
]
[]
, circle
[ cx "10"
, cy "50"
, r "5"
]
[]
, circle
[ cx "10"
, cy "100"
, r "5"
]
[]
]
four =
svg
[ width "120"
, height "120"
, viewBox "0 0 120 120"
]
[ circle
[ cx "10"
, cy "10"
, r "5"
]
[]
, circle
[ cx "10"
, cy "50"
, r "5"
]
[]
, circle
[ cx "10"
, cy "100"
, r "5"
]
[]
, circle
[ cx "50"
, cy "100"
, r "5"
]
[]
]
five =
svg
[ width "120"
, height "120"
, viewBox "0 0 120 120"
]
[ circle
[ cx "10"
, cy "10"
, r "5"
]
[]
, circle
[ cx "10"
, cy "50"
, r "5"
]
[]
, circle
[ cx "10"
, cy "100"
, r "5"
]
[]
, circle
[ cx "50"
, cy "100"
, r "5"
]
[]
, circle
[ cx "50"
, cy "50"
, r "5"
]
[]
]
six =
svg
[ width "120"
, height "120"
, viewBox "0 0 120 120"
]
[ circle
[ cx "10"
, cy "10"
, r "5"
]
[]
, circle
[ cx "10"
, cy "50"
, r "5"
]
[]
, circle
[ cx "10"
, cy "100"
, r "5"
]
[]
, circle
[ cx "50"
, cy "100"
, r "5"
]
[]
, circle
[ cx "50"
, cy "50"
, r "5"
]
[]
, circle
[ cx "50"
, cy "10"
, r "5"
]
[]
]
```
The error message from ellie:
> The 2nd argument to `h1` is not what I expect:
>
> 83| [h1 [ showRandomDice]
>
> ```
> ^^^^^^^^^^^^^^^^^^
>
> ```
>
> This argument is a list of type:
>
> ```
> List (Model -> Html Msg)
>
> ```
>
> But `h1` needs the 2nd argument to be:
>
> ```
> List (Html msg)
>
> ```
>
> Hint: I always figure out the argument types from left to right. If an argument
> is acceptable, I assume it is “correct” and move on. So the problem may actually
> be in one of the previous arguments!
So i guess this has to do with signature of the showRandomDice function?
---
**Author:**  [@brian](https://discourse.elm-lang.org/u/brian)\
**Post date:** [April 8, 2020, 2:07pm UTC](https://discourse.elm-lang.org/t/using-svg-and-html/5473/2 "2020-04-08T14:07:07Z")
> [@steven](#):
>
> So i guess this has to do with signature of the showRandomDice function?
Got it in one! You already see that `showRandomDice` needs `Model`. You have one on line 83 in `view`, so you can change that code to `h1 [] [showRandomDice model]` to resolve the error.
---
**Author:**  [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [April 18, 2020, 2:07pm UTC](https://discourse.elm-lang.org/t/using-svg-and-html/5473/3 "2020-04-18T14:07:07Z")
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.