Need help with svg?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

127 Stars 16 Forks Other 71 Commits 9 Opened issues


Fast SVG in Elm

Services available


Need anything else?

Contributors list

SVG in Elm

Scalable vector graphics (SVG) is a way to display lines, rectangles, circles, arcs, etc.

The API is a bit wonky, but (1) it is manageable if you look through MDN docs like these and (2) you can attach event listeners to any shapes and lines you create!


import Svg exposing (..)
import Svg.Attributes exposing (..)

main = svg [ width "120" , height "120" , viewBox "0 0 120 120" ] [ rect [ x "10" , y "10" , width "100" , height "100" , rx "15" , ry "15" ] [] , circle [ cx "50" , cy "50" , r "50" ] [] ]

I highly recommend consulting the MDN docs on SVG to learn how to draw various shapes!

Make visualizations!

SVG is great for data visualizations, and I really want people in the Elm community to explore more in that direction! My instinct is that functions like

view : data -> Svg msg
will be way easier to work with than what is available in other languages. Just give the data! No need to have data and interaction deeply interwoven in complex ways.

Make visualization packages?

I think

is a really great effort in this direction. Notice that the docs present a really smooth learning path. Getting something on screen is really simple, and then it builds on that basic understanding to give you more capabilities. There are tons of examples as well. I really love seeing work like this!

So if you are interested in doing something like this, I recommend:

In other words, try to learn as much as possible first! Anyone can show dots on a grid, but a great package will build expertise into the API itself, quietly leading people towards better design and accessibility. Ideally it will help people learn the important principles as well, because it is not just about getting data on screen, it is about helping people understand complex information!

Future Plans

This package should only change to account for new SVG tags and attributes.

Just like

, 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.