Understanding the association between Svg shapes and their attributes

[sharma7n]

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:

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:

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!

[malaire]

My favorite resource about SVG is MDN, for example: 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.)

[gampleman]

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.

[sharma7n]

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