# Understanding the association between Svg shapes and their attributes

**URL:** <https://discourse.elm-lang.org/t/understanding-the-association-between-svg-shapes-and-their-attributes/2271>\
**Category:** Learn\
**Created:** [October 18, 2018, 1:51pm UTC](https://discourse.elm-lang.org/t/understanding-the-association-between-svg-shapes-and-their-attributes/2271 "2018-10-18T13:51:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sharma7n](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sharma7n/32/2226_2.png) [@sharma7n](https://discourse.elm-lang.org/u/sharma7n)\
**Post date:** [October 18, 2018, 1:51pm UTC](https://discourse.elm-lang.org/t/understanding-the-association-between-svg-shapes-and-their-attributes/2271/1 "2018-10-18T13:51:48Z")

</div>

Hi all,

For a personal project, I’m implementing a front-end in Elm and trying to use it for almost every possible case (e.g. basic elm in place of JS, elm-ui in place of CSS, etc.) and so far it’s really great.

I’m also trying to construct SVG icons using the typed-svg package (though my questions also apply to the core svg package), and I’m getting a bit stuck with actually getting what I imagine to be valid svg (it compiles!) to actually appear on my screen. (Note that I don’t really know anything about SVGs, so any general-purpose information or resources about them might also help me out)

For example, I’m trying to make a “back arrow” and a “forward arrow”, and I thought the `line` functions would be a good way to construct this. So I made the following function:

```auto
leftArrow : Html msg
leftArrow =
    svg
        [ viewBox 0 0 100 100
        , width 80
        , height 80
        , strokeWidth 10
        ]
        [ line
            [ x 0
            , y 0
            , width 50
            , height 2
            , stroke Color.black
            ]
            []
        ]

```

This complies, but does not display on my screen. (Ignore the fact that it does not yet actually describe an arrow).

From the documentation, I found an example:

```auto
roundRect : Html.Html msg
roundRect =
    svg
        [width (px 120), height (px 120), viewBox 0 0 120 120]
        [rect [ x (px 10), y (px 10), width (px 100), height (px 100), rx (px 15), ry (px 15)] [] ]

```

This compiles and does display on my screen.

I think where I’m getting stuck is I don’t have an understanding of which attributes are “required” for a given shape (or which attributes even make sense - I imagine it’s probably doesn’t make sense to put a `cr` attribute on a `line` for example).

The best case scenario for me as a beginner would be that the shape functions have more structured input, e.g. `circle : CircleX -> CircleY -> CircleRadius -> List (Attribute msg) -> List (Svg msg) -> Svg msg`. There’s probably a good reason the API wasn’t designed like this, but it would have had the advantage that I can see from the type signature alone that in order to construct a valid circle it requires an x, a y, and a radius.

I tried reading the documentation, but the documentation does not explain which attributes correspond to which shapes.

I tried reading the source code to see if the `line` function delegates out to a function that does explain which attributes it uses, but this led to the virtual DOM implementation at which point I gave up.

Can someone direct me to a resource where I can understand how to correctly use Svg attributes? Or maybe my understanding of SVGs themselves is fundamentally wrong and I need to understand them better in order to use this library? Or maybe there is a community package that would help me build shapes/icons at a higher level of abstraction without needing to understand the SVG implementation or specify exact lengths and viewBoxes, etc.?

Thanks in advance! 🙂

---

<div class="post-metadata">

**Author:** ![malaire](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@malaire](https://discourse.elm-lang.org/u/malaire)\
**Post date:** [October 18, 2018, 2:04pm UTC](https://discourse.elm-lang.org/t/understanding-the-association-between-svg-shapes-and-their-attributes/2271/2 "2018-10-18T14:04:57Z")

</div>

My favorite resource about SVG is MDN, for example: [line](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line)

That tells that line should have x1,y1,x2,y2,stroke attributes, so try those. (I havn’t used Elm SVG yet, just within HTML.)

---

<div class="post-metadata">

**Author:** ![gampleman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/gampleman/32/43_2.png) [@gampleman](https://discourse.elm-lang.org/u/gampleman)\
**Post date:** [October 18, 2018, 2:21pm UTC](https://discourse.elm-lang.org/t/understanding-the-association-between-svg-shapes-and-their-attributes/2271/3 "2018-10-18T14:21:28Z")

</div>

I think there is plenty of design space for an improved Svg library in elm. TypedSVG in my mind is more the minimal step towards a great SVG library rather than the end state. Maybe one day we’ll even get an elm-ui like reinvention of vector graphics.

The problem is that the SVG spec is exceedingly large and complex. There are some redundancies in it (for example you could probably remove most of the geometrical primitives in favor of the `<path>` element), but often these exist to make it more approachable (for example it is easier to to write `circle [cx 5, cy 5, r 5] []` than `path [d "M 0,2.5 A5,5,0,10,1,1A5,5,0,10,1,1"] []`), but in general it would take a very significant amount of time to iterate on the problem for long enough to come up with a really nice solution.

---

<div class="post-metadata">

**Author:** ![sharma7n](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sharma7n/32/2226_2.png) [@sharma7n](https://discourse.elm-lang.org/u/sharma7n)\
**Post date:** [October 18, 2018, 2:42pm UTC](https://discourse.elm-lang.org/t/understanding-the-association-between-svg-shapes-and-their-attributes/2271/4 "2018-10-18T14:42:22Z")

</div>

Thank you, I think this will help me move forward!

---

<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:** [October 28, 2018, 2:42pm UTC](https://discourse.elm-lang.org/t/understanding-the-association-between-svg-shapes-and-their-attributes/2271/5 "2018-10-28T14:42:22Z")

</div>

Closed on October 28, 2018, 2:42pm UTC

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