# Element, Collage, Graphics

**URL:** <https://discourse.elm-lang.org/t/element-collage-graphics/2069>\
**Category:** Learn\
**Created:** [September 28, 2018, 6:30am UTC](https://discourse.elm-lang.org/t/element-collage-graphics/2069 "2018-09-28T06:30:34Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![David\_Legard](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@David\_Legard](https://discourse.elm-lang.org/u/David_Legard)\
**Post date:** [September 28, 2018, 6:30am UTC](https://discourse.elm-lang.org/t/element-collage-graphics/2069/1 "2018-09-28T06:30:34Z")

</div>

Have these all been consigned to the dustbin in 0.19? The old evancz/elm-graphics package has not been updated for 2 years and doesn’t appear in the list of searchable packages, so I guess it is unusable now.

What alternatives might there be in 0.19? All I need to do is to retrieve a background picture, layer some objects and lines on top of it, and include it as a [div], formerly using the command .toHtml.

---

<div class="post-metadata">

**Author:** ![mattpiz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mattpiz/32/860_2.png) [@mattpiz](https://discourse.elm-lang.org/u/mattpiz)\
**Post date:** [September 28, 2018, 7:34am UTC](https://discourse.elm-lang.org/t/element-collage-graphics/2069/2 "2018-09-28T07:34:53Z")

</div>

An alternative you have is including the [image inside an SVG element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image) and adding on top the other objects and lines you need. You can use [elm/svg](https://package.elm-lang.org/packages/elm/svg/latest/) for that.

---

<div class="post-metadata">

**Author:** ![madasebrof](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/madasebrof/32/363_2.png) [@madasebrof](https://discourse.elm-lang.org/u/madasebrof)\
**Post date:** [September 28, 2018, 1:15pm UTC](https://discourse.elm-lang.org/t/element-collage-graphics/2069/3 "2018-09-28T13:15:01Z")

</div>

If you have to do any sort of drawing/graphing/etc., I’d highly recommend taking a peek at `elm-visualization`. (We are using it in production.)

It seems to be in the process of being updated to 0.19. It’s basically a replacement for D3.

Also, if you are looking to use SVG directly, maybe take a look at the TypedSVG package–it makes for much cleaner code.

> **[gampleman/elm-visualization](https://github.com/gampleman/elm-visualization)**
>
> A visualization package for Elm (D3-like). Contribute to gampleman/elm-visualization development by creating an account on GitHub.

> **[elm-community/typed-svg](https://github.com/elm-community/typed-svg)**
>
> Typed SVG library written for Elm. Contribute to elm-community/typed-svg development by creating an account on GitHub.

---

<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 28, 2018, 10:05pm UTC](https://discourse.elm-lang.org/t/element-collage-graphics/2069/4 "2018-09-28T22:05:35Z")

</div>

There’s also [elm-vegalite](https://package.elm-lang.org/packages/gicentre/elm-vegalite/latest) (which uses the widely adopted _Grammar of Graphics_) and [elm-vega](https://package.elm-lang.org/packages/gicentre/elm-vega/latest/) (which uses a D3 type approach). Both work with Elm 0.19. (Disclosure: I am the author of both).

Although for the OP’s tasks, I agree that elm/svg is probably the way to go.

---

<div class="post-metadata">

**Author:** ![David\_Legard](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@David\_Legard](https://discourse.elm-lang.org/u/David_Legard)\
**Post date:** [September 29, 2018, 12:01am UTC](https://discourse.elm-lang.org/t/element-collage-graphics/2069/5 "2018-09-29T00:01:02Z")

</div>

Thanks for all the suggestions, I guess I’ll have to bite the bullet one way or another…

---

<div class="post-metadata">

**Author:** ![timjs](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/timjs/32/1367_2.png) [@timjs](https://discourse.elm-lang.org/u/timjs)\
**Post date:** [October 4, 2018, 10:05am UTC](https://discourse.elm-lang.org/t/element-collage-graphics/2069/6 "2018-10-04T10:05:52Z")

</div>

Elm Collage is [ported to 0.19](https://package.elm-lang.org/packages/timjs/elm-collage/latest/)!

Only measuring the size of text is done using heuristics now, as the usage of native code is forbidden. I’m still open for suggestions on that!

---

<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 14, 2018, 10:06am UTC](https://discourse.elm-lang.org/t/element-collage-graphics/2069/7 "2018-10-14T10:06:00Z")

</div>

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