# List.Range and Svg

**URL:** <https://discourse.elm-lang.org/t/list-range-and-svg/4293>\
**Category:** Request Feedback\
**Created:** [September 9, 2019, 8:29pm UTC](https://discourse.elm-lang.org/t/list-range-and-svg/4293 "2019-09-09T20:29:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jonohovon](https://avatars.discourse-cdn.com/v4/letter/j/8edcca/32.png) [@jonohovon](https://discourse.elm-lang.org/u/jonohovon)\
**Post date:** [September 9, 2019, 8:29pm UTC](https://discourse.elm-lang.org/t/list-range-and-svg/4293/1 "2019-09-09T20:29:15Z")

</div>

Hi folks!

I am using Elm for a new project. THANK YOU for this wonderful language! I just wanted to give you a quick feedback on a few things that may (or may not) improve the language.

1. Should `List.range : Int -> Int -> List Int` be `List.range : number -> number -> List number` instead? Because we often want to do computations with this sample of numbers.

2. The `elm/svg` is ok, we can build stuff, but the api is a bit rough. All the `Svg.Attributes` take `String` as a parameter, but it’s often not the most practical type. For example, when working with viewBox/width/height, we really want a `number` 99% of the time.

3. The `Svg.Attributes` is bloated with stuff (see: [https://package.elm-lang.org/packages/elm/svg/latest/Svg-Attributes](https://package.elm-lang.org/packages/elm/svg/latest/Svg-Attributes)). Maybe it could make more sense to use a different package structure. For example, `Svg.Circle exposing (circle, cx, cy, r)`. The current Html api works really well, but Svg is a different beast.

4. `xlink:href` is deprecated: [https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/](https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/)

So here is my humble feedback. I am just trying to be constructive and to report what I felt was not so smooth working with Elm.

---

<div class="post-metadata">

**Author:** ![ianmackenzie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ianmackenzie/32/86_2.png) [@ianmackenzie](https://discourse.elm-lang.org/u/ianmackenzie)\
**Post date:** [September 9, 2019, 8:48pm UTC](https://discourse.elm-lang.org/t/list-range-and-svg/4293/2 "2019-09-09T20:48:52Z")

</div>

Hi @jonohovon! I think you’re absolutely right that the current `elm/svg` package is a bit awkward to work with, but as discussed in the package description:

> This package should only change to account for new SVG tags and attributes.
> 
> Just like [`elm/html`](https://package.elm-lang.org/packages/elm/html/latest), this package is designed to be predictable. Every node takes two arguments (a list of attributes and a list of children) even though in many cases it is possible to do something nicer. So if you want nice helpers for simple shapes (for example) I recommend creating a separate package that builds upon this one.

There are indeed packages that build on `elm/svg` to provide a nicer, more type-safe interface, the main one probably being [`elm-community/typed-svg`](https://package.elm-lang.org/packages/elm-community/typed-svg/latest/). (There’s also my own [`ianmackenzie/elm-geometry-svg`](https://package.elm-lang.org/packages/ianmackenzie/elm-geometry-svg/latest/), and several others if you search [the package web site](https://package.elm-lang.org/).)

> [@jonohovon](#):
>
> Should `List.range : Int -> Int -> List Int` be `List.range : number -> number -> List number` instead? Because we often want to do computations with this sample of numbers.

How would this work? For example, what would `List.range 0.1 0.5` return? For non-integers you need to specify something like a maximum step size to take between numbers, or the total number of steps to take; I’ve taken the latter approach in my [`elm-float-extra`](https://package.elm-lang.org/packages/ianmackenzie/elm-float-extra/latest/) package, which has a [`range`](https://package.elm-lang.org/packages/ianmackenzie/elm-float-extra/latest/Float-Extra#range) function with the signature

```elm
range : { start : Float, end : Float, steps : Int } -> List Float

```

For example:

```elm
Float.Extra.range { start = 2, end = 3, steps = 5 }
--> [2, 2.2, 2.4, 2.6, 2.8, 3]

```

---

<div class="post-metadata">

**Author:** ![jonohovon](https://avatars.discourse-cdn.com/v4/letter/j/8edcca/32.png) [@jonohovon](https://discourse.elm-lang.org/u/jonohovon)\
**Post date:** [September 9, 2019, 9:10pm UTC](https://discourse.elm-lang.org/t/list-range-and-svg/4293/3 "2019-09-09T21:10:53Z")

</div>

Thanks for your message @ianmackenzie!

Sorry, `List.range : number -> number -> List number` was a weird idea. 😰 What I really wanted to do: `List.range : Int -> Int -> List number`, so I can for example: `List.range 1 10 |> List.map ((*) 0.5)` without having to `|> List.map toFloat`.

Thanks for telling me about alternatives to the standard Svg package. Still I think it would be cool to have a nicer api built in (like `elm/html` that sometimes uses `Int` or `Bool` and not `String` everywhere), but I understand that some folks find the current api just fine and predictable. 🙂

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jwolondon/32/605_2.png) [@jwoLondon](https://discourse.elm-lang.org/u/jwoLondon)\
**Post date:** [September 9, 2019, 9:25pm UTC](https://discourse.elm-lang.org/t/list-range-and-svg/4293/4 "2019-09-09T21:25:37Z")

</div>

Functional composition keeps it pretty compact though if you want to create a list of floats:

`List.range 1 10 |> List.map (toFloat >> (*) 0.5)`

---

<div class="post-metadata">

**Author:** ![ozyinc](https://avatars.discourse-cdn.com/v4/letter/o/13edae/32.png) [@ozyinc](https://discourse.elm-lang.org/u/ozyinc)\
**Post date:** [September 9, 2019, 10:47pm UTC](https://discourse.elm-lang.org/t/list-range-and-svg/4293/5 "2019-09-09T22:47:18Z")

</div>

> [@jonohovon](#):
>
> `xlink:href` is deprecated: [https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/](https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/)

There is an issue already open in the library: [Use of deprecated xlink prefixed attributes (e.g. xlinkHref instead of href) · Issue #22 · elm/svg · GitHub](https://github.com/elm/svg/issues/22) , according to the latest comment the deprecated property is still applicable for Safari, if there is any update on this matter, sharing it on the issue would be helpful.

---

<div class="post-metadata">

**Author:** ![Lucas\_Payr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucas_payr/32/4993_2.png) [@Lucas\_Payr](https://discourse.elm-lang.org/u/Lucas_Payr)\
**Post date:** [September 10, 2019, 6:36am UTC](https://discourse.elm-lang.org/t/list-range-and-svg/4293/6 "2019-09-10T06:36:54Z")

</div>

> [@jonohovon](#):
>
> Sorry, `List.range : number -> number -> List number` was a weird idea. 😰 What I really wanted to do: `List.range : Int -> Int -> List number` , so I can for example: `List.range 1 10 |> List.map ((*) 0.5)` without having to `|> List.map toFloat` .

This is not possible (as `Int -> number` is not possible). But what might be of interest to you is something like `List.range 1 10 |> List.map (toFloat >> (*) 0.5)`

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [September 10, 2019, 9:25am UTC](https://discourse.elm-lang.org/t/list-range-and-svg/4293/8 "2019-09-10T09:25:34Z")

</div>

> [@jonohovon](#):
>
> The `Svg.Attributes` is bloated with stuff (see: [Svg.Attributes - svg 1.0.1](https://package.elm-lang.org/packages/elm/svg/latest/Svg-Attributes)). Maybe it could make more sense to use a different package structure. For example, `Svg.Circle exposing (circle, cx, cy, r)` . The current Html api works really well, but Svg is a different beast.

SVG is a big API for sure, and it is not really obvious how best to turn it into something nicer.

With reference to @ianmackenzie’s reply above about [elm-community/typed-svg](https://package.elm-lang.org/packages/elm-community/typed-svg/latest/) and [ianmackenzie/elm-geometry](https://package.elm-lang.org/packages/ianmackenzie/elm-geometry/latest/) combined with [ianmackenzie/elm-geometry-svg](https://package.elm-lang.org/packages/ianmackenzie/elm-geometry-svg/latest/)…

I find it hard to decide if less big packages or more small packages makes a better API in Elm. Lots of small ones seems to require more maintenance of your imports, one big one can be convenient but overwhelming.

The `typed-svg` package aims to provide a typed SVG API that otherwise reflects the warts-and-all nature of SVG. The modules are split into `Attributes`, `Events` and a root package for all the different SVG node constructors - like how `elm/html` is arranged.

Ian’s `elm-geometry` is split into modules that are specialised to particular geometric shapes like lines, circles, arcs and so on. I think you may have a better experience using this package.

---

<div class="post-metadata">

**Author:** ![jonohovon](https://avatars.discourse-cdn.com/v4/letter/j/8edcca/32.png) [@jonohovon](https://discourse.elm-lang.org/u/jonohovon)\
**Post date:** [September 10, 2019, 11:47am UTC](https://discourse.elm-lang.org/t/list-range-and-svg/4293/9 "2019-09-10T11:47:09Z")

</div>

`import Html exposing (..)` makes sense, but Svg is more like a toolbox where you pick what you need and what you know, like in Photoshop or Illustrator (it could be helpful to look at how things are organized in graphics editors), but most of the time you just need a subset of the api, something like `import Html.Line exposing (line, x1, y1, x2, y2)`.

Some obvious sub-packages:

- Rectangle
- Circle
- Ellipse
- Line
- Polyline
- Polygon
- Path
- Text
- Filters
- Gradients
- And so.

Yes, it’s not easy to find a nice package structure (we often tend to over-design things).

But when working with the current api, you need to rely heavily on the SVG specs to make sure you do the right thing, because you can easily mismatch attributes, like `import Svg.Attributes exposing (x, y, r)` then `circle [x "1", y "1", r "1"] []`, but circle needed `cx`, `cy` and not `x`, `y`.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [September 20, 2019, 11:47am UTC](https://discourse.elm-lang.org/t/list-range-and-svg/4293/10 "2019-09-20T11:47:13Z")

</div>

Closed on September 20, 2019, 11:47am UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.