# A method of rendering SVG to PNG from Elm

**URL:** <https://discourse.elm-lang.org/t/a-method-of-rendering-svg-to-png-from-elm/8372>\
**Category:** Show and Tell\
**Created:** [May 6, 2022, 10:38am UTC](https://discourse.elm-lang.org/t/a-method-of-rendering-svg-to-png-from-elm/8372 "2022-05-06T10:38:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![emerij](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/emerij/32/680_2.png) [@emerij](https://discourse.elm-lang.org/u/emerij)\
**Post date:** [May 6, 2022, 10:38am UTC](https://discourse.elm-lang.org/t/a-method-of-rendering-svg-to-png-from-elm/8372/1 "2022-05-06T10:38:44Z")

</div>

We built a little port module to render SVG elements to PNG from within an Elm application. It’s probably not quite generic enough to be turned into a library, but maybe the general approach is useful to someone.

An example is available here: [Render SVG to PNG from Elm via ports - bl.ocks.org](http://bl.ocks.org/knuton/415d4d120d77127d91b734b762257aa4) (Gist: [Render SVG to PNG from Elm via ports · GitHub](https://gist.github.com/knuton/415d4d120d77127d91b734b762257aa4))

Renderings can be requested by sending out the IDs of SVG elements. The [actual rendering is done in JavaScript](https://gist.github.com/knuton/415d4d120d77127d91b734b762257aa4#file-index-html-L45) and the generated PNGs are [passed back into the port module as base64 strings](https://gist.github.com/knuton/415d4d120d77127d91b734b762257aa4#file-rendersvg-elm).

The rendering script takes care of:

- Determining suitable aspect ratio
- Rendering SVG to requested pixel size
- Copying page styles into serialized SVG to preserve external styling

It doesn’t currently take care of any external assets referenced in the SVG or stylesheets, which would fail to load during rendering.

At Dividat we use this to persist charts into a persistable and downloadable format. Most of the implementation work has been done by @etaque.

---

<div class="post-metadata">

**Author:** ![hamblingreg52](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/hamblingreg52/32/4011_2.png) [@hamblingreg52](https://discourse.elm-lang.org/u/hamblingreg52)\
**Post date:** [May 13, 2022, 5:49am UTC](https://discourse.elm-lang.org/t/a-method-of-rendering-svg-to-png-from-elm/8372/2 "2022-05-13T05:49:00Z")

</div>

It seems pretty exciting. I will surely try this method to render SVG to PNG and will let you know about the results.

---

<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:** [May 23, 2022, 5:49am UTC](https://discourse.elm-lang.org/t/a-method-of-rendering-svg-to-png-from-elm/8372/3 "2022-05-23T05:49:37Z")

</div>

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